React环境搭建

2020-07-24 15:07:57 浏览数 (1)

React是当下前端生态圈流行的框架之一，与Vue和Angular并称前端三架马车。今天，我们就一起来学习下React，今天的主要内容有。

  • 利用React脚手架create-react-app搭建项目
  • 编写一个React计数组件

利用React脚手架create-react-app搭建项目

这里笔者例举两种利用create-react-app搭建项目的方式

全局安装

代码语言：javascript复制
npm i -g create-react-app
create-react-app my-app
cd my-app && npm start

npx安装

代码语言：javascript复制
npx create-react-app my-app
cd my-app && npm start

这两种方案各有各的好处，我们先说全局安装吧。npm i -g create-react-app只需要执行一次，后面你在任意目录执行create-react-app project就可以创建一个react项目的脚手架，这免去了开发者很多配置的工作。npx安装需要的npm版本在5.2.0以上，它的原理大致是先去全局的node_modules下找找看有没有这个包，没有的话再去本地项目找找有没有这个包，还是没有就去远程拉一个最新的下来。

这两种笔者更倾向于使用第二种npx安装的方式。这里我给出两个理由，第一个，当下前端发展太快了，各种包库更新迭代的太快，如果你全局安装的话，用接地气的话感觉就是有点跟不上时代（PS：除非是去那种网络不通的公司）。第二个，它有可能跟其他的全局包产生一个冲突，就以create-react-app为例，如果你本地安装了yarn的全局包，你将有机会看到yarnpkg add --exact react react-dom react-scripts --cwd has failed的错误，大致应该是没有用npm install而是用yarn导致的，这里删掉全局的yarn包可以解决这个问题。

编写一个React计数组件

我们要实现这样一个组件，点击加号按钮数字加1，点击减号按钮数字减1。

我们先定义一个文件ClickCounter.js, 这里的命名规范讲一下，类似于JAVA的导包com.ataola.utils这种，用户的这个行为是点击，点击是为了计数。当然啦用户点击它还可以搞些别的事情，比如说报名啊，回到顶部等等等等，所以把Click放在前面，Counter放在后面。

JSX语法

即Javascript的语法扩展。扩展了以后，你可以把一坨HTML代码丢到Javascript里面来写。形如楼下这样。

代码语言：javascript复制
render() {
    return (
      <div>
        <button onClick={ this.Add }>Add</button>
        <button onClick={ this.Reduce }>Reduce</button>
        <div>Count: { this.state.count }</div>
      </div>
    )
  }

在Render函数中，我们返回一段html代码，写着一个加一个减按钮，然后显示相应的包。

引入相应的组件包

代码语言：javascript复制
import React, { Component } from 'react';

编写相关类

代码语言：javascript复制
class ClickCounter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.Add = this.Add.bind(this);
    this.Reduce = this.Reduce.bind(this);
  }

  Add() {
    this.setState({ count: this.state.count   1 });
  }

  Reduce() {
    this.setState({ count: this.state.count - 1 })
  }

  render() {
    return (
      <div>
        <button onClick={ this.Add }>Add</button>
        <button onClick={ this.Reduce }>Reduce</button>
        <div>Count: { this.state.count }</div>
      </div>
    )
  }
}

暴露相应的类

代码语言：javascript复制
export default ClickCounter;

在index.js中引入我们创建的类，并加入到渲染函数中

代码语言：javascript复制
import ClickCounter from './ClickCounter';

ReactDOM.render(
  <React.StrictMode>
    <ClickCounter/>
  </React.StrictMode>,
  document.getElementById('root')
);

至此我们已经学会了搭建React项目，并能够设计简单的React组件。

问题思考

this.setState({ count: this.state.count 1 });这句我能不能修改成this.state.count ?

这句话的意思翻译过来就是，我能不能直接手动挡操作state里面的变量？答案肯定是能写成那种形式，你能访问到那个对象，你给它加加有问题吗？但是从React设计理念上，这是非常暴力鲁棒的做法，你就想嘛，难道这个setState是放着让你看哒，很显然不是的。因为React在设计state时候是异步的，当你调用setState的时候，它会被放入异步队列中，所以它也不是马上去改变state里面的数据。而你这个加加的写法是同步的马上去修改，假如说哈，你的加法是用加加这种写法，然后你的减法是用setState()这种，当你点击加的时候React，它心态崩了呀，它也不知道你想干嘛，它想干的是异步的事情，而你要干的是同步的事情，它疯了。。。。。

好在，现在的编译器啊、或者配合ESLint智能，它会巧妙地提示你Do not mutate state directly. Use setState() react/no-direct-mutation-stateDo not mutate state directly. Use setState() react/no-direct-mutation-state,让你巧妙地避开这种违背框架设计理念的写法。

思考一下，Vue里面可不可以，当然是可以的啦。

具体的参考下楼下地址：

React demo1: https://github.com/ataola/react-Inkjet/tree/master/code/demo-1

Vue demo1: https://github.com/ataola/vue-Graffiti/tree/master/code/demo1

参考文献

《深入浅出React和Redux》 机械工业出版社 程墨 编著

react npm yarn vue.js node.js

0 人点赞