React Study and introduction

Source: Internet
Author: User

Brief introduction:

React is a JS library developed by Facebook

What problems did react solve?

1), first of all, the previous MVC pattern flaw, when the code base is huge, MVC is very complex, each add new function, the complexity of the project is the growth of geometric times, resulting in poor maintenance of code, so MVC is not suitable for too large front-end applications.

2) Possible bidirectional data flow between model and view

What are the characteristics of react?

1) Simple

2) Declarative

In addition to the React official web site (, you can also learn to have these features:

1) React is not an MVC framework

2) React do not use templates

3) responsive updates are simple

4) HTML is just a start

Main principles of react

1) Virtual DOM dummy DOM

2) components

3) state and Render

Just Demo:

<! DOCTYPE html>"Http://"></script> <script src="Http://"></script> "Example"></div> <script type="TEXT/JSX">React.render (, document.getElementById ('Example')      ); </script> </body>View Code

Just Demo:

"Http://"></script> <script src="Http://"></script> <script src="Http://"></script> <script src="Http://"></script> <style>#content {width:800px; Margin:0Auto;            padding:5px 10px; Background-color: #eee; }. Commentbox h1{background-color: #bbb;            }. commentlist{border:1px solid yellow;        padding:10px;            }. commentlist. comment{border:1px solid #bbb; Padding-left:10px; Margin-bottom:10px; }. commentlist. commentauthor{Font-size:20px; }. commentform{margin-top:20px;            border:1px solid red;        padding:10px; }. Commentform textarea{width: -%;            height:50px; margin:10px010px 2px; }        </style> "content"></div> <script type="TEXT/JSX">varStaticdata =[{Author:"Zhang Fei", Text:"I'm writing a review! "}, {author:"Guan Yu", Text:"2 goods, all know what you are writing is a comment. "}, {author:"Liu Bei", Text:"Hey, why are you so mad with these two? "}        ]; varconverter =NewShowdown.converter ();//markdown        /** Component structure: <CommentBox> <CommentList> <comment/> </CommentList> <commentform/> </CommentBox>*/        //Comment Content Component        varComment =React.createclass ({render:function () {varRawmarkup = converter.makehtml ( This. props.children.toString ()); return (                    <div classname="Comment"> 

"Commentauthor"> { This.}: ); } }); //Comment List Component varCommentlist =React.createclass ({render:function () {varCommentnodes = This. (function (comment) {return ( <comment author={}>{Comment.text}</Comment> ); }); return ( <div classname="commentlist">{commentnodes}</div> ); } }); //Comment Form Components varCommentform =React.createclass ({handlesubmit:function (e) {e.preventdefault (); varAuthor = This. (). Value.trim (); varText = This. Refs.text.getDOMNode (). Value.trim (); if(!author | |!text) { return; } This. Props.oncommentsubmit ({author:author, text:text}); This. (). Value ="'; This. Refs.text.getDOMNode (). Value ="'; return; }, Render:function () {return ( <form classname="Commentform"onsubmit={ This.handlesubmit}> <input type="text"Placeholder="Your name" ref="author"/><br/> <textarea type="text"Placeholder="Say something ..." ref="text"></textarea><br/> <input type="Submit"Value="Post"/> </form> ); } }); //Comment Block Component varCommentbox =React.createclass ({loadcommentsfromserver:function () { This. SetState ({data:staticdata}); /*For convenience, this is not the end of the service, you can try $.ajax ({url:this.props.url + "? _t=" + New Da Te (). ValueOf (), DataType: ' JSON ', success:function (data) {T His.setstate ({data:data}); }.bind (This), Error:function (XHR, status, Err) {Console.error (This.props.url, Status, Err.tostring ()); }.bind (This)}); */}, Handlecommentsubmit:function (comment) {//Todo:submit to the server and refresh the list varComments = This.; varNewcomments =Comments.concat ([comment]); //and there's no back-end submission.Staticdata =newcomments; This. SetState ({data:newcomments}); }, //initializes the equivalent of a constructor functiongetinitialstate:function () {return{data: []}; }, //run when component is addedcomponentdidmount:function () { This. Loadcommentsfromserver (); This. Interval = SetInterval ( This. Loadcommentsfromserver, This. Props.pollinterval); }, //run when component is deletedcomponentwillunmount:function () {clearinterval ( This. Interval); }, //call SetState or parent component to re-render different propsrender:function () {return ( <div classname="Commentbox">}/> <commentform oncommentsubmit={ This. handlecommentsubmit}/> </div> ); } }); //The current directory requires a Comments.json file//this defines the properties, such as URLs, PollInterval, contained in the props propertyReact.render (<commentbox url="Comments.json"Pollinterval=" -"/>, document.getElementById ("content") ); </script> </body>View Code

Compared with some other JS frameworks, react, such as backbone, angular and so on.

1) React is not an MVC, it is a Web component that builds easy, repeatable calls, focusing on the UI, which is the view layer

2) React is one-way rendering from data to view, non-bidirectional data binding

3) Instead of manipulating DOM objects directly, the virtual DOM uses the diff algorithm to act on the real DOM with minimal steps.

4) It is inconvenient to manipulate the DOM directly, and most of the time it is just programming the virtual DOM




React Study and introduction

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.