Previous Next

React Components

Components are similar to functions that restore HTML elements.

React Components

The parts are independent and can be reused. They serve the same purpose as JavaScript functions, but work independently and restore HTML.

The components come in two types, Class components and Function components, in this lesson we will focus on the Work components.

On the basis of the old React code, you can find parts of the class used primarily. It is now suggested that the Function and Hooks sections, added to React 16.8, be used. There is an optional section of the class sections to get your reference.

Create Your First Component

When you create a React component, the component name MUST start with a capital letter.

Class Component

Part of the class should include an extends React.Component statement. This statement creates the assets of the React.Component, and gives your component access to the React.Component functions.

The component also requires an render() method, this method returns HTML.

Example

Create a Class component called Car

class Car extends React.Component {
            render() {
              return <h2>Hi, I am a Car!</h2>;
            }
          }
          

Function Component

Here is an example, but it was created using part of the Function instead.

The Fucntion component also restores HTML, and behaves in the same way as the Class section, but Task sections can be written using very small code, are easy to understand, and will be selected in this tutorial.

Example

Create a Function component called Car

function Car() {
            return <h2>Hi, I am a Car!</h2>;
          }
          

Rendering a Component

Your React app now has a component called Car, which returns the <h2> component.

To use this component in your application, use the same syntax as standard HTML: <Car/>

Example

Display the Car component in the "root" element:

ReactDOM.render(<Car />, document.getElementById('root'));

Props

Components can be passed as props, representing structures.

Resources are like performance issues, and you post them in the section as attributes.

You will learn more about props in the next chapter.

Example

Use an attribute to pass a color to the Car component, and use it in the render() function:

function Car(props) {
            return <h2>I am a {props.color} Car!</h2>;
          }
          
          ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
          

Components in Components

We can refer to internal components:

Example

Use the Car component inside the Garage component:

function Car() {
            return <h2>I am a Car!</h2>;
          }
          
          function Garage() {
            return (
              <>
                <h1>Who lives in my Garage?</h1>
                <Car />
              </>
            );
          }
          
          ReactDOM.render(<Garage />, document.getElementById('root'));
          

Components in Files

React is about reusing code, and it is recommended that you split your sections into separate files.

To do that, create a new file with an .js file extension and enter the code inside:

Note that the filename must start with a capital letter.

Example

This is the new file, we named it "Car.js":

function Car() {
            return <h2>Hi, I am a Car!</h2>;
          }
          
          export default Car;
          

In order to use the Car component, you must import a file into your application.

Example

Now we import the "Car.js" file in the application, and we can use the Car component as if it was created here.

import React from 'react';
            import ReactDOM from 'react-dom';
            import Car from './Car.js';
            
            ReactDOM.render(<Car />, document.getElementById('root'));
            

Previous Next