Learning React JS with examples

React JS is a library to make front end UI.

React is used to make the components. Component is a UI that has its own logic and appearance(both). Component is of the form of a function that returns the HTML.

We can insert one component in another component.

The component starts with a capital letter.

function MyButton(){ // M is capital letter
    return (
        <button> I am button </button>
    ); // after return we put semicolon
}

Now we can call this into another component.

Let us insert MyButton component into another component.

function MyButton(){ // M is capital letter
    return (
        <button> I am button </button>
    ); // after return we put semicolon
}
export default function MyApp(){
    return (
        <div>
             <h1> Welcome </h1>
             <MyButton />
        </div>
    );
}

The output of the page will show the heading “Welcome” and then a button.

We use export default to specify the main component of the file.

We can not return multiple tags. We can wrap all the tags inside a div tag like <div> … </div> or empty wrapper like <>…</> and then return the same.

We can add the components multiple times.