关于创建React App的8个有趣事实

2023-05-16

来源:https://medium.com,作者:Jennifer Fu

翻译:前端外文精选

你所知道的一些事情,你可能不知道的一些事情。

Create React App是搭建React项目的快速方法。这样我们可以重点放在代码上,而不是构建工具上。

事实1:可以使用单个命令创建完整项目

这个神奇的命令可以通过以下三种方式之一调用:

npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app

Facebook保证其所有基础组件(Webpack,Babel,ESLint,Jest等)可以无缝地协同工作。

开箱即用,将设置以下脚本:

npm start: 在开发模式下运行该应用程序,然后打开 http://localhost:3000 在浏览器中查看它。

npm run build: 将用于生产的应用程序构建到build文件夹,该版本已精简并准备部署。

npm test: 以交互方式运行测试观察程序。它运行与自上次提交以来更改的文件相关的测试。

事实2:React项目可以从特定模板开始

前面的命令可以用一个特定的模板定制:

npx create-react-app my-app --template [template-name]
npm init react-app my-app --template [template-name]
yarn create react-app my-app --template [template-name]

如果你想从TypeScript的React项目开始,只需使用模板 cra-template-typescript。默认模板为 cra-template

如果你想利用社区资源,请访问此网站,当前有170个模板。

事实3:一个依赖项是Create React应用程序的第一原则,这个构建依赖项不在devDependencies部分

一个依赖关系是三个Create React App哲学中的第一个。你可以在以下 package.json 中找到此构建依赖项吗?

{
  "name": "my-react-app",
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

package.json 中,有三个依赖项,没有 devDependencies,这个依赖在哪里?

它是react-scripts

根据NPM依赖项定义,构建依赖项,即react-scripts,应该是一个devDependency。然儿,它与 reactreact-dom 一起在依赖项部分中。

实际上,react-scriptsdevDependency。由于某些实际原因,Facebook自从react-scripts 1.0.8起就将其作为依赖项。

事实4:无需配置是Create React App的第二个理念——但这不是零配置

Create React App为开发和生产构建都设置了合理的配置。开发人员可以专注于编写代码,可以不进行任何配置。

下面是开箱即用的源代码目录树。我们实际上找到了一个配置文件 .gitignore,它用于github的源代码版本控制。

my-react-app/
  node_modules/
  public/
    favicon.ico
    index.html
    logo192.png
    logo512.png
    manifest.json
    robots.txt
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    serviceWorker.js
  .gitignore
  package-lock.json
  package.json
  README.md

事实5:Jest可以使用绝对路径。

Jest是Create React App的默认测试运行程序。默认情况下,Jest在__tests__ 文件夹,.test.js 文件或 .spec.js 文件的 .js 文件中运行所有测试用例。

这是来自Create React App的 App.test.js。该测试用例使用相对路径:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

如果将App更改为使用绝对路径,如下所示,此测试用例将中断:

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

可以通过添加 modulePaths 选项来修复它:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --modulePaths=src",
    "eject": "react-scripts eject"
  },
}

如果您使用react-app-rewired,还可以通过配置config-overrides.js来修复它:

module.exports = {
  jest: config => {
    config.moduleNameMapper = {
      '^@(.*)$': '<rootDir>/src$1'
    };
    return config;
  },
};

事实6:创建React应用程序可以处理CORS(跨域资源共享)错误

你是否遇到以下错误?

Fetch API cannot load http://myhost.com:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

当API使用与Web服务器不同的主机或端口时,此错误将阻止您的应用程序运行。

通过在 package.json 中添加代理配置,Create React App提供了解决此问题的方法:

{
  “proxy”: “http://myhost.com:4000",
}

此代理选项支持HTTP,HTTPS和WebSocket连接。

如果有多个API服务器怎么办?

替代解决方案需要安装 http-proxy-middlewar

npm install --save http-proxy-middleware

另外,在根目录中创建并配置 src/setProxy.js。以下是 src/setProxy.js 的示例。对 /api1/x 的调用将转发到 http://myhost1:4000/api1/x,而对 /api2/y 的调用将转发到 http://myhost2:5000/api1/y

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api1',
    proxy({
      target: 'http://myhost1:4000',
      changeOrigin: true,
    })
  );
  app.use(
    '/api2',
    proxy({
      target: 'http://myhost2:5000',
      changeOrigin: true,
    })
  );
};

事实7:创建React应用程序可以配置要支持的浏览器

开箱即用,可以在 package.json 中看到以下浏览器列表。

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

此配置控制Babel如何将JavaScript转换为与指定的浏览器兼容,以进行生产和开发。查看https://browserl.ist以获取有关如何配置浏览器列表的信息。

对于Create React App的默认浏览器列表配置,生产代码的目标是92%的浏览器:

对于Create React App的默认浏览器列表配置,开发代码的目标是26%的浏览器:

事实8:可以分析生成的bundle包

Create React App隐藏了很多细节和复杂性。生成最终bundle包后,您是否有兴趣分析其空间使用情况?

source-map-explorer 使你能够通过源映射分析和调试空间使用情况。安装source-map-explorer:

npm install --save source-map-explorer

添加分析脚本:

{
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-scripts start",
    "build": "react-scriptsd build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

生成并运行分析命令:

npm run build
npm run analyze

然后,bundle的使用情况将显示在默认浏览器中:

点关注,不迷路。如果再给 ➕ 个星标就更棒啦!关注加加,星标加加~



如果觉得文章不错,帮忙点个在看呗

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于创建React App的8个有趣事实 的相关文章

  • Paimon: Streaming data lake 数据湖项目的后起之秀

    什么是Paimon Paimon的官网介绍是 Streaming data lake platform with high speed data ingestion changelog tracking and efficient real
  • 数据湖Data Lakehouse支持行级更改的策略:COW、MOR、Delete+Insert

    COW 写时复制 MOR 读时合并 Delete Insert 保证同一个主键下仅存在一条记录 将更新操作转换为Delete操作和Insert操作 COW和MOR的对比如下图 而Delete Insert在StarRocks主键模型中用到
  • JAVA-- 带你重温JAVA NIO中的ZERO COPY 零拷贝

    java zero copy介绍 Java零拷贝是一种技术 在不经过应用程序的情况下 直接将数据从文件或内存映射到套接字 从而减少数据拷贝和上下文切换的次数 提高数据传输的效率 Java中支持零拷贝的方法 java nio channels
  • JUnit 5 使用教程 及 JUnit 4/5的差异

    1 JUnit 5产生的原因 JDK 8在java中带来了迷人的功能 最值得注意的是lambda表达式 为了适应 Java 8 风格的编码和新的功能特性 JUnit 提供了JUnit 5 2 JUnit 5 架构 与 JUnit 4 相比
  • JAVA-- 带你重温函数式接口、使用Functional Interface最佳实践

    1 概念及分类 函数式接口 Functional Interface 就是一个有且仅有一个抽象方法 但是可以有多个非抽象方法的接口 并且这类接口使用了 FunctionalInterface进行注解 在jdk8中 引入了一个新的包java
  • 如何基于LLMs使用LangChain构建强大的差异化应用--LangChain之初体验

    近年来 语言模型 LMs 特别是LLMs已经成为最令人兴奋和最有影响力的技术之一 它们可以为各种目的生成自然语言文本 例如回答问题 撰写摘要 创建故事等等 然而 仅使用LMs还不足以构建真正强大且与众不同的应用程序 您还需要 将LMs连接到
  • 连接局域网下centos服务器和mysql数据库慢优化方法

    连接局域网下centos服务器和mysql数据库慢优化方法 Xshell连接centos比较慢优化 通过xshell连接服务器需要服务端安装openssl xff0c openssl配置项UseDNS 默认情况是开启状态的 xff0c Us
  • 云技术概念

    云计算概念是由Google提出的 xff0c 这是一个美丽的网络应用模式 狭义云计算是指IT基础设施的交付和使用模式 xff0c 指通过网络以按需 易扩展的方式获得所需的资源 xff1b 广义云计算是指服务的交付和使用模式 xff0c 指通
  • 通过IP地址和子网掩码与运算计算相关地址

    通过IP地址和子网掩码与运算计算相关地址 知道ip地址和子网掩码后可以算出 xff1a 1 网络地址 2 广播地址 3 地址范围 4 本网有几台主机 例1 xff1a 下面例子IP地址为192 168 100 5 子网掩码是255 255
  • 关于VSCode的三个配置文件

    关于VSCode的三个配置文件 若要使用VSCode来开发C 43 43 程序 xff0c 则应该了解以下三种配置文件 xff0c 分别为 xff1a tasks json xff1a 编译器相关的配置文件 比如 xff0c 设置编译指令
  • 用Prime95来做linux下CPU压力测试

    Prime95是用来做linux下CPU压力测试的 由GIMPS Great Internet Mersenne Prime Search xff09 所提供 主要是透过运算找出梅森质数 质数 xff08 Prime number xff0
  • ubuntu修改启动项等待时间、修改启动项顺序、更改启动内核

    目录 ubuntu修改启动项等待时间 修改启动项顺序 更改系统内核版本 ubuntu修改启动项等待时间 步骤 sudo vi etc default grub找GRUB TIMEOUT 61 10 那一行 xff0c 把10改为需要的时间即
  • 好电影推荐

    今天在网上看到一篇给大家推荐电影的帖子 xff0c 里面搜集了一些欧美电影 xff0c 有悬疑片 剧情片 动作片 恐怖片 xff0c 包括经典的 以及一些流传不是很广的 xff0c 在这里收藏一下与大家一起分享 xff1a 1 不请自来 典
  • CodeBlock无编辑器问题解决

    对于新手小白来说 xff0c 在使用CodeBlock做C语言或者C 43 43 方面的编写时 xff0c CodeBlock会出现如下情况 xff1a Can 39 t find compiler executable in your c
  • argparse—使用命令行输入,给变量赋值

    import argparse if name 61 61 39 main 39 parser 61 argparse ArgumentParser parser add argument 39 bbb 39 type 61 int def
  • 树莓派keras、TensorFlow环境安装记录

    1 安装arm版的TensorFlow xff0c 方法参考 xff1a https github com samjabrahams tensorflow on raspberry pi 2 安装keras sudo apt get ins
  • inception 论文阅读笔记

    inception V1 提出inception unit xff0c 采用多个size的卷积核对输入进行卷积 采用1x1 3x3 5x5的卷积核不是必须的 xff0c 而是为了方便 可以理解为不同大小的卷积核可以提取到图像中不同大小的特征
  • 树莓派3 raspbian系统 红外遥控器 lirc库使用笔记

    目的 xff1a 接入红外接受硬件 xff0c 使用红外遥控器控制树莓派 硬件图 xff1a 稍后补 接受口GPIO 61 18 首先安装lirc库 sudo apt get update sudo apt get install lirc
  • 树莓派设置静态IP

    vi etc dhcpcd conf 使用 vi 编辑文件 xff0c 增加下列配置项 指定接口 eth0 或者wlan0 interface wlan0 指定静态IP xff0c 24表示子网掩码为 255 255 255 0 stati
  • BGP→→

    BGP 4 提供了一套新的机制以支持无类域间路由 这些机制包括支持网络前缀的通告 取消 BGP 网络中 类 的概念 BGP 4 也引入机制支持路由聚合 xff0c 包括 AS 路径的集合 特点 BGP属于外部或域间路由协议 BGP的主要目标

随机推荐