React Study and introduction

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 (http://facebook.github.io/react/blog/2013/06/05/why-react.html), 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://fb.me/react-0.12.1.js"></script> <script src="Http://fb.me/JSXTransformer-0.12.1.js"></script> "Example"></div> <script type="TEXT/JSX">React.render (, document.getElementById ('Example')      ); </script> </body>View Code
Just Demo:
"Http://fb.me/react-0.12.1.js"></script> <script src="Http://fb.me/JSXTransformer-0.12.1.js"></script> <script src="Http://code.jquery.com/jquery-1.10.0.min.js"></script> <script src="Http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></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. Props.author}:                );        }        }); //Comment List Component        varCommentlist =React.createclass ({render:function () {varCommentnodes = This. Props.data.map (function (comment) {return (                        <comment author={comment.author}>{Comment.text}</Comment>                    );                }); return (                    <div classname="commentlist">{commentnodes}</div>                );        }        }); //Comment Form Components        varCommentform =React.createclass ({handlesubmit:function (e) {e.preventdefault (); varAuthor = This. Refs.author.getDOMNode (). Value.trim (); varText = This. Refs.text.getDOMNode (). Value.trim (); if(!author | |!text) {                    return; }                 This. Props.oncommentsubmit ({author:author, text:text});  This. Refs.author.getDOMNode (). 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. State.data; 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">  This.state.data}/> <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
Reference:
Http://facebook.github.io/react/blog/2013/06/05/why-react.html
Https://github.com/facebook/react
React Study and introduction