create-react-app脚手架安装使用，React基础复习

okuuuurt_
324 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

安装node

官网下载，最好选长期维护版 会自动下载npm包，安装完成后检查

node -v
npm -v

用npm命令安装create-react-app

修改成淘宝的镜像源

$ sudo npm config get registry 
$ sudo npm config set registry https://registry.npm.taobao.org

全局安装create-react-app命令

$ sudo npm install -g create-react-app
$ create-react-app myapp

tips: create-react-app 会自动使项目成为一个 git 仓库，除非应用是在已有仓库中创建的。 如果不希望项目成为一个存储库，直接在项目根目录删除.git文件，或用命令

$ rm -rf .git

出错，尝试清除缓存再安装：

$ sudo npm clear-npx-cache

重要的文件

进入myapp文件夹：

1.png

node_modules

需要写在.gitignore文件中

package.json

配置

public 静态资源文件夹

index.html---主页面

src 源码文件夹

App.js---定义应用组件，index.js---入口文件

React概念复习

✅state

state在🙋类本身定义，可以1⃣️用state={}直接，也可以2⃣️用在构造函数constructor（）中用this.state={}定义。后面要改都要用this.setState（{ }）来改，改是合并，不是替换。

✅props

对标签的🙋属性类型/必要性限制: 在类定义外用Person.propTypes={}或类定义里用static propTypes={name:PropTypes.string.isRequired，}

用defaultProps={}指定默认值

props在🙋类的实例对象中添加，（eg.看到这个标签，React会帮我们new出来一个。），两种方法1⃣️用 📄自定义属性=”属性值“📄的形式，这里属性值会被认为是字符串，如果要数字或者函数，加上{}2⃣️先定义一个const p={}，对象里面是键值对，然后用扩展运算符{…p}在引入

✅ref

ref类似于html中的id，🙋写在虚拟DOM的标签上，如input，button标签，形式1⃣️回调函数写法：ref={(curNode)=>{this.myRef = curNode}},每更新一次第一次null，第二次当前标签，this.myRef表示该节点2⃣️API方法：ref={this.myRef},并在类中myRef = React.createRef()，this.myRef.current表示该节点

✅事件处理：onEvent=handleEvent(event)，使用event.target.value

✅受控组件：对于input等输入类DOM，现用现取（需要ref）就是非受控，随着输入把数据维护到状态里就是受控。

✅Babel作用：将代码编译为兼容性更好的版本，即转化为更多浏览器可以解析的句法

✅优先使用解构赋值：函数的参数是对象的成员。析构出对象中需要使用的值作为参数传入函数，而非直接将对象作为参数:

// bad
function getMaterial(sandwich) {
  const bread = sandwich.bread;
  const meat = sandwich.meat;
}

// good
function getMaterial(obj) {
  const { bread, meat } = obj;
}

// best
function getMaterial({ bread, meat }) {
}

如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。

✅对象字面量增强：一种更简洁的表达。与析构对象相反，把全局作用域中的变量添加到一个对象中。

✅展开运算符 ...

✅异步操作

✅声明式编程风格：

句法本身重点描述该做什么，而不管怎么做。函数式编程：

1⃣️不可变：不修改原始数据结构，创建并操作副本

2⃣️纯函数：至少接受一个参数、返回一个值/另一个函数、不应该更改任何参数

3⃣️掌握数据转换（数组）的几个方法：

  • filter()方法：滤出 符合断言的数组元素 到新数组：每个元素上调用断言，返回值决定是否添加该元素到新建数组
Array.prototype.fliter （断言）
  • map()方法：返回 每个元素调用该函数的返回值 到一个新数组
Array.prototype.map（函数）

 Array.prototype.reduce((previousValue, currentValue) => { /* ... */ }, initialValue)

4⃣️高阶函数：接受其他函数作为参数/返回值是一个函数；柯里化:通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

✅ESLint 的使用 看这个

✅Prettier

avatar
文章
阅读
粉丝