React提高08 Create React App

本文详细介绍了如何使用Create React App快速搭建React应用,包括安装、运行、单元测试、配置等,同时提到了CSS Modules、ESLint、Ant Design按需引入等配置细节,帮助开发者更好地理解和使用Create React App。
摘要由CSDN通过智能技术生成

已同步到个人博客,欢迎访问

一个由Facebook官方出品的React脚手架工具,无需额外配置,迅速搭建React应用脚手架。

这里只对它进行简单的尝试和入门,如果需要进一步的学习,官网在这里文档在这里,也可以参考这篇文章进行更高阶更深入的配置和学习。

使用Create React App开发React应用不必再安装Webpack或者Babel,它们已经被内置在脚手架中了

它提供的功能:

  1. 开箱即用的React支持
  2. 开发模式和生产模式的编译
  3. 开发模式的热更新
  4. 提供了单元测试测试的接口支持
  5. 其他配置工具的默认配置(亦可以个性化配置)

快速开始

npx create-react-app my-app
cd my-app
npm start

React应用会运行在http://localhost:3000/,开发完成后使用npm run build打包

安装

安装需要Node的版本在8.10.0以上

# 使用npx
npx create-react-app my-app

# npm在5.1版本下不能使用npx
# 需要使用npm,首先进行全局安装
npm install -g create-react-app
# 创建应用
create-react-app my-app

运行

npm start

http://localhost:3000以开发模式运行React应用,页面提供了热跟新功能,在控制台会显示错误和警告。

单元测试

基本使用

npm test

使用Jest运行单元测试,默认情况下会运行从上次提交commit后有改动的文件的单元测试。

需要react-scripts@0.3.0及更高版本,老项目开启单元测试看这里

Jest是基于Node的运行期,速度很快,并且动过jsdom提供了浏览器的全局变量,比如window,但Jest对于DOM的测试是不准确的,它的目的是对逻辑和组件进行单元测试,而非测试DOM

在运行时Jest会自动寻找以test.js/spec.js或者__tests__文件夹下以.js结尾的文件,这些文件可以位于src目录下任意深度的文件夹内

建议将测试文件(或__test__文件夹)和北侧文件放在一起,有两个好处:

  1. 便于管理,一眼就能看到文件的单元测试文件
  2. 引入组件的时候更简洁, 例如import App from './App'

命令行接口

使用npm test时,Jest会以watch模式运行,每次更改文件都会重新运行测试文件

这个模式下的命令行接口提供了各种能力,可以一直开着这个窗口进行快速的重复测试

版本管理接口

使用npm test默认情况下会运行从上次提交commit后有改动的文件的单元测试。可以在watch模式下按a来要求Jest执行全部的测试

如果当前的工程没有使用版本管理,那么Jest会默认运行全部的测试

测试组件

关于Jest的使用,以前学习在Vue中使用Jest时总结过,Jest的基本用法是相同的,在测试组件时有所区别,Vue测试组件使用的将组件和Jest进行连接的工具是Vue-test-utils,而React则是Enzyme(更准确些,jest-enzyme更接近于Vue-test-utils,封装了很多方便的API)

内容比较多,这里不展开,文档在这里,慢慢单独学习。

构建生产文件

npm run build

打包出的文件是经过压缩的,文件名带有Hash值

个性化配置

因为Create-React-App将Webpack、Babel、ESLit的配置隐藏起来,简化了用户的配置操作

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值