Getting started with react - creating components (1)

The React component is also an Element, but it is only a larger granularity and contains more child elements.

Through the React component, some related elements are organized to form a reusable combination of elements with multiple members.

give an example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React Components</title>
</head>
<body>

<!-- Target Container -->
<div id="react-container"></div>

<!-- React Library & React DOM-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script>
    class foodList extends React.Component {
      render() {
        return React.createElement("ul", {"className": "food-list"},
            React.createElement("li", null, "1 apple"),
            React.createElement("li", null, "1 banana"),
            React.createElement("li", null, "2 oranges"),
            React.createElement("li", null, "2 tomatos")
        )
      }
    }
    const list = React.createElement(foodList, null, null)
    ReactDOM.render(
        list,
        document.getElementById('react-container')
    )
</script>

</body>
</html>

1. By inheritance React.Component Create component

class foodList extends React.Component {

}

2. The render function must be included in the component

class foodList extends React.Component {
      render() {
         // Code to create the element
      }
}

3. Returns a combination of multiple children of an element in render

render() {
       return React.createElement(
           "ul", 
           {"className": "food-list"},
            React.createElement("li", null, "1 apple"),
            React.createElement("li", null, "1 banana"),
            React.createElement("li", null, "2 oranges"),
            React.createElement("li", null, "2 tomatos")
       )
}

4. Create the list element by passing in the component foodList as a parameter through createElement

const list = React.createElement(foodList, null, null)

5. Rendering

ReactDOM.render(
        list,
        document.getElementById('react-container')
    )

Tags: React

Posted on Sun, 31 May 2020 00:48:26 -0400 by Karpathos