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 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.