1. 脚手架创建项目
1.node -v
2.npm install -g create-react-app 安装脚手架
3.create-react-app my-react
4.cd my-react
5.npm start运行成功
2 查看目录
index js 入口文件
3.app.js 组件引入,写页面的地方
3.动态写入值
4.引入组件
1.创建cmponents,里面放需要的组件,同样用函数式组件
2.app.js中引入
非常简单,import引入,<Home/>调用即可
5.组件传值
app.js父组件
子组件
控制组件传值的类型,类型校验
7.组件插槽
8.函数组件和类组件
上面都是通过函数式组件来写的,那我们怎么把它变成类组件呢?
首先看一下他们两者的区别:
1.函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素。
2、函数组件没有生命周期和状态state，而类组件有。
为了扩展我们这个Home组件,我们现在把home组件变成类组件
写法改变:
「原来」
9.添加事件
1.为我们当前添加一个按钮, 现在用的是class所以我们使用面向对象,来做一个操作年龄➕的一个事件方法
10.引入state ,在页面上响应式改变值
11.子组件像父组件传值
举例子:将子组件的age传递给父组件
子组件:
12.组件间互相传值
比如 header 中的值是 兄弟组件中的 定义的
思路: header中的值是父组件传过去的
兄弟组件home把值传给父组件,父组件接收,再传给子组件header
子组件:header.js
13.数据双向绑定
input 框输入内容之后,外面的值也会相应改变
子组件:
14.hooks
react-hooks hooks称为钩子,钩子函数是一种编程的思想,我们称之为 面向切面编程
(AOP)
1.面向过程编程(一个函数的调用)
2.面向对象编程(以对象为基础(抽象,封装,继承,多态))
3.AOP 面向切面编程(vue.js react ,提供一种生命周期,这些函数就称之为钩子函数,钩子函数的作用就是为了扩充产品的能力,vue暴露钩子函数开放接口给用户,用户可以使用,然后去特定的执行)
4.面向接口编程(api编程),前后端分离的这种形式就是面向接口编程
5.函数式编程(数学的要求很高,要在前端走的很长远,其实是缺少不了的)
那么什么是react的hook呢?
在react中组件分为2大类,1个是函数式组件2.类组件(state,setState)
最大区别:类组件存在自己的状态,函数组件无状态
大家发现函数式组件写起来比较简洁,那么大家希望使用函数式组件编写出类组件
那么可以用函数式组件替代类组件吗?
可以 就使用hook
1.改变状态
React配置路由
----整体思路就是：就是在路由文件里配置路由，再将路由文件导入App.js,最后将App.js导入src下的index.js。
路由依赖：
cnpm install [email protected] --save（安装6.0以下版本，因为6.0以上版本某些属性已经被迭代）
3.新建两个页面
4.新建router文件夹和index.js文件，配置路由
--导入所需组件：
--导入路由：
--使用BrowserRouter包裹，在render中配置路由
7.使用
使用Bootstrap搭建页面，Bootstrap配置攻略移步http://t.csdn.cn/6ayKf
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default class login extends Component {
submin() {
this.props.history.replace('/Home')
}
render() {
return (
<div>
<Link to='/Home'>home</Link>
<form onSubmit={this.submin.bind(this)}>
<div className="form-group">
<label >账号：</label>
<input type="text" className="form-control" id="exampleInputEmail1" placeholder="输入账号"></input>
</div>
<div className="form-group">
<label >密码：</label>
<input type="password" className="form-control" id="exampleInputPassword1" placeholder="输入密码"></input>
</div>
<button type="submit" className="btn btn-info">登录</button>
<button type="reset" className="btn btn-danger" onClick={this.rest}>重置</button>
</form>
</div>
)
}
}注：可直接使用Link跳转，也可使用事件跳转。
举例中form表单使用的是Bootstrap框架，请提前配置好依赖。