(一)本节知识点
- (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
