一、搭建项目

1. 安装脚手架工具 （单文件组件项目生成工具）（只需要安装一次）

npm install -g create-react-app   /  cnpm install -g create-react-app

2. 创建项目

找到项目要创建的目录
D:\wamp\www\react\study\reactdemo

create-react-app reactdemo

3. 一些基础知识

import React, { Component } from 'react';
import '../assets/css/one.css'

// 1、所有的模板要被一个根节点包含起来

// 2、模板元素不要加引号

// 3、{}绑定数据       
 
// 4、绑定属性注意：
            
//       class 要变成 className   

//       for 要变成  htmlFor

//       style属性和以前的写法有些不一样
    
//          <div style={{'color':'blue'}}>{this.state.title}</div>


//                 <div style={{'color':this.state.color}}>{this.state.title}</div>


class One extends Component{
    // 数据
    constructor(){
      super() // 继承Component

      // react 定义数据
      this.person={
        name: '张三',
        title: 'i am title',
        fontColor: 'font-red',
        fontStyle: {
          color: 'yellow',
          fontSize: '40px'
        }
      }
    }

    render(){
      return (
        <div>
          <hr/>
          <p>我是p标签</p>
          <p>我是p标签</p>
          one组件
          <p>react 组件里面的所有节点要被根节点包含</p>
          <p>{this.person.name}</p>
          <div title={this.person.title}>i am div</div>

          <div className='font-red'>我是红色的DIV</div>
          <div className={this.person.fontColor}>我是红色的DIV 111</div>

          <label htmlFor='name'>姓名：</label>
          <input id='name'></input>

          <div style={{'marginTop': '30px'}}>我是行内样式</div>
          <div style={this.person.fontStyle}>我是行内样式</div>
                    
        </div>
      )
    }
}

export default One;

4. 表单、数据 事件

import React, { Component } from 'react';

class FourEventrefdata extends Component{
    // 数据
  constructor(){
    super() // 继承Component

    // react 定义数据
    this.state={
      name: '我是FourEventrefdata组件',
      inputValue: 'inputValue'
    }

  }

  run=(event)=>{
    console.log(event)
    alert(event.target) /*获取执行事件的dom节点*/
    event.target.style.background='red'

    // 获取dom属性
    alert(event.target.getAttribute('gem'))
  }

  inputChange=(e)=>{
    console.log(e.target.value)
    this.setState({
      inputValue: e.target.value
    })
  }
  getInputValue=()=>{
    alert(this.state.inputValue)
  }
  getInputValue2=()=>{
    alert(this.refs.inputDom.value)
  }

  gemKeyUp=(e)=>{
    alert(e.keyCode)
  }

  render(){
    return (
      <div>
        <hr/>
        <h1>{this.state.name}</h1>
        <p>05 React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定</p>
        
        <p>表单事件</p>
        {/* 05--1 事件对象： 在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件有关的信息*/}
        <button gem='123' onClick={this.run}>click事件</button>
        <br/><br/><br/>

        {/* 05--2 表单事件 获取表单的值:
          1. 监听表单的改变事件
          2. 把表单输入的值赋予给inputValue 
          3. 点击按钮的时候获取state里面的inputValue
        */}
        <p>表单事件</p>
        <input onChange={this.inputChange}/><button onClick={this.getInputValue}>获取input的值</button>
        <p>{this.state.inputValue}</p>

        {/* 05--2 表单事件 获取表单的值:
          1. ref 获取值
          2. 把表单输入的值赋予给inputValue 
          3. 点击按钮的时候获取state里面的inputValue
        */}
        <input ref="inputDom"/><button onClick={this.getInputValue2}>获取input的值</button>
        <br/>
        <p>键盘事件</p>
        {/* 05--3 键盘事件 */}
        <input onKeyUp={this.gemKeyUp}></input>

        <br/><br/><br/><br/>
      </div>
    )
  }
}

export default FourEventrefdata;

5. 双向数据绑定

import React, { Component } from 'react';

class FiveTwowayDataBind extends Component{
    // 数据
    constructor(){
      super() // 继承Component

      // react 定义数据
      this.state={
        name: '双向数据绑定',
        age: 18
      }
    }
    inputChange=(e)=>{
      this.setState({
        age: e.target.value
      })
    }
    setGemAge=(e)=>{
      this.setState({
        age: 12
      })
    }
    render(){
      return (
        <div>
          <h1>{this.state.name}</h1>
          {/*数据双向邦定: model 改变影响view view改变影响model*/}
          <input value={this.state.age} onChange={this.inputChange}/>
          <input defaultValue={this.state.age}/>
          <p>{this.state.age}</p>
          <button onClick={this.setGemAge}>改变age的值</button>
          <br/><br/><br/><br/>       
        </div>
      )
    }
}

export default FiveTwowayDataBind;

6.

import React, { Component } from 'react';

class SixFormDetail extends Component{
    // 数据
    constructor(){
      super() // 继承Component

      // react 定义数据
      this.state={
        name: 'react表单详解',
        age: 18,
        sex: '1',
        realCity: '广州',
        citys: ['北京', '广州'],
        hobby: [
          {
            'title': '运动',
            'checked': true
          },
          {
            'title': '购物',
            'checked': true
          }
        ],
        info: 'i love guangzhou'
      }
    }

    handleAge=(e)=>{
      this.setState({
        age: e.target.value
      })
    }
    handleSubmit=(e)=>{
      // 阻止submit提交事件
      e.preventDefault()
      // alert(this.state.age + this.state.sex + 'realCity:' + this.state.realCity + '爱好' + this.state.hobby + this.state.info)
      console.log(this.state.hobby)
    }

    handleSex=(e)=>{
      this.setState({
        sex: e.target.value
      })
    }

    handleCity=(e)=>{
      this.setState({
        realCity: e.target.value
      })
    }

    handleHobby=(key)=>{
      let realHobby = this.state.hobby
      realHobby[key].checked = !realHobby[key].checked
      this.setState({
        hobby: realHobby
      })
    }

    handleInfo=(e)=>{
      this.setState({
        info: e.target.value
      })
    }

    render(){
      return (
        <div>
          <h1>{this.state.name}</h1>
          <form onSubmit={this.handleSubmit}>
            用户名：<input type='text' value={this.state.age} onChange={this.handleAge}/><br/><br/>
            
            {/* 监听表单事件，必须监听onChange事件 */}
            男<input type='radio' value="1" checked={this.state.sex==='1'} onChange={this.handleSex}/>
            女<input type='radio' value="2" checked={this.state.sex==="2"} onChange={this.handleSex}/><br/><br/>

            居住城市：
            <select value={this.state.realCity} onChange={this.handleCity}>
              {
                this.state.citys.map((item, key)=>{
                  return <option key={key}>{item}</option>
                })
              }
            </select><br/><br/>

            爱好： 
            {
              this.state.hobby.map((item, key)=>{
                return(
                  <span key={key}>
                    <input type="checkbox" checked={item.checked} onChange={this.handleHobby.bind(this,key)}/>{item.title}
                  </span>
                )
              })
            }

            个人签名：
            <textarea value={this.state.info} onChange={this.handleInfo}/>
            <input type='submit' defaultValue="提交"/><br/>
          </form>
          <br/><br/><br/><br/>       
        </div>
      )
    }
}

export default SixFormDetail;

## 第17节：React高级-PropTypes校验传递值

import React, { Component } from 'react';
import PropTypes from 'prop-types'

class SevenProTypes  extends Component {
  state = {  }
  render() { 
    return ( 
      <div onClick={this.handleClick}>
        {this.props.content}
      </div>
     );
  }
  handleClick=() => {
    this.props.deleteItem(this.props.index)
  }
}

SevenProTypes.propTypes={
  content: PropTypes.string,
  deleteItem: PropTypes.func,
  index: PropTypes.number
}
 
export default SevenProTypes;