React 安装

1. React环境准备
   React 开发环境搭建：安装node.js，安装cnpm/npm、yarn cnpm install -g yarn 或者 npm install –g yarn
   创建React 开发环境 ：安装脚手架cnpm install -g create-react-app 或者 npm install –g create-react-app 、创建项目 create-react-app reactdemo
2. 文件配置
   src开发文件 src>component
   public静态资源目录
3. 声明组件

• React 创建组件

import React, { Component } from 'react';
import './Home.css'
//组件的类声明  继承
class Home extends Component{
    render(){  //view
        return <div>我是组件</div>;  //只能有一个父div
    }
}
//组件暴露
export default Home;

• React 组件挂载到app

import React, { Component } from 'react';
//组件的引入
import Home from './components/Home'
class App extends Component {
  render() {
    return (
      <div className="App">
        你好React
        <Home></Home>  //组件挂载
        <Cart/>
      </div>
    );
  }
}

export default App;

4. 组件内部声明数据

//组件的类声明
class Home extends Component{
    //声明类的构造函数
    constructor(){
        //类似于Java里面的继承
        super(props);
        //React 定义数据
        this.state={
            arr:[],
            classname:"username",
            btncolor:"red",
	        style:{
	              color:"red",
	              fontSize:"20px"
	            }
        }
    }
    render(){
        return (
            <div>
{/****数据的绑定 ****/} 	
				<p className={this.state.classname}>数据属性绑定</p>
				<div style={this.state.style}>绑定style属性</div>
                <ul> //数组循环绑定***key={key}
                   {this.state.arr.map(function (value,key){
                       return <li key={key}>{value}</li>
                   })}
                </ul>
          </div>
        );
    }
}
//组件暴露

5. htmlFor className defaultVaule