Reactjs Quick Start Tutorial (Elite) _javascript Tips

Now the most popular front-end framework is ANGULARJS, react, bootstrap and so on. Since the contact with the virtual Dom of Reactjs,reactjs and the development of the component has attracted me deeply, below come with me to enjoy the style of Reactjs ~ ~ Article a bit long, read patiently, you will have a great harvest oh ~

Introduction of Reactjs

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 websites to build Instagram. After doing so, found that this set of things very easy to use, in May 2013 open source. Because react's design idea is extremely unique, belongs to the revolutionary innovation, the performance is outstanding, the code logic is very simple. So, more and more people start to pay attention to and use, think it may be the future of WEB development mainstream tools.

REACTJS official website address: http://facebook.github.io/react/

GitHub Address: Https://github.com/facebook/react

Second, the understanding of Reactjs and the advantages of REACTJS

First of all, for react, there are some misunderstandings, here to sum up:

React is not a complete MVC framework, which can be thought of as the "V" in MVC, or even react does not quite approve of MVC development patterns;

React server-side render capability can only be regarded as an icing on the cake, not its core starting point, in fact, react the official site almost did not mention its application on the server side;

Some people take react and web Component in the same breath, but the two are not completely competitive relationship, you can use react to develop a real web Component;

React is not a new template language, JSX is just an appearance, no jsx react can work.

1, the background and principle of Reactjs

In web development, we always need to react to the changes in real time to the UI, and then we need to manipulate the DOM. Complex or frequent DOM operations are often the cause of performance bottlenecks (how high-performance, complex DOM operations are often an important indicator of the skills of a front-end developer). React introduced the virtual DOM mechanism: A set of DOM APIs was implemented with JavaScript at the browser end. When developing based on react, all DOM constructs are done through the virtual DOM, and whenever the data changes, react reconstructs the entire DOM tree, then react the current entire DOM tree against the previous DOM tree, resulting in a difference in the DOM structure. Then just make the actual browser Dom update for the part that needs to change. and react can batch process the virtual Dom refresh, the two data changes in an event loop are merged, for example, if you change the content of the node from A to B in succession, and then from B to A,react, the UI is not changed, and if it is manually controlled, This logic is often extremely complex. Although it is necessary to construct a complete virtual DOM tree each time, because the virtual DOM is memory data, performance is extremely high, and the actual DOM is only the diff part of the operation, thus achieving performance-enhancing purposes. In this way, while ensuring performance, developers will no longer need to pay attention to how a particular data change is updated to one or more specific DOM elements, but only to care about how the entire interface is render in any given data state.

If you write a Web page of server-side render as you did in the 90 's, then you should know that the server side is going to send HTML to the browser based on the data render. If this is the case because a user's click needs to change a state text, it is also done by refreshing the entire page. The server side does not need to know which small piece of HTML has changed, but only to refresh the entire page based on the data. In other words, any changes to the UI are done by refreshing the whole. and react this development model in high-performance way to the front end, every little bit of interface updates, you can think of refreshing the entire page. As for how to make local updates to ensure performance, it is the react framework to complete.

Use the example of a chat application in the video of Facebook introducing react, when a new message comes along, the traditional development of ideas such as the above, your development process needs to know which data is coming, how to add new DOM nodes to the current DOM tree, and based on the react development ideas as shown below, You'll always need to be concerned about the overall data, how the UI changes between two of times, and then completely to the framework. As you can see, using react greatly reduces logical complexity, meaning that development is less difficult and there are fewer opportunities for bugs to be generated.

2. Modular

The virtual Dom (Virtual-dom) not only brings simple UI development logic, but also brings together the idea of component-based development, the so-called component, which is a packaged, self-contained UI widget. React recommends a component-like rethinking of the composition of the UI, defining each module that is relatively independent on the UI as a component, and then composing or nesting small components into large components that ultimately complete the construction of the overall UI. For example, Facebook's instagram.com whole site is developed using react, the entire page is a large component, which contains a large number of nested other components, you are interested to see the code behind it.

If the idea of MVC allows you to detach the view-data-controller, then the modular thinking is the separation between the UI functional modules. We look at the difference between MVC and component-based development ideas through a typical blog comment interface.

For the MVC development model, the developer defines the three as different classes and realizes the separation of performance, data, and control. Developers are more technical to split the UI, to achieve loose coupling.

For react, it's a completely new idea, with the developer separating the UI into different components from a functional point of view, with each component encapsulated separately.

In react, you organize and write your code according to the natural division of the interface module, and for the comment interface, the entire UI is a large component made up of widgets, each of which cares only for its own part of logic and is independent of each other.

React that a component should have the following characteristics:

(1) can be combined (composeable): One component is easy to use with other components, or nested within another component. If another component is created inside a component, the parent component has (own) the subcomponents it creates, through which a complex UI can be split into simple UI components;

(2) Reusable (REUSABLE): Each component is independently functional and can be used in multiple UI scenarios;

(3) maintainable (maintainable): Each small component contains only its own logic and is easier to understand and maintain;

Second, download Reactjs, write Hello,world

Reactjs download is very simple, in order to facilitate the download, here again give the download address http://facebook.github.io/react/downloads.html, after downloading, I see is a compression package. After decompression, we create a new HTML file, reference React.js and jsxtransformer.js these two JS files. HTML templates are as follows (JS path is changed to own):

<! DOCTYPE html>
 
 

Here you may wonder why the script type is TEXT/JSX, because react's unique JSX syntax is incompatible with JavaScript. Wherever you use JSX, add type= "TEXT/JSX". Second, REACT provides two libraries: React.js and Jsxtransformer.js, which must be loaded first. Among them, the role of Jsxtransformer.js is to convert JSX syntax into JavaScript syntax. This step is very time-consuming, in fact, when the line, it should be put to the server complete.

Here we can start to write code, first of all, we first understand the Reactjs inside the React.render method:

React.render is the most basic method of react, which is used to convert a template into an HTML language and insert a specified DOM node.

Below we write the code in the script tag to output Hello,world, the code is as follows:

React.render (
     
 

It is important to note here that react does not rely on jquery, of course we can use jquery, but the second parameter in render must use the JavaScript native getElementById method and cannot use jquery to select the DOM node.

Then, in the browser to open this page, you can see the browser display a big Hello,world, because we use the

Here, congratulations, you have stepped into the door of Reactjs ~ ~ below, let us further study Reactjs bar ~ ~

Third, JSX grammar

HTML language written directly in the JavaScript language, without any quotes, this is the syntax of JSX, which allows the HTML and JavaScript to mix, understand ANGULARJS see the following code must feel very familiar with, we look at the code:

var names = [' Jack ', ' Tom ', ' Alice '];
   React.render (
    <div>
    {
     names.map (function (name) {return
      <div>hello, {name}!</div >
     })
    }
    </div>,
    document.getElementById (' container ')
   );

Here we declare a names array, then iterate over the front plus hello, output to DOM, and the output is as follows:

JSX allows JavaScript variables to be inserted directly in the template. If the variable is an array, all the members of the array are expanded, as follows:

var arr = [
     
 

The results appear as follows:

The asterisk here is just for logo use, we do not be fooled by her ~ ~

You see here, show that you are quite interested in react, congratulations, stick down, then below, we began to learn react inside the "Real kung Fu" ~ ~ Are you ready?

Four, Reactjs components

1. Component Properties

As I said earlier, Reactjs is based on component-based development, and here we begin to learn the components within Reactjs, react allow code to be encapsulated into components (component), and then insert this component into a Web page just like a normal HTML tag. The React.createclass method is used to generate a component class.

Next, we'll write the first component greet, with a name attribute, and then output the value of Hello + name, which is as follows:

var Greet = React.createclass ({
    render:function () {return
      
 

See this code, contact Angularjs friends are not a familiar feeling, but here are a few points to note:

1, get the value of the property is This.props. Property name

2. The first letter of the component name you create must be capitalized.

3, for elements to add CSS class, to use classname.

4, the component style property set Way is also noteworthy, to write STYLE={{WIDTH:THIS.STATE.WITDH}

2. Component Status

Components are unavoidable to interact with the user, one of the great innovations of react is to look at components as a state machine, start with an initial state, and then interact with the user, causing the state to change, triggering the rendering of the UI again. Let's write a small example, a text box and a button that can change the editing state of the text box by clicking the button, and prohibit editing and allowing editing. This example is used to understand the state mechanism of REACTJS. First look at the code:

var inputstate = React.createclass ({
    getinitialstate:function () {return
     {enable:false};
    },
    Handleclick:function (event) {
     this.setstate ({enable:!this.state.enable});
    },
    render:function () { Return
     (
      <p>
        <input type= "text" disabled={this.state.enable}/>
        <button onclick={ This.handleclick}>change state</button>
      </p>
    }
   );
   React.render (
    <inputstate/>,
    document.getElementById (' container ')
   );

Here, we also use a method getinitialstate, which executes when the component is initialized, and must return null or an object. Here we can access the property value through the This.state. Property name, where we will enable this value to be bound to the input disabled, and use the SetState method when you want to modify this property value. We declare the Handleclick method to bind to the button above to implement the change of state.enable value. The effect is as follows:

Principle Analysis:

When the user clicks on the component, causing the state to change, the This.setstate method modifies the status value, automatically calls the This.render method, and renders the component again after each modification.

Here are some noteworthy points:

1, the Getinitialstate function must have a return value, can be null or an object.

2, the way to access the state is This.state. Property name.

3, the variable with {} package, do not need to add double quotes.

3, the life cycle of components　

The life cycle of a component is divided into three states:

Mounting: The real DOM has been inserted

Updating: is being rendered again

Unmounting: The real DOM has been moved

REACT provides two processing functions for each State, the will function is invoked before entering the state, the DID function is invoked after the entry state, and three states total five processing functions.

Componentwillmount ()
componentdidmount ()
componentwillupdate (Object Nextprops, Object nextstate)
Componentdidupdate (Object Prevprops, Object prevstate)
Componentwillunmount ()

In addition, react also provides two special state processing functions.

Componentwillreceiveprops (Object Nextprops): Called when a loaded component receives a new parameter
Shouldcomponentupdate (Object Nextprops, Object Nextstate): component determines whether to be called when rendering

Here's an example:

 var Hello = React.createclass ({
    getinitialstate:function () {return
     {
      opacity:1.0
     };
    },
    Componentdidmount:function () {
     This.timer = setinterval (function () {
      var opacity = this.state.opacity;
      Opacity-=;
      if (Opacity < 0.1) {
       opacity = 1.0;
      }
      This.setstate ({
       opacity:opacity
      });
     Bind (this), M)
    ,
    render:function () {return
     (
      <div Style={{opacity:this.state.opacity}}} >
       Hello {this.props.name}
      </div>
     ;}
   });
   React.render (
     
 

The code above, after the Hello component is loaded, sets a timer through the Componentdidmount method, resets the transparency of the component every 100 milliseconds, causing the rendering to be rendered again.

4, the component nesting

React is based on component-based development, so what is the greatest advantage of component-based development? There's no question, of course, of reuse, so let's look at how the react is implemented, and here we'll write an example of the following code:

var Search = React.createclass ({
    render:function () {return
     (
      <div>
        {this.props.searchType}: <input type= "text"/>
        <button>Search</button>
      </div>
     );
    }
   );
   var Page = React.createclass ({
    render:function () {return
     (
      <div>
         
 

Here we created a search component, and then we created a page component, and then we called the search component in the page component and called it two times, where we passed the value through the attribute SearchType, which eventually showed the result as shown:

V. Summary of REACTJS

About Reactjs today to learn to here, the following to sum up, mainly has the following points:

1, Reactjs is based on the development of components, so eventually your page should be composed of a number of small components of large components.

2, you can pass the value of the attribute to the component, the same can also through the properties of the internal results passed to the parent component (for everyone to study); To do DOM operations on changes to certain values, put these values in the state.

3. When adding an external CSS style to a component, the class name should be written as classname instead of class; When you add an inner style, it should be style={{opacity:this.state.opacity} instead of style= "opacity:{ This.state.opacity}; ".

4. The first letter of the component name must be capitalized.

5, the variable name is wrapped in {}, and cannot add double quotes.

The above is a small set to introduce the Reactjs QuickStart tutorial (Elite version), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!