正在进入ing...

React脚手架学习笔记1

发布时间:2022-01-06 浏览量: 84 文章分类: 前端相关

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

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

创建项目

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

运行项目

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

创建好项目以后的初始化

可以先清空publishsrc两个文件夹,里面太多一般用不到的代码。

publish文件夹

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

src文件夹

这个是编写的主要目录,需要创建App.jsxindex.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

UUIDyarn add uuid,安装即可使用,但是这个库比较大

nanoidyarn add nanoid,安装即可使用。

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