Component in ReactJS

Components let you divide the application into reusable, independent (most of the times) pieces.
Let us have a practical example. Suppose you are building a very big castle. Then a single brick will be your component. You can reuse bricks to create a great castle but the castle (complex UI) is divided into bricks and other small parts (components).
So every application (simple or complex) can be divided into small components that can be used into an application.

Suppose, you are creating an application that has a login, register, and home page. Now this application has a header that contains a company logo and a search box. It has a footer which contains some links. Now header and footer are common. So we can make header and footer a component. So you don't need to create a header for home, log in and register page.
That is just an idea about how you can think of a component.

Types of Components in ReactJS

There are two kinds of components in ReactJS.

Stateful component ( Class component )

ES6 class is used to define a component in ReactJS. Components in ReactJS is derived from Component class in React.


class App extends React.Component{
    render(){
        return (<h1>Hello {this.props.name}, This is React Application.</h1>);
    }
}
                    

The above kind of component is called Class component or Stateful component. When a component need to have some state, Class components are used. You can also use simple JavaScript function to create a component.

React calls render() method of the class component when component is used. render() returns HTML like syntax (JSX) which is rendered where component is used.
HTML like syntax is called JSX. This tutorial describes JSX in ReactJS.

Stateless component ( functional component )

Stateless component are just JavaScript functions which takes props as an argument and returns JSX object.


function App(props){
    return <h1> Hello {props.name} This is React Application.</h1>
}
                    

Above function is a valid React component. It is called Function components or Stateless components. This kind of component can not have state. Only Class component can have state.
You can not use this keyword while accessing props in functional components.

This tutorial describes the difference between stateful and stateless components.

Render a component in ReactJS

To render above created component App, please refer the following code.


class App extends React.Component{
    render(){
        return (<h1>This is React Application.</h1>);
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

Open above code in codepen.

  • ReactDOM.render() method will add App component to element with id="root".
  • ReactJS will call render method of App component which will return <h1>This is React Application.</h1> (JSX)
  • This JSX syntax will be compiled to HTML by ReactJS and added to DOM inside element with id="root".

Nested components

It is possible that one component can be made using one or more components. You can nest components.


class Department extends React.Component{
    render(){
        return(
            <h3>
                This is ReactJS Department
            </h3>
        );
    }
}

class App extends React.Component{
    render(){
        return (
            <div>
                <Department />
                <h1>This is React Application.</h1>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

Open above code in codepen.

In above example, Department component is added in App component and finally App component is rendered to id=root element.

Wrap the elements

If you have notice, Any component's render method should be returned wrapped in one element if it is returning more than one element.


class Department extends React.Component{
    render(){
        return(
            <h3>
                This is ReactJS Department
            </h3>
        );
    }
}

class App extends React.Component{
    render(){
        return (
            <Department />
            <h1>This is React Application.</h1>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

In the above example, App component returns elements which are not wrapped. It will give an error like "Adjacent JSX elements must be wrapped in an enclosing tag".

Conclusion

In this section, we have learned about components in ReactJS.
In the next section, you will learn about JSX in ReactJS.