Dev Practical

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:

    1. The post component containing the heading and the content components.
    2. heading component containing the heading text.
    3. The content component containing a paragraph of text.
  • Component visualisation

    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.