The most recent front-end UI framework is react. Hurry up and find out the time.
Project Address: http://facebook.github.io/react/
Official introduction: A JavaScript library for building user interfaces (JS framework for front-end UI)
has three features:
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy-to-try it out on a small feature in an Existing project. (people typically use react to implement view in front-end MVC, because react doesn't assume that you're using other front-end technology stacks, so it's easy to try out existing projects.) )
React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React native. (using react we do not directly manipulate the dom,react in the browser introduced the concept of virtual DOM, we use JS code directly generated virtual DOM node, and then react is responsible for the virtual DOM node to the actual DOM node conversion, so that, Is that front-end UI programming is much simpler and better performance. )
React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data Binding. (React implements unidirectional data flow, which reduces the traditional data binding template file and is easier to understand)
In fact, my own understanding is: React is a front-end UI component of the framework, it can implement the various UI on the page as one component, we pass the data to the component, react is responsible for generating the corresponding UI, and then rendering. The implementation is virtual DOM and one-way data flow, the virtual DOM provides better performance, because a UI component contains multiple HTML tag elements, if we need to modify the data in several of these tags, the DOM will be manipulated several times (such as using Jquey), but using the virtual DOM, We first generate the entire UI component in memory and then render the virtual Dom transform to the actual dom at once, so that the actual DOM operates only once. One-way data flow is a two-way binding with no data, the data is transmitted only from model to view, and each update is made easier by replacing the old UI component on the page with a completely new UI component.
In fact, the biggest feature of react is that UI component and UI replacement are updated in a way that is better and simpler. Components are easy to maintain and easy to reuse.
Instance:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) ); </script> </body> </html>
The above code imports react's JS library react.js, and Jsxtransformer.js is the conversion library that converts the code type= "TEXT/JSX" on the page into Text/javascript code. The conversion can be done on the browser side, or it can be done using the NODEJS server. The actual project runs are converted on the server side. Let's look at the effect of the conversion on the browser side:
You can see that react has successfully rendered a UI component, but here's a hint that we should pre-compile JSX steps on the server.
Then we'll look at the server-side conversion precompilation Jsx method:
Install node. JS: Install files to https://nodejs.org/download the corresponding platform: node-v0.12.2-x86.msi
I am win7 64-bit, double-click the next step to complete the installation. Configure the system path, add D:\nodejs to path, new system variable: Node_path, Value: D:\nodejs\node_modules\
Installing REACT-TOOLS:NPM Install React-tools
Successful installation such as:
Before precompiling jsx Footstep, we extract it and put it in a separate file: Helloworld.js
React.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) );
Then call the Jsx footstep in React-tool to compile:
All the jsx footsteps in the Jsxfile folder under the current directory are compiled into the current result folder, and the compiled code is:
React.render( React.createElement("h1", null, "Hello, world!"), document.getElementById(‘example‘) );
React.createelement ("H1", null, "Hello, world!") represents the production of a H1 tag with the content "Hello, world!", then React.render (), Insert the H1 label rendering of the production into the document.getElementById (' Example ') node down. The contents of the final helloworld.html are:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="build/react.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
React.render(
React.createElement(‘h1‘, null, ‘Hello, world!‘),
document.getElementById(‘example‘) // $("#example")[0]
);
</script>
</body>
</html>
Note Here we remove the Jsxtransformer.js file and change the TEXT/JSX to Text/javascript. Of course we can also compile the production of JS into a separate file, and then use <script type= "text/javascript" src= "xxx" > introduced to the page.
The effect is:
Not to be continued ...
Facebook open source Front UI Framework react exploration
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
