What is a react component?
A React component is an independent piece of your complete user interface UI. Using a component allows you to think about how to manipulate it in isolation from the rest of the user interface.
If I had a blog-post UI, it might have three components:
- The post component containing the heading and the content components.
- heading component containing the heading text.
- The content component containing a paragraph of text.
The different kinds of React components
There are two types of react components. They are named according to how you create them.
1. Function components
You can create a component in React by just using a simple Javascript function. The function component can look looks like this one below.
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // Start of react function component function BlogPost() { return <h1>Rubberband powered Planes</h1>; } // End of a function component ReactDOM.render(<BlogPost />, document.getElementById('root'));
You can pass properties(props) to the function like this:
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // Start of react function component function BlogPost(props) { return <h1>{props.title}</h1>; } // End of a function component ReactDOM.render(<BlogPost title="Rubberband powered Planes"/>, document.getElementById('root'));
2. Class components
You create this component by using a class defined in ES6 Javascript.
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // Start of a class component class BlogPost extends React.Component { render() { return <h1>Rubberband powered Planes</h1>; } // End of react function component ReactDOM.render(<BlogPost />, document.getElementById('root'));
When you add the properties(props) to the react component.
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class BlogPost extends React.Component { render() { return <h1>{this.props.title}</h1>; } } // End of react function component ReactDOM.render(<BlogPost title="Rubberband powered Planes"/>, document.getElementById('root'));
The complete blogpost component with the heading and content components can then become:
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function Heading(props) { return <h1>{props.title}</h1>; } function Content(props) { return <p>{props.bodytext}</p>; } class BlogPost extends React.Component { render() { return ( <div> <Heading title="Rubberband powered Planes"/> <Content bodytext="This is a blob of text about Rubberband powered planes. They are only able to fly for a short time because the rubber band can only store a limited amount of energy" /> </div> ) } } ReactDOM.render(<BlogPost />, document.getElementById('root'));
What kind of components should I use?
I started learning React this week so I am in no position to advice on which method to use. However, I am mainly using class based components in the current practice project. I found the React’s official documentation explanation very helpful on this question.