1. Introduction to ReactJS
React is a very popular front-end development framework recently. React originated as an internal project at Facebook. Because the company was dissatisfied with all the JavaScript MVC frameworks on the market, it decided to write its own to build the Instagram website. After making it, I found that this set of things is very useful, so it was open sourced in May 2013. Because React's design idea is extremely unique, it is a revolutionary innovation, has outstanding performance, and the code logic is very simple. Therefore, more and more people are beginning to pay attention to and use it, thinking that it may be the mainstream tool for web development in the future.
ReactJS official 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
What is React?
React is a JS library developed by outstanding programmers working at Facebook for developing user interaction interfaces. Its source code is maintained by outstanding programmers from Facebook and the community, so there is a very strong technical team behind it to provide technical support. React brings many new things, such as componentization, JSX, virtual DOM, etc. The virtual DOM it provides allows us to render components very quickly, freeing us from the heavy work of frequently manipulating the DOM. Anyone who knows React knows that the work it does is more focused on the V layer in MVC. Combined with others such as Flux, you can easily build powerful applications.
2. Features of ReactJS
1. Virtual DOM
Through the DOM diff algorithm, only the differentiated parts will be updated. No need to Render the entire page to improve efficiency
2. Componentization
Divide the page into several components, which contain logical structures and styles
The component only contains its own logic, and it can be predicted when updating the component, which is conducive to maintenance
The page is split into multiple components and can be reused
3, one-way Data flow
Data is passed from the top-level component to the sub-component
Data is controllable
3. Getting started with React writing Hello, world First, let’s understand what JSX is. One of the core mechanisms of React is virtual DOM: virtual DOM elements that can be created in memory. React uses virtual DOM to reduce operations on the actual DOM and improve performance. Similar to the real native DOM, virtual DOM can also be created through JavaScript, for example:
var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var root2 = React.createElement('ul', { className: 'my-list' }, child1, child2); React.render( <div>{root2}</div>, document.getElementById('container5') );
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') );
The 1st way
<div id="example1"></div> <script type="text/jsx"> React.render( //直接html <h1 className="classN1" >1 hellow 直接 html world </h1>, document.getElementById('example1') ); </script>
<div id="example2"></div> <script type="text/jsx"> React.render( //直接创建元素 React.createElement('h1', {className:'classN2'}, '2 Hello, 直接创建元素 world!'), document.getElementById('example2') ); </script>
<div id="example3"></div> <script type="text/jsx"> var CreateEl=React.createClass({ render:function(){ // return <h1>hellow 组件 创建 html world </h1> //有无括号均可 return (<h1 className='classN3' >3 hellow 组件 创建 html world </h1>); } }); React.render( //组件方式创建元素 <CreateEl/>, //或者双括号 <CreateEl></CreateEl> document.getElementById('example3') ); </script>
<div id="example4"></div> <script type="text/jsx"> var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建 render:function(){ return ( React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ") ) } }); React.render( //组件方式创建元素 React.createElement(JsxCreateEl, null), document.getElementById('example4') ); </script>
<div id="example5"></div> <script type="text/jsx"> var Hello=React.createClass({ // 模板 Hello render:function(){ return (<span>{this.props.data}</span>) } }); var World=React.createClass({ // 模板 world render:function(){ return (<span> 和 World 模板拼接</span>) } }); React.render( // 2个 模板 组件方式创建元素 <h1 className="classN5" > <Hello data='5 hello' /> <World /> </h1>, document.getElementById('example5') ); </script>
Attach the code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /> </head> <body> <style> *{ margin:0; padding:0;} 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( //直接html <h1 className="classN1" >1 hellow 直接 html world </h1>, document.getElementById('example1') ); </script> <div id="example2"></div> <script type="text/jsx"> React.render( //直接创建元素 React.createElement('h1', {className:'classN2'}, '2 Hello, 直接创建元素 world!'), document.getElementById('example2') ); </script> <div id="example3"></div> <script type="text/jsx"> var CreateEl=React.createClass({ render:function(){ // return <h1>hellow 组件 创建 html world </h1> //有无括号均可 return (<h1 className='classN3' >3 hellow 组件 创建 html world </h1>); } }); React.render( //组件方式创建元素 <CreateEl/>, //或者双括号 <CreateEl></CreateEl> document.getElementById('example3') ); </script> <div id="example4"></div> <script type="text/jsx"> var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建 render:function(){ return ( React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ") ) } }); React.render( //组件方式创建元素 React.createElement(JsxCreateEl, null), document.getElementById('example4') ); </script> <div id="example5"></div> <script type="text/jsx"> var Hello=React.createClass({ // 模板 Hello render:function(){ return (<span>{this.props.data}</span>) } }); var World=React.createClass({ // 模板 world render:function(){ return (<span> 和 World 模板拼接</span>) } }); React.render( // 2个 模板 组件方式创建元素 <h1 className="classN5" > <Hello data='5 hello' /> <World /> </h1>, document.getElementById('example5') ); </script> </div> <script src="build/react.min.js"></script> <script src="build/JSXTransformer.js"></script> </body> </html>
JSX