DEV Community

loading...

Essential React Concept - Part 1

Gobinath Varatharajan
・3 min read

This video by far the best piece of advice to learn react.πŸ’―


Baisc React JSX

import React from 'react';
import ReactDOM from 'react-dom';

// greeting is what it will render
function greeting() {
    return <div>Hello World</div>
}

// root from html is where to render
const rootNode = document.getElementById('root');

// ReactDOM.render(what, where);

ReactDOM.render(greeting(), rootNode);
Enter fullscreen mode Exit fullscreen mode

Nesting Expression

  • { } - it help us to interpreted the javascript expression in JSX
const year = 2020;

function Date() {
    return <div>Covid-19 hit on the year {year}</div>
}
Enter fullscreen mode Exit fullscreen mode

Styling JSX with Inline-CSS

  • it help us to interpreted the javascript expression in JSX as an object.
const greeting = <button 
        style={{backgroundColor: 'red'}}>Submit
    </button>
Enter fullscreen mode Exit fullscreen mode

Using Multi-Component with JSX

  • Function vs Class
import React from 'react';
import ReactDOM from 'react-dom';

// 1. Using Function Component
const Header = () => {
    return <h1>Hello World</h1>;
}

const Footer = () => {
    return <p>Welcome to React Component</p>;
}

// 2. Using Class Component

class Header extends React.Component {
    render() {
        return <h1>Hello World</h1>;
    }
}

class Footer extends React.Component {
    render() {
        return <p>Welcome to React Component</p>;
    }
}

function App() {
    return (
    <>
        <Header />
        <Footer />
    </>);
}

const rootNode = document.getElementById('root');

ReactDOM.render(<App />, rootNode);
Enter fullscreen mode Exit fullscreen mode

Argument Vs Parameter

  • Parameters are declare within the function
  • Arguments are the value pass to the function
// Parameter
function argumentVar(par1, pa2, par3, par4, par5) {
    console.log(par1 + par2 + par3 + par4 + par5);
}

// Function call
argumentVar(1,2,3,4, 5);
// 11

// Arguments
function argumentVar(parameter1, parameter2, parameter3) {
    console.log(arguments.length);
}

// Function call
argumentVar(1,2,3,4,5);
// 5
Enter fullscreen mode Exit fullscreen mode

Single Props

  • Help to pass value to the component
  • props are object.
  • They are read-only(immutable) and they cannot directly change
function Name(props) {
    return <h1>Hello {props.username}</h1>
}

const rootNode = document.getElementById("root");

ReactDOM.render(
    <Name username="Tony Robbie" />, 
    rootNode
);

// Hello Tony Robbie
Enter fullscreen mode Exit fullscreen mode

Parent and child relationship with Props

  • you should implement {props.children} when you're passing children in the parent component.
import React from 'react';
import ReactDOM from 'react-dom';

// This is child
function Header(props) {
    return <h1>Hello {props.username}</h1>;
}

// This is the parent
function Layout() {
    return 
        <div style={{ background: 'golden' }}>
            {props.children}
        </div>;
}

function App() {
    return (
    <Layout>
        <Header username="Tony Robbie" />
    </Layout>
);
}

const rootNode = document.getElementById('root');

ReactDOM.render(<App />, rootNode);
Enter fullscreen mode Exit fullscreen mode

Map

  • Help toaccess array of element
function App() {
    const actor = ["bruce", "robert", "will"];

return (
    <ul>
        {actor.map(character => (
            <li>{character}</li>
        ))}
    </ul>);
}

//you can also do this with component
function App() {
    const actor = ["bruce", "robert", "will"];

return (
    <ul>
        {actor.map(character => (
            <Character character={character} /> 
        ))}
    </ul>);
}

function Character(props) {
    return <li>{props.character}</li>
}

//render
const rootNode = document.getElementById("root");
ReactDOM.render(<App />, rootNode);
Enter fullscreen mode Exit fullscreen mode

key

  • Unique identifier to do some change only the needed once.
function App() {
    const actor = ["bruce", "robert", "will"];

// here I have use indexes 
// you can also use some package for it.

return (
    <ul>
        {actor.map((character, i) => (
            <Character key={i} character={character} /> 
        ))}
    </ul>);
}
Enter fullscreen mode Exit fullscreen mode

Event Handler

  • onClick eventhandler
// you have access to function data with event
function Character(props) {
    function handleCharacterClick(event) {
        alert(props.character);
        console.log(event);
}

    return <li onClick={handleCharacterClick}>{props.character}</li>
}
Enter fullscreen mode Exit fullscreen mode
  • onChange eventhandler
function handleInputChange(event) {
    const inputValue = event.target.value;
    console.log(event);

return (
    <input onChange={handleInputChange} />
    )
}
Enter fullscreen mode Exit fullscreen mode

In Part 2 - I wil post all about Hooks all the post written in my blog are from my knowledge feel free to oppose it🀩.

Discussion (0)