Home > Developer > Web Develop
Video Learning Address:
http://www.jtthink.com/course/play/575
Official address
HTTPS://facebook.github.io/react/
CDN Path
<!DOCTYPE HTML><HTML><MetaCharSet= ' Utf-8 '><Head> <title></title> <Scriptsrc= "Http://cdn.bootcss.com/react/15.0.0/react.min.js"></Script> <Scriptsrc= "Http://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></Script> <Scriptsrc= "Https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></Script></Head><Body></Body></HTML>
Demo 1
<DivID= "Example"></Div> <Scripttype= "Text/babel">Reactdom.render (<H1>Hello, World!</H1>,document.getElementById ('Example') ); </Script>
Demo 2 loop
<DivID= ' NavBar '></Div> </Body><Scripttype= "Text/babel">varNav_li=[<Li><a href='#'>Latest Movies</a></Li>,<Li><a href='#'>Latest Comments</a></Li> ]; Reactdom.render (<ul>{Nav_li}</Ul>,document.getElementById ('NavBar')) </Script></HTML><Scripttype= "Text/babel">varNav_li=['Latest Movies', 'Latest Comments']; Reactdom.render (<ul>{Nav_li.map (function(item) {return <Li><a href='#'>{Item}</a></Li>; }) } </Ul>,document.getElementById ('NavBar')) </Script>
Binding an event {anonymous function, function expression}
<script type= "Text/babel" >varAA =function() {alert ("123");}varnav_li=[' latest movie ', ' latest comments ']; Reactdom.render (<ul>{Nav_li.map (function(item) {return<li><a href= ' # ' onclick={function() {alert (' 123 ')}}>{item}</a></li>; return<li><a href= ' # ' onclick={aa}>{item}</a></li>; }) } </ul>, document.getElementById (' NavBar '))) </script>
In a formal environment, however, it is not compiled this way, but instead uses Nodejs + Babel + plugin to compile the react
Install nodejs:http://nodejs.cn/ with NPM install Babel:npm install Babel-cli-G installation react dedicated plugin: npm Install babel-plugin-transform-react-jsx
Compile with plugin:Babel--plugins transform-react-jsx src/myreact.js--out-file build/myreact.js
HTML to be compiled with:
<!DOCTYPE HTML><HTML><MetaCharSet= ' Utf-8 '><Head> <title></title> <Scriptsrc= "Http://cdn.bootcss.com/react/15.0.0/react.min.js"></Script> <Scriptsrc= "Http://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></Script> </Head><Body> <DivID= ' NavBar '></Div> <Scripttype= "Text/javascript"src= "Build/myreact.js"></Script></Body></HTML>
Src/myreact.js:
var function () { alert ("123");} var nav_li=[' latest movie ', ' latest comments ']; Reactdom.render ( <ul> { nav_li.map) (function(item) { return <li><a href= ' # ' onclick={aa}>{item}</a></li>; }) } </ul>, document.getElementById (' NavBar ')) Write components and internal events, prevent function renaming, and remember to compile with Nodejs + Babel + plugin plugin;
var Navli = React.createclass ({ function() {alert ("123")}, function() { return <ul> <li><a href= ' # ' onclick={this. MyFunc} > Latest Movies </a></li> <li><a href= ' # ' > latest comments </a></li> </ul> }}) Reactdom.render ( <navli/>, document.getElementById (' NavBar ')) Nested Components and properties
varNavli =React.createclass ({myFunc:function() {alert ("123")}, Render:function() { return<ul> <li><a href= ' # ' onclick={ This.myfunc}> Latest Movies </a></li> <li><a href= ' # ' > Latest Comments </a></li> <li><searchtext ABC = "Search"/></li> </ul> }})varSearchText =React.createclass ({render:function() { return<input type= "text" placeholder = "Please enter text" ClassName = { This. props.abc}/>}}) Reactdom.render (<navli/>, document.getElementById (' NavBar '))
Temporarily give up Angularjs study react
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
