react-从0到1新建react项目

目录

1. 脚手架创建项目

2.分析目录

3.动态写入值

​编辑

4.引入组件

​编辑

 5.组件传值

6.控制组件传值的类型,类型校验

7.组件插槽

8.函数组件和类组件

9.添加事件

10.引入state ,在页面上响应式改变值

​编辑

11.子组件像父组件传值

12.组件间互相传值

13.数据双向绑定

 

---

学习方式:

1.阅读官方文档

2.跟着下面开始敲代码

基础部分

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.分析目录

1.package.json

2.index.js 入口文件 

3.app.js 组件引入,写页面的地方

3.动态写入值

结果:

4.引入组件

1.创建cmponents,里面放需要的组件,同样用函数式组件

2.app.js中引入

非常简单,import引入,<Home/>调用即可

 5.组件传值

app.js父组件

子组件:

6.控制组件传值的类型,类型校验

 

 

结果:

7.组件插槽

效果展示:

8.函数组件和类组件

上面都是通过函数式组件来写的,那我们怎么把它变成类组件呢?

首先看一下他们两者的区别:

1.函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素。

2、函数组件没有生命周期和状态state，而类组件有。

为了扩展我们这个Home组件,我们现在把home组件变成类组件

写法改变: 「原来」

 「现在」:

将props变成this.props

9.添加事件

1.为我们当前添加一个按钮, 现在用的是class所以我们使用面向对象,来做一个操作年龄➕的一个事件方法

结果:

10.引入state ,在页面上响应式改变值

「结果」:

11.子组件像父组件传值

举例子:将子组件的age传递给父组件

子组件:

 父组件: 

 

结果:

12.组件间互相传值

比如 header 中的值是 兄弟组件中的 定义的

思路: header中的值是父组件传过去的 

兄弟组件home把值传给父组件,父组件接收,再传给子组件header

子组件:header.js

 兄弟组件:home.js

 父组件app.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.改变状态

2.实现生命周期