Home > Developer > Web Develop
React originated in Facebook's internal project because the company was dissatisfied with all the JavaScript MVC frameworks on the market and decided to write a set of Web sites that would be used to erect Instagram. After doing it, found that this set of things very useful, in May 2013, open source. Because React's design ideas are extremely unique, revolutionary and innovative, the code logic is simple. Therefore, more and more people are beginning to pay attention to and use, think it may be the mainstream tool of WEB development in the future.
REACTJS website Address: http://facebook.github.io/react/
GitHub Address: Https://github.com/facebook/react
Reactjs Chinese Address: http://reactjs.cn/react/docs/getting-started.html
ii. Characteristics of Reactjs1, Virtual DOM
with the DOM diff algorithm, only the differentiated parts are updated, without rendering the entire page, thus improving efficiency
2, Modular
Divides a page into components that contain logical structures and styles
The component contains only its own logic, which can be predicted when updating the component, and is conducive to maintenance
The page splits multiple components and can be reused
3, unidirectional Data flow
Data is passed from the top-level component to the child component
Data controllable
Iii. Getting started react writing Hello,world first understand what is JSX
One of the core mechanisms of react is virtual DOM: a virtual DOM element that can be created in memory. React uses virtual DOM to reduce the operation of the actual DOM to improve performance. Similar to the real native DOM, virtual Dom can also be created with JavaScript, for example:
var null, ' first Text Content '); var null, ' Second Text Content '); var root2 = react.createelement (' ul ', {className: ' My-list ' }, Child1, child2); React.render ( <div>{root2}</div>, document.getElementById (' Container5 '));Using this mechanism, we can build a complete interface dom tree with JavaScript, just as we can create real Dom with JavaScript. But this code is not readable enough, so react invented the JSX, using our familiar HTML syntax to create the virtual DOM:
var root =( <ul classname= "my-list" > <li>first Text content</li> <li>second Text content</li> </ul>); React.render ( <div>{root}</div>, document.getElementById (' Container6 '));Iv.React 5 ways to get started with Hello,world
1th Way
<div id= "example1" ></div> <script type= "TEXT/JSX" > react.render ( // Direct HTML) ); </script>
2nd Way
<div id= "example2" ></div> <script type= "TEXT/JSX" >// create elements directly react.createelement (' H1 ', {className: ' classN2 '}, ' 2 Hello, directly create element world! ' ), document.getElementById (' example2 ')); </script>3rd way
<div id= "Example3" ></div><script type= "text/jsx" >var createel=React.createclass ({ Render:function() { // return return ( // component mode create element <createel/>, // or double brackets <CreateEl></CreateEl> document.getElementById (' Example3 ')); </script>
4th Way
<div id= "Example4" ></div> <script type= "text/jsx" >var jsxcreateel= React.createclass ({ // Direct jsx mode to create render:function() { Return ( react.createelement (' H1 ', {className: "ClassN4"}, "4 Hello, direct jsx way to create world! " ) ) // component method to create the element null), document.getElementById (' example4 ')); </script>5th Way
<div id= "Example5" ></div> <script type= "TEXT/JSX" >varHello=react.createclass ({//Template HelloRenderfunction(){ return(<span>{ This.props.data}</span>) }});varWorld=react.createclass ({//Template WorldRenderfunction(){ return(<span> and World template splicing </span>) }}); React.render (//2 template component ways to create an element<H1 classname= "classN5" > )); </script>
Five, the above result diagram
Attached code:
<!doctype html>;} body{background:#333;} #box {background:url (loveimg/qioa-fxehfqi8208393.jpg) no-repeat Center top; width:550px; border:8px solid #fff; -webkit-box-sizing:border-box; margin:50px Auto;} #example1, #example2, #example3, #example4, #example5 {margin:20px auto; width:100%; Background:rgba (255,255,255,.3); padding:5px 10px; font-size:13px; Color: #f1f1f1;-webkit-box-sizing:border-box; } </style> <div id= "box" > <div id= "example1" ></div> <script type= "TEXT/JSX" >React.render (//Direct HTML<H1 classname= "classN1" >1 hellow direct HTML World ) ); </script> <div id= "example2" ></div> <script type= "TEXT/JSX" >React.render (//Create elements directlyReact.createelement (' H1 ', {className: ' classN2 '}, ' 2 Hello, directly create element world! '), document.getElementById (' Example2 ')); </script><div id= "Example3" ></div><script type= "TEXT/JSX" >varCreateel=React.createclass ({render:function(){ //return return( }}); React.render (//component Way to create elements<createel/>,//or double brackets <CreateEl></CreateEl>document.getElementById (' Example3 ')); </script> <div id= "example4" ></div> <script type= "TEXT/JSX" >varJsxcreateel=react.createclass ({//Direct JSX Mode creationRenderfunction(){ return(React.createelement (' H1 ', {className: "ClassN4"}, "4 Hello, direct JSX way to create world! ") ) }}); React.render (//component Way to create elementsReact.createelement (Jsxcreateel,NULL), document.getElementById (' Example4 ')); </script> <div id= "example5" ></div> <script type= "TEXT/JSX" >varHello=react.createclass ({//Template HelloRenderfunction(){ return(<span>{ This.props.data}</span>) }});varWorld=react.createclass ({//Template WorldRenderfunction(){ return(<span> and World template splicing </span>) }}); React.render (//2 template component ways to create an element<H1 classname= "classN5" > )); </script> </div><script src= "build/react.min.js" ></script><script src= "build/ Jsxtransformer.js "></script></body>View Code
React.js Getting Started notes 5 ways to create Hello World
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
