React 从 0 到 1 搭建项目_react从0到1搭建

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 react-router-dom@5.2.0 --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框架，请提前配置好依赖。