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项目名
注意 选择 项目位置
图示

1.png

---

---

2.2 启动项目

1. cd 到项目根目录,
2. npm start

3. 启动成功 界面出现

   
   1.png

---

2.3 目录分析

这对比 vue项目就行 都一样
index.js 入口

---

---

3. index.js 入口

做一个简单的修改 测试

1.png

---

4. 组件创建

---

4.1 效果预览

2.gif

---

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里面进行操作
引用多次 界面就出现多次计数器

1.png

---

参考资料

1. 插件 Simple React Snippets
2. ES7 React/Redux/GraphQL/React-Native snippets

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉