react起步

1 .安装 create-react-app

   npx create-reacta-app mjcapp（名字自定义）
   
   npm start

• 第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。
• 名字不要大写，mjcApp会报错

2 .JSX语法

// <App /> 就是一个普通的js组件对象
let app = <App />
let root = document.getElementById('root')

ReactDOM.render(app,root)

• react元素渲染 let h1=<h1> hellow World</h1>
  使用jsx可以创建js元素对象 ,注意：JSX 元素对象或者组件对象，必须只有1个根元素（根节点），相当于就是vue的template里只能有一个div

例如：

// 例子一
let h1 = <h1>我的小可爱  <span>对的</span>  </h1> // 正确的
let h1 =<h1>我的小可爱</h1><span> 错误的</span>   // 错误的
  
  // 例子二
  // 页面显示是时间
 function clock(){
      let time=new Date().toLocaleTimeString()
      let element=<h1>当前时间是{time}</h1>
      let root= document.getElementById('root')
      ReactDOM.render(element,root)
} 
clock()

为了好看，也为了换行看的舒服，一般都这样写

      let element= (
         <div>
              <h1>当前时间是{time} </h1>
              <h4>这是副标题</h4>
         </div>
     ) 

react函数式组件开发,返回的是一个元素

     function Clock(props){
            return (
             <div>
                 <h1>当前时间是{props.date.toLocaleTimeString()}</h1>
             </div>
           )
   } 
 function run (){
       ReactDOM.render(<Clock  data={new Date} />, document.getElementById('root'))
   }
run()