Compared with ANGULARJS, the react is simple enough to make people shocked.
After the introduction of the React Library, the development API is exposed through the react object. What we do and can do is:
Create elements on the virtual DOM and render them to the true DOM.
The two methods of the react object are used in the sample code:
The parameter type is used to specify the type of element to create, which can be a string or a react component type. When using strings, this parameter should be the standard HTML tag name, such as: P, Div, canvas, and so on.
The parameter props is an optional JSON object that specifies additional attributes of the element, such as styles, CSS classes, and so on. We simply set the null in the example.
All parameters starting from the third parameter, children, are considered to be child elements of this element. Considering that the virtual DOM is also DOM, it is easy to understand that react needs to pass these child element parameters, so that we can construct the virtual DOM tree:
This time the above method is just a virtual DOM, how this virtual DOM rendering to the real DOM, we need to call the Render method, this method has three parameters (Element,container,callback)
The parameter element is the react element we created using the createelement () method, note that it is not an HTML element!
The parameter container is the HTML element in the real DOM, and as the target container for rendering, its contents will be changed by the render () method execution.
The callback parameter is an optional function that is executed when rendering is completed or updated, usually without it. (This method is generally not called)
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Hello React! </ title>
<!-1. Introduce React library->
<script src = "js / react.min.js"> </ script>
<style>
p {font: italic bold 50px verdana;}
</ style>
</ head>
<body>
<!-2. Define the container on the real DOM->
<div id = "content"> </ div>
<script>
// The first parameter is an ordinary html element, which can also be a React component. The second parameter can be json data, the third parameter is the child element of this element
// var el2 = React.createElement ("p", null, "HELLO FXR");
// 3. Create p elements on the virtual DOM
// var el = React.createElement ("p", null, "Hello React!");
var el2 = React.createElement (
"table",
null,
React.createElement ("tr", null, "ID"),
The
React.createElement ("tr", null, "NAME"),
The
React.createElement ("tr", null, "SEX"),
React.createElement ("br", null, ""),
React.createElement ("tr", null, "1"),
React.createElement ("tr", null, "airycode"),
React.createElement ("tr", null, "Male")
);
// 4. Render the p element on the virtual DOM to the #content container on the real DOM
//React.render(el,document.querySelector("#content "));
React.render (el2, document.querySelector ("# content"));
</ script>
</ body>
</ html>
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
