The React component (Component) is also an element, but it is more granular and contains more child elements.
Through the react component, some related elements are organized to form a reusable combination of elements with multiple members. examples
<!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. Create components by inheriting react.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')
)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
