1.前言

30 开头的文章 后面都是基于脚手架的项目

1.1 脚手架 环境

脚手架都是必不可少的

全局安装 npm i create-react-app -g

查看版本 create-react-app -V

我这里的npm是做过淘宝镜像的

npm config set registry https://registry.npm.taobao.org

1.2 常用的快捷方式

1.rcc 创建class组件快捷方式

2.rfc创建函数式组件快捷方式

2.创建脚手架 项目

2.1 基本步骤

create-react-app项目名

注意 选择 项目位置

图示

2.2 启动项目

1. cd 到项目根目录,
2. npm start
3. 启动成功 界面出现
   
   
   

2.3  目录分析

这对比 vue项目就行 都一样

index.js 入口

3. index.js 入口

做一个简单的修改 测试

4.  组件创建

4.1 效果预览

4.2 分析

1. 这个和 vue的单文件组件类似,不过react的文件都是普通js后缀
2. 新建   src/pages 目录用来存放页面级组件
3. 我们先做个 计数器组件做个预热
4. src/pages/counterNumber/index.js
5. state 变量
6. 3个按钮标签
7. 增加和减少事件
8. this的修改

4.3 创建

rcc类组件快捷方式 需安装插件

import React, { Component } from 'react'
export default class index extends Component {
    constructor(props){
        super(props)
        let {num} = props
        this.state = {
            // num:num
            num
        }
    }
    //  ----------------------自定义函数
    increase() {
        this.setState({num:this.state.num+1})
    }
    reduce() {
        this.setState((oldState) => {
            return {
               num:oldState.num-1
           }
        })
    }
//---------自定义函数结束
    render() {
        return (
            <div>
                <button onClick={()=>{this.reduce()}}>-</button>
                <button>{this.state.num}</button>
                <button onClick={() => { this.increase() }}>+</button>
            </div>
        )
    }
}

5. 引用

通常其实我们不修改 入口index.js

我们在 App.js里面进行操作

引用多次 界面就出现多次计数器