React基础_ZHOU125disorder_

React开发环境准备

1. 下载安装node.js
2. 安装create react app

npm install -g create-react-app				//安装create-react-app

create-react-app my-appname（cnpm init react-app my-app(使用这个)）					//创建一个create-react-app的react的项目

cd todolist									//到达todolist的文件下面
yarn start									//打开

yarn安装
cnpm
npm init react-app my-app		//初始项目
git clone						//git项目保存到本地

3. 由于npm太过于卡顿(外国的东西)

安装cnpm
npm install -g cnpm -registry=https://registry.npm.taobao.org

没package.json文件
npm init			//解决package.json没有的问题

cnpm install		//安装各种依赖项

npm run start		//运行项目

npm start			//运行项目

使用React编写todolist

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

class TodoList extends Component {
	render(){
		return(
			<Fragment>
				<div>todolist</div>
			</Fragment>
		)
	}
}

export default TodoList;

//return函数整体被包含在一个大的元素之中
//在Jsx语法中可以使用Fragment代替最外层包裹的元素这样最外层的元素就不会显示

React中的组件

• index.js是整个程序的运行入口

import App from './App';	//加载一个App的文件

• 最基础的react组件定义

import React, { Component } from 'react';

class Home extends Component {
	render() {
		//jsx语法
		return <div>OK了，缺失powershell,ZHOU125disorder</div>;
	}
}

export default Home;		//export default 语法导出;

• 等价写法

import { Component } from 'react';
//等价于
import React from 'react'
const Component = React.Component

• ReactDOM.render

ReactDOM.render(
	// <React.StrictMode>
	<Fragment>
		<GlobalStyle />
		<App />
	</Fragment>,
	// </React.StrictMode>,
	document.getElementById('root')
);

//把组件挂载到id==root的节点下;
//在项目中使用了jsx语法要引入react	import React from 'react';

React中的响应式设计思想和事件绑定

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

class TodoList extends Component {

	constructor(props){
		super(props);	//调用父类的构造函数

		//定义数据React中定义数据要定义在状态里面
		this.state = {
			inputValue:'',	//input框的值
			list:[]			//列表中的每一项
		}
	}
	//constructor构造函数 是最先执行的函数
  //.bind(this)改变this指向
	render(){
		return(
      <Fragment>
        <label htmlFor="insertArea">请输入</label>
        <input id="insertArea"
          className="input"
          value={this.state.inputValue} onChange={this.headleInputChange.bind(this)} /><button onClick={this.headlnBtnClick.bind(this)}>todolist</button>
        		<ul>
              {
            this.state.list.map((item, index) => {
                  {/*
                    这是注释
                  */}
                  return <li
                    key={index}
                    onClick={this.headlnLiDeleat.bind(this, index)}
                    dangerouslySetInnerHTML={{__html:item}}
                  >
                  </li>    //key={index}解决警告的问题
                })
              }
        		</ul>
			</Fragment>
		)
  }
  headleInputChange(e) {
    // console.log(e);     //e为event对象也可以写成event
    // console.log(e.target);  //e.targen为DOM节点即input元素
    // console.log(e.target.value);

    // this.state.inputValue = e.target.value;  此法不行
    this.setState({
      inputValue: e.target.value
    });
  }
  //使用setState函数方法改变

  headlnBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ""
    });
  }

  headlnLiDeleat(index) {
    // immutable
    //state不允许我们做出任何改变
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list
    });
  }

}


export default TodoList;

拆分组件与组件之间的传值

import React, { Component } from 'react';

class Totoitem extends Component{
  constructor(props) {
    super(props);
    this.headlnonclickdel = this.headlnonclickdel.bind(this);
  }
  render() {
    return <div onClick={this.headlnonclickdel}>{this.props.content}</div>
  }
  headlnonclickdel() {
    this.props.del(this.props.index);
}
}

export default Totoitem;

import React, { Component, Fragment } from 'react';
import Todoitem from './Todoitem';
import './TodoList.css'
class TodoList extends Component{
  constructor(props) {
    super(props);

    this.state={
      Inputvalue: '',
      list:[],
    }
  }
  render() {
    return (
      <Fragment>
        <label htmlFor="value">请输入:</label>
        <input className="input"id="value" value={this.state.Inputvalue}
        onChange={this.headlnchangeinput.bind(this)}
        />
        <button onClick={this.headlnclickbutton.bind(this)}>提交</button>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <Todoitem content={item} index={index} del={ this.headlnclickdel.bind(this)}/>
            {/*
              <li key={index} onClick={this.headlnclickdel.bind(this, index)}
                dangerouslySetInnerHTML={{ __html: item }}
              ></li>
            */}
            })
          }
        </ul>
      </Fragment>
    )
  }

  headlnchangeinput(e) {
    this.setState({
      Inputvalue: e.target.value,
    });
  }

  headlnclickbutton() {
    this.setState({
      list: [...this.state.list, this.state.Inputvalue],
      Inputvalue: "",
    });
  }

  headlnclickdel(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list:list,
    });
  }

}

export default TodoList;