React 2 - 入门
参考: https://www.taniarascia.com/getting-started-with-react/
1. React is a JavaScript library,
2. React is NOT a framework ,
3. React is an open-source project created by Facebook,
4. React is used to build user interfaces (UI) on the front end
创建React 项目:
1. 安装最新版NodeJs
2. cmd 进入目标目录执行 npx create-react-app react-tutorial
有时运行上面的命令会报错:Could not install from "Files\nodejs\node_cache\_npx\11912" as it does not contain a package.json file
可以换个命名来创建项目:
npm install -g create-react-app
create-react-app react-test
运行React项目:
进入项目目录:cd react-test
启动项目:npm start
开发工具:
React DevTools for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
JSX: JavaScript +XML
- JSX is not mandatory for react
- JavaScript vs JSX
- CSS 类通过 className 添加 (因为class 是 JavaScript关键字 )
- JSX 中属性和函数名都是驼峰命名, 例如:onClick
- 自闭标签必须以斜线结束, 例如:<img/>
- JavaScript表达式(函数,变量,属性)能够在JSX中使用
组件
- class 组件:
创建一个新js文件,定义一个 class 组件 Table 并且export. 如下
在使用 class 组件的地方通过文件路径的方式引用进来,并通过 xml tag 的方式添加进显示。
- Simple 组件
不用继承 class, 是个 function, 如:
也是通过 tag 标签方式使用
- 组件总结
- Class 组件和 simple 组件可以混合着用,内嵌着用
- Class 组件必须要包含 render() 并且继承 component, 只能 return 一个主元素 (element)
Props
场景:从父 component 传数据到子 component
- 定义/获取数据源,并通过属性的方式传给子组件。 子组件属性名可以自行定义。
2. class 组件中通过 this.props 或者从父传来的对象
const { sourceData} = this.props 是从this.props 取出 sourceData对象, 等同于 const sourceData = this.props.sourceData.
3. simple 组件获得 props 方法如下:
props 名称可以修改,它是传入参数的父级。sourceData 是 组件在使用的地方传入的参数名称,需于传入地方保持一致。
map 遍历数据源并生成 JSX。
State
Prop 只能实现数据从父组件向子组件的单向传递,有时,我们需要从自组件中去修改或者触发修改数据。
- 父组件中定义state
- state 定义在 render 外
- 对象定义在 state 内
- 实际操作 state 对象不会起作用,必须用 this.setState(). filter 函数产生新的数组,但是却不会修改数组中实际对象
- 通过 props 将父组件定义的 对象和函数传递给子组件
- 子组件调用操作 state 的函数
表单数据提交
有时,我们不仅仅是需要在子组件中去删除或者修改父组件的数据对象,我们还需要将子组件的数据提交的父组件对象。
直接修改父组件传递过来的对象,是无法让父组件也获得修改的,我们需要通过传参函数,将子组件需要提交的数据,通过父组件的方法调用 this.setState() 来改变父组件数据
- 定义一个Form 的子组件,用来向父组件提交数据
import React, { Component } from 'react'
class Form extends Component {
constructor(props){
super(props)
this.initState={
name:'',
job:''
};
this.state=this.initState;
}
handleChange = event=>{
const { name, value } = event.target;
this.setState({
[name]: value,
})
};
submitForm = ()=>{
this.props.handleSubmit(this.state)
this.setState(this.initState)
}
render() {
const { name, job } = this.state;
return (
<div>
<label for="name">Name</label>
<input type="text" name="name" value={name} id="name" onChange={this.handleChange}/>
<label for="job">Job</label>
<input type="text" name="job" value={job} id="job" onChange={this.handleChange}/>
<button onClick={this.submitForm}>Submit</button>
</div>
)
}
}
export default Form
|
- 在父组件中定义一个接受子组件数据的函数
总结:
-
- 在 App 是父组件,Table 和 Form 都是子组件
- App 将state 内的 characters 对象传递给 Table 显示
- Form 将自己state 的对象传递给 app,并追加 App 中 state => characters 的值。因为App 把 State => characters 通过 props 方式传递给了 Table 组件显示,那么当 app 中 characters 发生变化时, Table 展示的 数据源也发生了变化。
从API 获取数据
- 创建一个api.js 组件
- 在 componentDigMount 函数中去获得api 数据,并放入 state
- 在 render 中使用 state 数据
发布
运行 npm run build , 就会在项目目录下产生一个 build 文件夹。打包好的站点就在 这个文件夹中。
可以通过iis 站点直接指定路径运行。