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') )