React Getting Started-----(jsx syntax, getting real DOM nodes in react)

1. JSX syntax

1 var names = [' Alice ', ' Emily ', ' Kate '];2         <!--The HTML language is written directly in the JavaScript language without any quotes, which is the syntax of JSX, which allows the HTML to be mixed with JavaScript -3 Reactdom.render (4           <Div>5           {6 Names.map (function (name) {7Return<Div>Hello, {name}!</Div>8             })9           }Ten           </Div>, One document.getElementById (' example ') A         ); -  - var arr =[ the             <H1>Hello world!</H1>, -               <H2>React is awesome</H2>, -         ] -         <!--JSX allows JavaScript variables to be inserted directly into the template. If the variable is an array, all the members of the array will be expanded - + var arrcomponent = React.createclass ({ - render:function () { +Return<Div> A {arr} at                 </Div> -             } -         }) - Reactdom.render ( -             <arrcomponent/>, - document.getElementById (' Continer ') in)

2. Get the real DOM node

var mycomponent = React.createclass ({handleclick:function (event) {THIS.REFS.MYTEXTINPUT.F OCUs () event.stoppropagation () Event.preventdefault ()}, Changeclick:                function (event) {Console.log (Event.target.value)}, Render:function () { Return (<Div>                        <!--to add a ref attribute to the virtual Dom -                        <!--you can then get the real DOM node through Reactdom.finddomnode (This.refs.tip) in the function . -                        <inputtype= "text"ref= "Mytextinput"OnChange={this.changeclick}/>                        <inputtype= "text"value= "Focus the text input"OnClick={this.handleclick}/>                    </Div>                )            }        })        <!--Reactdom.render is the most basic method of React for converting a template to an HTML language and inserting a specified DOM node.  -Reactdom.render (<MyComponent/>, document.getElementById (' Continer '))

React Getting Started-----(jsx syntax, getting real DOM nodes in react)