Reactjs Introduction to Combat (i)----Hello World example

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.

Official website: http://facebook.github.io/react/

1. Environment construction

"General usage: three documents required. react.js core files, React-dom is to adapt to AMD, CMD and other packaging, Bebel is es6 and jsx translation . It's not necessary after the launch.

<! DOCTYPE html>"UTF-8"/> <title>hello react!</title> <script src="Build/react.js"></script> <script src="Build/react-dom.js"></script> <script src="Https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> "Example"></div> <scripttype="text/babel" >code .... </script> </body>
"" CommonJS mode browserify or Webpack
// Main.js var React = require ('React'); var Reactdom = require ('react-dom'); Reactdom.render (  ,  document.getElementById ('  Example'));
2. Hello, world example
Emphasis syntax: first create a component var Hello = React.createclass ({}); Within the component, render is defined and returned, using component rendering: Reactdom.render (,) two parameters, one is the component to render.
 <div id= example   " ></div> <script type="   Text/babel   > var  Hello =
     
       React.createclass ({render:function () {
      return  , document.getElementById (  '  
3. JSX component Single data-bound virtual DOM
The jsx:html language is written directly in the JavaScript language without any quotes, which is the JSX syntax that allows the HTML to be mixed with JavaScript. JSX Basic Syntax Rules: encountered HTML tags (to < begin with), with HTML rules parsing, encountered code blocks (to { begin with), with JavaScript rules parsing.
Component: React allows the code to be encapsulated as a component (component) and then inserted into a Web page like a normal HTML tag. The React.createclass method is used to generate a component class. The first letter of the component class must be capitalized, or it will be an error.
Virtual DOM: A set of DOM APIs implemented in JavaScript at the browser end. All DOM constructs are made based on the react, and each time the data changes, react reconstructs the entire DOM tree, then compares the current entire DOM tree with the previous DOM tree to get the difference between the DOM structure, Then only the parts that need to be changed are actually updated in the browser DOM. and react can batch process virtual DOM refreshes, and two data changes within an event loop will be merged.
"Single data binding: Different from MVC, similar to the writing of PHP and HTML mixes
Reactjs Introduction to Combat (i)----Hello World example