React入门(一)TodoList

(一)本节知识点

• (i) React脚手架的使用
• (ii) React第一个Demo---TodoList

(二) 本节内容开始

(1) React 脚手架的使用

使用之前请先安装Node,这里本文就不再介绍

(i) 安装脚手架

(1) 要是网络不好，请第一步安装淘宝镜像

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

(2)安装react脚手架

npx create-react-app 项目名称
cd 项目名称
npm start

npx 是 node里面的新出的一个命令，简单理解为他把多条语句合并为一个语句

这个时候react 应该就安装成功了。他会弹出启动页面

(ii) 文件路径概述

2.png

(1) node_modules文件夹就是安装的包依赖。无需过多做介绍
(2) public 这个就是公共文件夹。index.html就是最后要输出的文件。
manifest.json就是缓存依赖。他表示把一些数据存到缓存中。
这样用户访问的时候不用在继续访问数据
(3) 重点是src文件

 index.js 是文件的入口文件。它里面加载了入口信息。不能删除。
 剩下的App.css App.js 表示单独的组件。
 App.test.js表示单元测试模块的js
 serviceWorker.js 他是用来配合PWA 渐进式webapp应用的。意思就是用户第一次访问后，缓 存到本地，在打开也能看的到。

(4) 本节只是入门阶段所以许多文件需要不了。直接可以删除了。结果就保留了几个重要文件

2019-02-19_201804.png

(2)第一个Demo--TodoList

(i) 1. 继承: 首先在React中一上来必须要引入React,然后组件要继承React组件

import React, { Component, Fragment } from 'react'
class App extends Component {
  render(){
    return()
   }
}

上面的代码也可以改成

import React from 'react'
const Component = React.Component
class App extends Component {
  render(){
    return()
   }
}

(ii) 2. Html :render里面渲染的就是html代码 他利用的就是JSX语法 首先最外层必须要有包裹层，要是没有可以用fragment来代替例如

import React, { Component, Fragment } from 'react'
class App extends Component {
  render(){
    return(
         <Fragment>
           <p>今天不错</p>
     </Frament>
    )
   }
}

(iii) 数据:在React中他操做的是数据。所有的数据必须写在constuctor里面。

例如
(1) 绑定数据

import React, { Component, Fragment } from 'react'
class App extends Component {
   constructor(props) {
    super(props)  // 继承了这个父类的构造函数
    this.state = {
      value2: '请输入要输入的值',   // 这里才是数据
      list: []           //这里才是数据2
    }
  }
  render(){
    return(
         <Fragment>
           <p>今天不错</p>
     </Frament>
    )
   }
}

(2) 渲染数据 在 JSX语法里面{}表示JS表达式。

• 注释写在{}里面
• 数据 this.state.xxxx
• 有的时候需要HTML转义的可有用 dangerouslySetInnerHTML={{ __html: item }} 这样<h1>111</h1>他会直接渲染的
• 要是循环的时候必须加上key要不然会报错误。
• label 语句要是写for的时候必须加上htmlfor才行，要不然也报错

import React, { Component, Fragment } from 'react'
class App extends Component {
   constructor(props) {
    super(props)  // 继承了这个父类的构造函数
    this.state = {
      value2: '请输入要输入的值',   // 这里才是数据
      list: []           //这里才是数据2
    }
  }
  render(){
    return(
         <Fragment>
        {/*这就是注释*/}
       <input value={this.state.value2} onChange={this.change.bind(this)} />
              <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                key={index}
                onClick={this.deleteone.bind(this, index)}
                dangerouslySetInnerHTML={{ __html: item }}
              />
            )
          })}
        </ul>
      </Fragment>
    )
   }
}

(3) 改变数据的时候

• 在React里面改变数据最好不要在原数据上修改，应该是获取到一份数据里面的拷贝然后修给最后在赋值
  比如 修改数据用的是this.setState ({})只有他才能修改

 tijiao() {
    let list2 = [...this.state.list, this.state.value2]
    this.setState({
      list: list2,
      value2: ''
    })
  }

(iv)事件: 在JSX语法里面绑定事件

• 事件的后面on后面必须是大写，比如 onChange={this.change.bind(this)}
• this的改变，这里必须需要改变this指针的指向，否则获取不到值
• 事件要是想传值的话可以在this后面传值比如 {this.deleteone.bind(this, index)}

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

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value2: '请输入要输入的值',
      list: []
    }
  }
  render() {
    return (
      <Fragment>
        {/*这就是注释*/}
        <input value={this.state.value2} onChange={this.change.bind(this)} />
        <button onClick={this.tijiao.bind(this)}>提交</button>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                key={index}
                onClick={this.deleteone.bind(this, index)}
                dangerouslySetInnerHTML={{ __html: item }}
              />
            )
          })}
        </ul>
      </Fragment>
    )
  }
  change(e) {
    console.log(e.target.value)
    this.setState({
      value2: e.target.value
    })
  }
  tijiao() {
    let list2 = [...this.state.list, this.state.value2]
    this.setState({
      list: list2,
      value2: ''
    })
  }
  deleteone(index) {
    console.log(index)
    let list2 = [...this.state.list]
    list2.splice(index, 1)
    this.setState({
      list: list2
    })
  }
}

export default App