React — Function component and Class component —

Photo by Sigmund on Unsplash

Create a component

Components are the “parts” that are displayed on the screen in React.

It combines necessary data, processing, etc. into a single object.

“Function” components

Return the element to be displayed with `return

Just return the value of JSX with `return`.

function component name ( argument ) {
    return Display_by_JSX;
}

Components can be written as dags.

One way to use components is to write them as tags in JSX.

In the case of a function component, write it as a tag using the name of the defined function.

<component_name />

The element that was `returned` by the function will be embedded in this tag.

Displaying Components 1.

1. define a function

function Welcome(props) {
    return <div className=”alert alert-primary”>
        <p className=”h4">Hello React! </p>
    </div>
}

Specify the position to be displayed in JSX

let el = (
    <div>
        <h5 class=”mb-4">{message}</h5>
        <Welcome />…