React脚手架学习笔记1

之前断断续续学习了一段时间的Vue好久没用以后现在基本又忘记的差不多了，但是现在公司基本都是在用React，所以最近有时间又捡起来了。

先做一下这2天学习的笔记吧。

创建项目

首先需要切换到需要创建项目的目录，然后执行create-react-app 项目名,等待即可。

运行项目

执行有2种方法npm start、yarn start，推荐使用yarn方式，这个工具貌似也是FaceBook一起写的，可能兼容性更好（暂时不懂，就先这么做吧）

创建好项目以后的初始化

可以先清空publish、src两个文件夹，里面太多一般用不到的代码。

publish文件夹

重新创建index.html文件，怎么写貌似都影响不大，只要确保body里面的div的root根存在即可。

src文件夹

这个是编写的主要目录，需要创建App.jsx、index.js两个文件，在创建一个components文件夹用来存放各组件。 用App.jsx和用App.js其实是一样的,不过既然都已经用了React了，还是改成.jsx吧。

# index.jsx
// 引入React核心库
import React from "react";
// 引入 ReactDOM
import ReactDOM from "react-dom";
// 引入App
import App from "./App";


ReactDOM.render(<App/>,document.getElementById("root"))

# App.js
import React, { Component } from 'react'

export default class App extends Component {
    render (){
        return ''
    }
}

按照上面的方法，基本已经完成了项目的初始化。

开发前需要关注的问题

1、拆分组件：拆分界面，抽取组件 2、实现静态组件，使用组件实现静态页面效果 3、实现动态组件 ​ 3.1 动态显示初始化数据 ​ 3.1.1数据类型 ​ 3.1.2数据名称 ​ 3.1.3保存在那个组件 ​ 3.2交互（从绑定事件监听开始）

学习心得

在学习React的时候，由于官网其他的教程都大量使用了JS的各种新特性，比如箭头函数、结构、新的一些函数等，通过看才发现自己的JS基础这么差。。最好能先强化学习一下JS在看学习可能会舒服很多。不然很痛苦。

还有就是整体有很多还是和Vue很像，但是又有一些不一样。

还有就是动态初始化列表，如果确定数据放在那个组件的state中 - 某个组件使用：放在其自身的state中 - 某些组件使用：放在他们共同的父组件state中

父子之间通信： - 父给子传递数据：通过props传递 - 子给父传递数据：通过props传递，要求父提前给子传递一个函数

补充记录一个javascript小知识

因为ES6更新了很多的新语法，所以往数组里面添加对象可以用更方便的方法实现。

# App.js

...
state = {todos:[...]

addTodo = (todoObj) =>{
// 获取原todos
    const {todos} = this.state
// 追加一个todo
    const newTodos = [todoObj,...todos]
// 更新状态
    this.setState({todos:newTodos})
}
...


# Header.js

...
    handleKeyUp = (event)=>{
        //结构获取按键
        const {keyCode,target} = event
        // 判断是否回车
        if (keyCode !== 13) return
        // 构建一个todo对象
        const todoObj = {id:'001',name:target.value}
        this.props.addTodo(todoObj)
    }

这样就实现了子组件给父组件传递对象，父组件追加写进数组。

关于js生成唯一id

UUID库 yarn add uuid，安装即可使用，但是这个库比较大

nanoid库 yarn add nanoid，安装即可使用。

# 需要引入的jsx页面
import {nanoid} from 'nanoid'
const sid = nanoid()
.....