React Components
Tags: react, reactcomponent, jsx, javascript
Published: 2020-12-27 19:16:00

###### *This article is sponsored by [Flutterwave](https://dashboard.flutterwave.com/signup?referrals=RV686851) - 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:

![Components in React](https://cdn.hashnode.com/res/hashnode/image/upload/v1609170869830/9Dzf-peQN.jpeg)

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?](https://dev.to/bello/what-is-reactjs-g6n) 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*.

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

 ```jsx
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**
```jsx
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**
```jsx
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**
```jsx
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**
```jsx
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**
```jsx
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**
```jsx
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](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html).

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

{% stackblitz react-aphk5k file=App.js %}

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

{% user bello %}
#### 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](https://dashboard.flutterwave.com/signup?referrals=RV686851). Open an online store and take your business anywhere in the world.

{% youtube ClXVUM3Rf7A %}

[Sign up today to get started](https://dashboard.flutterwave.com/signup?referrals=RV686851)

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.