Creating your first React components

Introduction

Now that we have set up a React project, it's time to discover one of the most important concepts in this library: components. A component in React is a piece of reusable code that displays part of the user interface. Today, we'll see how to create and use components in React.

1. What is a React component?

A component is a function or class that returns JSX (a syntax similar to HTML but which allows you to insert JavaScript). React uses these components to build modular and reusable interfaces.

There are two types of components in React (this was important before hooks existed):

• Functional components (stateless)
• Class-based components (stateful)

In this blog, we will focus on functional components.

2. Creating a functional component

A functional component is a JavaScript function that returns JSX. Here is a simple example:

1import React from ‘react’;
2
3function Hello() {
4  return <h1>Hello, welcome to Ali's website!</h1>;
5}
6
7export default Hello;

This component simply displays a welcome message.

3. Using a component in a React application

Once the component has been created, we can use it in other parts of our application. For example, in App.js, which is itself a component:

1import React from ‘react’;
2import Hello from ‘./Hello’;
3
4function App() {
5  return (
6    <div>
7      <Bonjour />
8    </div>
9  );
10}
11
12export default App;

The Bonjour component is imported and used by including it as a JSX tag (<Bonjour />).

4. Adding Props

Props (for properties) allow you to pass data to a component. Here is an example:

1function Hello(props) {
2  return <h1>Hello, {props.name}!</h1>;
3}

Here's what it looks like in App.js:

1function App() {
2  return (
3    <div>
4      <Hello name="Ali" />
5      <Hello name="Marie" />
6    </div>
7  );
8}

In this example, props.name allows you to display a different name depending on the value passed with the props.

Conclusion

In conclusion, components are very important in React. They allow you to divide an application into small, reusable, and modular parts. Today, we saw how to create functional components by passing props to them to display dynamic values.

In the next blog post, I'll show you hooks, another marvel of React.

Sources

The Net Ninja. (2020, December 22). Full React Tutorial #3 - Components & Templates YouTube. https://www.youtube.com/watch?v=9D1x7-2FmTA&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=4

The Net Ninja. (2012, January 4). Full React Tutorial #11 - Props YouTube. https://www.youtube.com/watch?v=PHaECbrKgs0&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=11