[03] React in JSX grammar

jsx features:
A, jsx components can directly create, write directly html component
B, there is only one parent
C, was added when the class name, the class becomes className
D, label tag for attribute becomes htmlFor
E, expression {}, write variables
F, the cycle can be written directly inside {}, js is completely written in the form

jsxStudy.js

// introduced REACT 
Import React, {from} the Component 'REACT' ;
 // Create the component 
class JsxStudy extends Component {
    constructor(...props){
        super(...props)
        the this .str = 'a dream I do not know the age is old, who take a dim world. '
         The this .numbers = [10,20,30 ]
    }
    // there is only one parent and 
    the render () {
         return (
             <div> 
                { / * when adding a class name, the class becomes className * / }
                 <className = P "Active"> fluttering wind, snow distant. < / p>
                { / * Variable write inside {} * / }
                 <P> { the this .str} </ P>
                { / * Label tag for attribute becomes htmlFor * / }
                 <htmlFor label = "AAA"> point I can select </ label>
                <input type="checkbox" id="aaa"  />
                { / * Cycle can be written directly inside {}, written entirely in the form of js * / }
                 <UL>
                    {
                        this.numbers.map((val)=>{
                            return <li key={val}>{val}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
// export component 
Export default JsxStudy;

 

effect: