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()
.....