React is an open-source javascript library for building user interaces or UI components and applied as a base in the development of single-page or multiple-page applications. React apps are made up of core building blocks called components. A component to a react app functions the same way as bricks do to a house. One of the most useful quality of components is its reusability. Say we have an app that displays a call card in several places, of course we can create these cards many times but as it increases, it becomes stressful. To make things easier, we could create a single component that has the call card and simply reuse it wherever it's needed.

In react, there are two ways of creating components: function and class-based components

Functional Components: This method employs writing a function with a special 'html-like' code (JSX) written inside it. JSX code is a javascript code that looks so much like html , but actually isn't. You can write the function using the normal function syntax or using the ES6 arrow function syntax. Here, I'll be using the ES6 arrow function syntax. Let's create a functional component called Users.js This contains two paragraph elements. We have to first import react from the react package to our Users file to do this.

import React from 'react'
const Users = () => {
return(
<div>
<p>Hello there</p>
<p>It's me</p>
</div>
)
}

Class-based Components: Here, to create a functional component called User2.js, we import not only react but also component from react package. We then give our component a name and extend the Component from react. Our component name here will be called User2

import React, {Component} from 'react',
class User2 extends Component {
render(){
return(
<div>
<p>This is react</p>
</div>
)
}
};

This class-based component contains an extra render() function that helps us render the various html-like (JSX) elements to the DOM. It is important to note that in react, the return statement can only return one direct element. This is why we wrap our two paragraph elements in a single div tag. Creating two div tags with no parent element wrapped around it will produce an error.

//This is correct
import React from 'react'
const Users = () => {
return(
<div>
<p>Hello there</p>
<p>It's me</p>
</div>
)
}

/*This is wrong because there are two paragraph elements and no single parent element wrapping them*/
import React from 'react'
const Users = () => {
return(
<p>Hello there</p>
<p>It's me</p>
)
}

Now that we have created these components, lets show its reusability. Let's create an app file called App.js and import the component we intend to use. In this case, we'll be using Users.js and Importing the Users.js file we created earlier to App.js would look like this

import Users from '(file path to Users.js here)'

If we try using the Users.js component in App.js as shown below

import React, {Component} from 'react',
class App extends Component {
render(){
return(
<Users/>
<Users/>
)
}
};

An error would be displayed and this is because although we tried importing the Users.js file to use in our app, it won't be found because we didn't export it from Users.js. To do this, we simply attach this code export default Users to the end of our Users.js file and try again. So our Users.js file now looks like this

import React from 'react'
const Users = () => {
return(
<div>
<p>Hello there</p>
<p>It's me</p>
</div>
)
}
export default Users;

Now if we try running our App.js file, we won't see errors and this code will display on our browser

Hello there

It's me

Hello there

It's me

Hello there

It's me

Notice how our Users.js is reused twice without having to rewrite another code? This is because we just used our Users.js file three times instead!