React Components

This article is sponsored by Flutterwave - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!

What are the components?

A simple definition of components is:

Components are independent and reusable bits of code

They serve the same purpose as JavaScript functions but work in isolation and return HTML via a render function.

The image below shows part of the official React home page divided into components:

Let's take a look at the latter components (the bottom 3 components). Here you can use React to write a component once and reuse it anywhere in your application. Apart from making a component reusable, it makes it manageable and maintainable.
Check out the article, What is React? to learn more on this section.

Types of Components

In React there are three types of components:

1. Class components
2. Function components
3. Server components

Note: JavaScript files can either be in the extension .js or jsx, since most of the syntax is from JSX

Function Component

The function component is simply a function that returns a component.

Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.

Note: It is recommended to write code in ES6+ since React takes care of Browser Compatibility.

Also, no render method in functional components.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h3>Hello World</h3>
      <h3>You are now editing the <code>App.js</code> file</h3>
    </div>
  );
}

export default App;

Note: The first module to import in any JSX file is react. This is true for React versions between 16.8 and 17.0.

import React from 'react'

If you are using React 18.0+ you may omit the import statement (since React does that for you automatically).

Without importing it in React version < 17.0 or > 16.8, the app will not understand the JSX syntax (causing errors) and can not use other features the React team makes available.

Functional components can also accept and use props.
See the example below:

App.js

import './App.css';

const App = props => {
  return (
    <div className="App">
      <header className="App-header">
        <h3>Name: {props.name}</h3>
        <p>Skill: {props.language}</p>
      </header>
    </div>
  );
}

export default App;

Props is a parameter in a function. When arguments are passed to the component, they get filled to the component then rendered to the DOM. That is, they fill the custom data, {props.name} and {props.language} before rendered to the DOM (screen).

For now, the component above is requesting arguments. The arguments can be passed in the App component of the index.js file.

index.js

import React from 'react';
import ReactDOM from 'react-dom'; // expects to render a component
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App name='Bello' language='React' />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Note: Whenever you what to render a component in a program always import the ReactDOM from the 'react-dom' module.

The component in the index.js file is called the App component. It holds all components in a single page web app. It is a rendered root component. This is why passing arguments in the App Component is not a good practice. For a complex application with many components, it makes your app difficult to maintain, manage, and understand.

In the above example, we can omit the arguments in the App component.

Let's create another functional component in a new file, Person/Person.js.

Person/Person.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <header className="App-header">
                <h3>Name: {props.name}</h3>
                <h3>Skill: {props.language}</h3>
            </header>
        </div>
    );
};

export default Person;

Pass the arguments instead in the App.js file. Override the previous code with the code shown below:

App.js

import React, { Component } from "react";
import './App.css';
import Person from './Person/Person';

class App extends Component {
  render() {
      return  <Person name='Bello' language='React' />;
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App /> 
    {/* root component. Comment in JSX format */}
  </React.StrictMode>,
  document.getElementById('root')
);

Observation

• The code import App from './App' is the same as import App from './App.js. The .js extension is added automatically by the build workflow.

• The .js is the same as .jsx extension in react.

Class Component

When creating a React component, the component's name must start with an upper case letter. For a functional component, it's optional.

Note: Alongside importing React, you should also import the React Component when it's a class component.

See the example below:
App.js

import React from 'react'; // import react first
import { Component } from 'react'; // expects a class component
import './App.css';
import Person from './Person/Person';

class App extends Component {
  render() {
      return <Person name='Bello' language='React' />;
  }
}

export default App;

Note: Before you can use the React Component, you must have already imported React.

The App class inherits from the component Class. It must also have a render method, render() to render component(s) to the DOM.

The server component is the third type of component. This will be in a separate article, but you can read more on the React blog.

Note:

• Components without any state are also called stateless, dumb, presentational, or pure components because they simply accept data and display them in some form. That is, they are mainly responsible for rendering UI.

• Components with state are called stateful, smart or container components.

• It is recommended to have a more stateless component than a stateful component.

Happy Coding!!!

Bello OsagieFollow

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

Techstack | Flutterwave

Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free! Also, you get a Flutterwave dollar barter card when you signup. Open an online store and take your business anywhere in the world.

Sign up today to get started

Support what I do and push me to keep making free content.