Summary of React's way of creating components

1. Create components using functions

Functional components: components created using JS functions (or arrow functions)

Convention 1: Function names must start with a capital letter

Convention 2: Function components must have a return value, indicating the structure of the component

If the return value is null, it means nothing is rendered.

function Hello() {
    return (
        <div>This is my first functional component! </div>
    )
}
const Hello = () => <div> This is my first functional component! </div>

Rendering function component: use the function name as the component tag name

Component labels can be single or double

//1. Import react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  Functional components:
*/
function Hello() {
  return (
    <div>This is my first functional component! </div>
  )
}

// Rendering component ReactDOM.render(<Hello />, document.getElementById('root'))

2. Create components using classes

Component class: a component created using ES6 class

Convention 1: Class names must also start with a capital letter

Convention 2: Class components should inherit the React.Component parent class so that they can use the methods or properties provided by the parent class

Convention 3: Class components must provide a render() method

Convention 4: The render() method must have a return value, indicating the structure of the component

//1. Import react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  Functional components:
*/
function Hello() {
  return (
    <div>This is my first functional component! </div>
  )
}

// Rendering component ReactDOM.render(<Hello />, document.getElementById('root'))

3. Extract to independent JS file

1. Create Hello.js

2. Import React in Hello.js

3. Create components (functions or classes)

4. Export the component in Hello.js

5. Import the Hello component in index.js

6. Rendering Components

Hello.js

import React from "react";

//Create component class Hello extends React.Component {
    render () {
        return (
            <div>This is my first component extracted into a js file! </div>
        )
    }
}

//Export component export default Hello

index.js

//1. Import react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  Extract components into separate JS files:
*/

//Import Hello componentimport Hello from './Hello';

// Rendering component ReactDOM.render(<Hello />, document.getElementById('root'))

This concludes this article on two ways to create React components. For more information about how to create React components, please search for previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!