React Tutorial


React Tutorial

2-16100309252M91.JPG

React is a JAVASCRIPT library for building user interfaces.

React is mainly used to build UI. Many people think that React is the V (view) in MVC.

React originated as an internal project at Facebook to build the Instagram website and was open sourced in May 2013.

React has high performance and very simple code logic. More and more people have begun to pay attention to and use it.

React Features

  • 1. Declarative Design −React adopts a declarative paradigm, which can easily describe applications.

  • 2. Efficiency -React minimizes interaction with the DOM by simulating the DOM.

  • 3. Flexible −React works well with known libraries or frameworks.

  • 4.JSX − JSX is an extension of JavaScript syntax. JSX is not required for React development, but it is recommended.

  • 5. Component − Building components through React makes it easier to reuse code and can be well applied in the development of large projects.

  • 6. One-way response data flow − React implements one-way response data flow, thereby reducing repeated code, which is why it is better than traditional data flow Binding is simpler.

What you need to know before reading this tutorial:

Before you start learning React, you need to have the following basic knowledge:

  • HTML5

  • CSS

  • JavaScript

React First Example

In each chapter, you can edit the example online and click the button to view the result.

This tutorial uses React version 0.14.7. You can download the latest version from the official website http://facebook.github.io/react/.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance