专栏首页前端路桥React环境搭建

React环境搭建

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

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

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

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

全局安装

npm i -g create-react-app
create-react-app my-app
cd my-app && npm start

npx安装

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里面来写。形如楼下这样。

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

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

引入相应的组件包

import React, { Component } from 'react';

编写相关类

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>
    )
  }
}

暴露相应的类

export default ClickCounter;

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

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》 机械工业出版社 程墨 编著

本文分享自微信公众号 - 前端路桥(ataola),作者:丰臣正一

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Javascript[0x04] -- JSON必知必会

    通常在写简历的时候,对于某项技术而言,我们可以用“精通”,“熟悉”和”了解“三种词汇来描述你对它的掌握情况,在写这篇文章的时候,是笔者阅读完《JSON必知必会...

    丰臣正一
  • Canvas 奇妙历险(一)

    canvas的中文名叫画布,是HTML5元素的一部分。最早是由苹果公司提出的这么一个概念,后来被应用在我们的网络技术上,结合Javascript脚本编程,我们可...

    丰臣正一
  • leetcode - 除数博弈

    选出任一 x,满足 0 < x < N 且 N % x == 0 。用 N - x 替换黑板上的数字 N 。如果玩家无法执行这些操作,就会输掉游戏。

    丰臣正一
  • ES6+ 开发 React 组件

    在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣。 类 迄今为止,最能体现我们使用 ...

    hbbliyong
  • 解锁机器学习的十种方法

    不论是在科研中还是在工业领域,机器学习都是个热门话题,新的机器学习方法也层出不穷。机器学习发展迅速又很复杂。对初学者而言,紧跟其发展无疑十分困难,即便是对专家们...

    商业新知
  • Mendix---开发者与非开发者如何定制化datagrid的样式

    如何使用DataGridExtension完成DataGrid根据数据的不同显示不同的颜色。

    Erwin
  • 微信里也可以玩「纪念碑谷」!原来它才是小游戏最大的惊喜

    前两天,在微信更新的 6.6.1 版本中开放了小游戏,并上线了开屏小游戏「跳一跳」。

    知晓君
  • python文件操作读取文件写入文件

    要使用文本文件中的信息,首先需要将信息读取到内存中。为此,你可以一次性读取文件的全部内容,也可以以每次一行的方式逐步读取。

    章鱼喵
  • Python文件处理

    很多初学者都没有在程序中写异常的意识,这会给程序带来很多危险,比如程序突然崩溃,攻击者可能会根据traceback对代码发起攻击,一般在涉及到数据交互,输入输出...

    刘开心_1266679
  • Vue归纳笔记:Vue 实例如何实现代理 data 对象属性的访问

    对于初学Vue.js的小伙伴而言,可能会认为Vue实例是一个很神奇的东西!因为它除了帮助我们完成双向绑定之外,还在某些细节方面为我们增加了一些理解上面的小烦恼!...

    用户1272076

扫码关注云+社区

领取腾讯云代金券