Study on React

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Recently, Facebook its user interface construction of Javascript Library of React open.

As the name implies, of course, is that the library is the specific source code (JSX), to construct a new code(Javascript).

We think CSS is too much trouble, too much repeated work, so we use LESS to replace him, make machines we do these things. But for performance requirements, it is not popular to load a less.js let the dynamic processing of these LESS code, but to the LESS file to construct a static CSS file, and then use, like Bootstrap.

OK, Back to React, we found that the Javaascript template while generating dynamic what we wanted to, but the performance is not friendly, so we seek a method to construct a static, then use.

Of course, React not only do these, please let us know React.!


A simple example——Hello World

First, we click the link below to download the Starter Kit.

Download Starter Kit 0.3.1

Then create a HTML file helloworld.html in the root directory, type the following code:

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.min.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

What, what is this code, why to write?

/** @jsx React.DOM */
React.renderComponent(
  // What is this not a string, not a number, but not the variable parameters……WTF
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Because the script tag type


type="text/jsx"

So in fact, this code is not run……

The secret of the inside is the HTML references JSXTransformer.js and react.min.js. First of all, the JSXTransformer.js will all types of text/jsx script as string read out, then the code analysis, UI modules for react.min.js.

 Visible so efficiency of course is very low, but React provides another method, needless to say, is the local building code. Through the NPM we can install react-tools:

npm install -g react-tools

So we can use the react-tools watch command to monitor inventory changes and construction:

jsx --watch src/ build/

So the actual project on the code as it ought to be:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.min.js"></script>
    <!No need to JSXTransformer! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

 We have a look through the construction of helloworld.js into how:

/** @jsx React.DOM */
React.renderComponent(
  React.DOM.h1(null, 'Hello, world!'),
  document.getElementyById('example')
);

Here is a place worthy of study, is React at insertion of performance optimization on DOM. JavaScript Micro-Templating is generally use innerHTML insertion operation, but React is not the case, the static code is generated using the Document  into the Fragment method. There is a performance test, we can see the differences in performance of the two:

We can see the performance using Document Fragment is better than innerHTML as template, similar to Facebook solution, it has stronger requirement for performance.


What's next?

If you want to know more about React, please see the Starter Kit examples or view the official Internet cafes! 

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Jeff at November 17, 2013 - 4:19 PM