React Components Explained: A Beginner-Friendly Guide with Examples

#beginners #webdev #programming #react

Introduction

A React component (functional component) is just a JavaScript function that returns an HTML-like code(JSX — JavaScript XML). It is the core concept in React. It solves many developers’ problems.

Why Components Are Important in React

React component solves the unnecessary repetitions of the same code with a slight change in data. React components are designed to be reused to avoid the unnecessary repetition. Suppose you have to render 4 product cards. The cards are same in design, but the data is different for each product. So, you have to create four cards. That would take a lot of time and energy. That’s boring too. But React understands our worries and makes this easier for us. Now, in the above supposed case, how React solves our problem. With React, you will create only one component as use it for 4 times or any number of times wherever you want to use it in your app. Also, React component ensures UI consistency. Also, by dividing the app into components, the code becomes easy to understand and maintain. For these features, important of React components is not hidden. So, they are absolute necessary and important in our app.

Types of Components in React

There are two main types of React components:

Functional Component

They are modern and recommended way of writing component. Functional components are easy and mostly used today.
```
function Welcome() {
  return <h1>Hello, React!</h1>;
}
```
Class Component

It is an older approach of writing components. It is not used much today in modern apps.
```
class Welcome extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}
```
Note: If you want a detailed Functional VS Class Component, then comment and I’ll surely bring a detailed comparison soon.

Creating Your First Component

For creating a React component, you follow these steps:

Create a file first in the src/ or src/components/ (Mostly. It is recommended).
Write your component.
Export your component to make it available for use.
Import and use it in your app.

Now, I’ll show how to create your first React component.

First Step: Create a file with an extension .jsx in src/. i.e., create Button.jsx in src/.

Second Step: Write your component in the file i.e.,Button.jsx

function Button() {
  let name = "John Doe";
  return <button>Hello World by {name}</button>;
}

Third Step: Export the component. You can export the component by writing this line at the end of the file (in which you have written your component).

export default Button;

So, your component file would become:

function Button() {
  let name = "John Doe";
  return <button>Hello World by {name}</button>;
}

export default Button;

Fourth Step: Import the component and use it in your app. To import add this line (recommended at the top) of the file where you want to use it:

import Button from "./Button";

Note: ./Button is the relative path of the component file from the file where you are importing.

To use the component, you can use one of these syntax. You can either use this:

<Button></Button>

Or:

<Button />

The final code of the file where I used this component is:

import Button from "./button";
function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <Button />
    </div>
  );
}

export default App;