安装运行启动项目

    npx create-react-app 项目名称

    cd 项目名称

    npm start

npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。npx临时安装create-react-app,并使用该模块创建项目my-app,创建之后删除安装包

在React中定义组件的注意事项

1、react核心包中的Component是组件的父类，用来定义组件
2、组件名要大写
3、 render 方法必须要返回一个 JSX 元素，在 JSX 当中你可以插入 JavaScript 的表达式，表达式返回的结果会相应地渲染到页面上。
4、return 只返回一行，不加（），如果多行，需要加()
5、组件要导出
6，使用类组件时需引入：

import React, { Component, Fragment } from 'react'

JSX语法的注意事项

1. 组件中只有一个根元素
2. 可以用Fragment做包裹元素，它不会被渲染为一个真实节点
3. 标签在js中直接写，不用做为字符串加"",js语法的部分要在{}中定义
4. class属性用className替代, label标签的for属性用htmlFor替代
5. jsx中不能用if语句，用三元运算来替代
6. const str = "<em>111</em>" ------ 与import './App.css';同级写入

//直接渲染，不解析标签   
<p>{str}</p>
// 解析标签
<p dangerouslySetInnerHTML={{__html: str}}></p>

7. 获取标签上的自定义属性,用e.target.dataset.index获取

 <button onClick={this.getDataId} data-index="3">获取数据</button>

 getDataId(e){
    console.log(e.target.dataset.index)
  }

获取input的check属性,用e.target.checked获取

 <div>全选： <input type="checkbox" checked={true} onChange={this.handlerChange}></input></div>

handlerChange(e){
    console.log(e.target.checked);
  }

8. JSX会自动解析数组，渲染数组中的每个元素值

react核心模块用来解析JSX语法

const list = ['a','b']
...
    list.map((item,index) => {
        return <li key={index}>{item}</li>
    })

定义类组件（有状态组件）

组件名要大写

    import React, {Component} from 'react'
    
    class 组件名 extends Component{
        constructor(){
            super()
            this.state = {
                inputValue: '',
                list: []
            }
        }
        //自定义的方法
        handlerChange(){}
        handerClick(){}

        //render函数
        render(){
            return (
                <div></div>
            )
        }

    }

定义函数组件（无状态组件）

function 组件名() {
  return (
     <Fragment>
            <div className={ 6 > 3 ? 'red': 'blue'}>
            </div>
        </Fragment>
  );
}

课堂实例

import React, { Component, Fragment } from 'react'
import './App.css';
let arr = ['<h1>hello</h1>', '<em>world</em>']

const styleObj = {
  color: "red",
  fontSize: "30px"
}
class App extends Component {
  render() {
    return (
      // Fragment可以做为一个包裹元素，不会渲染成一个真实的节点
      <Fragment>
        <div>1111111 {6 > 3 ? "red" : "blue"} </div>
        <div className={6 > 7 ? "bk1" : "bk2"}>22222</div>
        <div className="searchBox">
          <label htmlFor="user"> 用户名
              <input type="text" id="user"></input>
          </label>
        </div>
        { 6 < 8
          ?
          <div>前端开发工程师</div>
          :
          <div>全栈工程师</div>
        }
        {/* 内联样式 */}
        <div style={styleObj}>内联样式</div>
        <ul>
          {
            // map执行之后的返回值： ["<li><h1>hello</h1></li>","<li><em>world</em></li>"]
            // dangerouslySetInnerHTML解析html标签
            //在遍历时要添加key值
            arr.map((item,index) => {
              // 解析标签
              // return <li dangerouslySetInnerHTML={{__html:item}} key={index}></li>
              // 直接渲染，不解析标签
              return <li>{item}</li>
            })
          }
        </ul>
      </Fragment>
    )
  }
}
export default App;