1. Dependent resources:<script type= "Text/javascript" src= '. /asset/react.js ' ></script> <script type= "text/javascript" src= ' ... /asset/react-dom.js ' ></script><script type= "Text/javascript" src= ". /asset/jsxtransformer.js ' ></script>//parsing TEXT/JSX syntax <script type= "text/javascript" src= ' ... /asset/browser.min.js ' ></script>//parsing Text/babel syntax
2. Basic wording:Html:<div id= ' demo1 ' ></div>js:reactdom.render (
3. Define the component style notation Createclass (!) Component name must be capitalized at the beginning of the letter)Html:<div id= ' Demo2 ' ></div>js:var demo2box=react.createclass ({render:function () {return ( <div classname= "Demo2box" > HELLO,I.M demo2 </div>); }}); Reactdom.render (<demo2box/>, document.getElementById (' Demo2 '));
4.react.createelement Use, parameters (
reactelement element, [object props], [children ...]
)Basic usage: react.createelement (' a ', {href: ' http://facebook.github.io/react/'}, ' Hello react! ') Html:<div id= ' Demo3 ' ></div>js:var demo3box=react.createclass ({render:function () {return ( React.createelement (' div ', {className: ' Demo3box '}, ' HELLO,I.M Demo3 ')}}); Reactdom.render (React.createelement (Demo3box,null), document.getElementById (' Demo3 '));
5. Refer to the notation of multiple components:Html:<div id= ' Demo4 ' ></div>js:var demo4list=react.createclass ({ render:function () { return ( <div classname= "demo4list" > &nbs P ' hello,i.m demo4list ' </div>   ; ); }), Var demo4form=react.createclass ({ render:function () { Return ( <div classname= "Demo4form" > &NBS P "HELLO,I.M demo4form" </div> &NBSP ; ); }), Var demo4box=react.createclass ({ render:function () { return ( <div classname= "Demo4box" > The
6.this.props[property name] Gets the properties of the component. (used to get parameters passed in outside or callback methods) Exception: This.props.children: Represents all child nodes of a component (! When there is no child node is undefined, if there is a child node, the data type is object, multiple nodes, the data type is an array. External data, internal traversal via props: var data = [ {id:1, Author: "Pete Hunt", text: "This is one comment"}, {id:2, author: "J Ordan Walke ", text:" This is *another* comment "}];var demo5box=react.createclass ({ render:function () { var commentnodes=this.props.data.map (function (comment) { &N Bsp Return ( <li Author={comment.author} key={comment.id}> {comment.text} &N Bsp </li> ); }); R Eturn ( <ul classname= "comment" > &N Bsp {commentnodes} </ul> ) }}); Reactdom.render ( <demo5box data={data}/>, document.getElementById (' Demo5 ')); Using Props.children and react.children:
the 7.this.state Property object can be changed. (e.g. user input, server request, time change, etc.)
Getinitialstate defines the initial variable, which can be read by the This.state property.
the This.setstate method is to modify the state value. Html:<div id= ' Demo6 ' ></div>js:var demo6box=react.createclass ({getinitialstate:function () {return {L} Iked:false}}, Handleclick:function () {this.setstate ({liked:!this.state.liked}); }, Render:function () {var text=this.state.liked? ' Like ': ' haven\ ' t liked '; Return (<p onclick={this.handleclick}> {text} This,click to toggle. </p>)}); Reactdom.render (<demo6box/>, document.getElementById (' Demo6 '));
8. The Proptypes property of the component, which verifies that the passed in parameters meet the requirements.
the Getdefaultprops method of the component used to set the default value of the component's incoming parameters. Html:<div id= ' Demo7 ' ></div>js:/*demo7*/var title= ' title '; var bool=true;var count=10;var Arr=[1,2,3];var Obj={' a ': 1};var callback=function () { console.log (' dddddd ');}; var content= "DSFSDFFDD"; var demo7box=react.createclass ({ proptypes:{ title: react.proptypes.string.isrequired, bool:react.proptypes.bool.isrequired, count:react.proptypes.number.isrequired, ARR: react.proptypes.array.isrequired, obj:react.proptypes.object, callback:react.proptypes.func.isrequired, content:react.proptypes.any.isrequired }, getdefaultprops:function () { return{ &N Bsp Contentdefault: ' Sdsfsfdsaafdsfds ' } }, render:function () { & nbsp REturn <div> <H2 >{this.props.title}
9.this.refs: Gets the node of the real DOM from the component. Html:<div id= ' Demo8 ' ></div>js:/*demo8*/var demo8box=react.createclass ({handleclick:function () {This . Refs.myInput.focus (); }, Render:function () {return (<div> <input type= ' text ' ref= ' myinput '/> <input type= ' button ' value= ' GetFocus ' Onclick={this.handleclick}/> </div>); }}); Reactdom.render (<demo8box/>, document.getElementById (' Demo8 '));
10. The process function of the component's life cycle. The lifecycle of a component is divided into three states: mounting: Inserted into the real DOM, Updating: Being re-rendered, unmounting: The real Dom has been moved out. React provides two processing functions for each State, the will function is called before it enters the state, and the DID function is called after it enters the state, with three states totaling five processing functions. Componentwillmount () Componentdidmount () componentwillupdate (object Nextprops, Object nextstate) componentdidupdate ( Object Prevprops, Object prevstate) Componentwillunmount () In addition, React provides two special state processing functions. Componentwillreceiveprops (Object Nextprops): Called when the loaded component receives a new parameter Shouldcomponentupdate (object Nextprops, Object nextstate ): Called when the component determines whether to render again. Html:<div id= ' demo9 ' ></div>js:/*demo9*/var demo9box=react.createclass ({ getInitialState: function () { return { num:100 &NBSP ; } }, componentdidmount:function () { var num=this.state.num; & nbsp This.timer=setinterval (function () { if (num<=0) { & nbsp This.setstatE ({num:100}) } else{ this.setstate ({num:num-1}) } &NB Sp }.bind (this), +) }, render:function () { return ( &NBSP ; <div> {this.state.num} &nbs P </div> ) }}); Reactdom.render ( <demo9box/>, document.getElementById (' demo9 '));
Reactjs Learning Note (i)
