Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址

一 目录

不折腾的前端,和咸鱼有什么区别

目录
一 目录
二 前言
三 安装及初始目录
四 默认支持特性
五 配合 VS Code 调试
六 分析包大小
七 模块引入 CSS
八 Sass 安装及使用
九 添加图片、背景、SVG
十 public 文件夹
10.1 引用静态资源
10.2 Mock 数据
十一 代码打包分割
十二 引用 TypeScript
十三 React Router - 路由
十四 自定义环境变量
十五 测试
十六 开发环境代理
十七 使用 Ajax 请求获取数据
十八 Title 和 Meta
十九 总结

二 前言

返回目录

Create React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。

本文 绝大多数99% 内容来自 Create React App 的文档,1% 来自个人的整理。

如果对此话有所误解,请跳至文:十九 总结

可加 QQ 群:798961601,跟随 jsliang 一起折腾

  • 参考文献:
  1. Create React App - 英文文档
  2. Create React App - 中文文档
  3. Create React App - GitHub

三 安装及初始目录

返回目录

  1. 下载 Node.js
  2. 安装 Create React App:
    1. npm i create-react-app -g
  3. 开启新项目:
    1. create-react-app todolist
    2. cd todolist
    3. npm start
  4. 打包项目:npm build
  • 项目目录:
  1. - todolist
  2. + node_modules —————————— 项目依赖的第三方的包
  3. - public ———————————————— 共用文件
  4. - favicon.ico —— 网页标签左上角小图标
  5. - index.html —— 网站首页模板
  6. - mainfest.json —— 提供 meta 信息给项目,并与 serviceWorker.js 相呼应,进行离线 APP 定义
  7. - src ——————————————————— 项目主要目录
  8. - App.css —— 主组件样式
  9. - App.js —— 主组件入口
  10. - App.test.js —— 自动化测试文件
  11. - index.css —— 全局 css 文件
  12. - index.js —— 所有代码的入口
  13. - logo.svg —— 页面的动态图
  14. - serviceWorker.js —— PWA。帮助开发手机 APP 应用,具有缓存作用
  15. - .gitignore ——————————— 配置文件。git 上传的时候忽略哪些文件
  16. - package-lock.json ———— 锁定安装包的版本号,保证其他人在 npm i 的时候使用一致的 node
  17. - package.json ————————— node 包文件,介绍项目以及说明一些依赖包等
  18. - README.md ———————————— 项目介绍文件
  19. 复制代码

四 默认支持特性

返回目录

  • 支持所有现代浏览器(IE 9、10、11 除外,如果需要,请自行配置)

  • 支持指数运算符 (ES2016)

  • 支持 async / await (ES2017)

  • 支持 Object Rest(剩余) / Spread(展开) 属性 (ES2018)

  • 支持动态 import() (stage 3 proposal)

  • 支持 Class 字段和静态属性 (part of stage 3 proposal)

  • 支持 JSX, Flow 和 TypeScript

  • 支持 PostCSS,无需手动添加 CSS 前缀,Create React App 会自动补全

  • 参考文献:支持的浏览器和特性 - Create React App 中文文档

五 配合 VS Code 调试

返回目录

可以通过 Visio Studio Code 的插件 Debugger for Chrome 调试 Create React App:

  1. 安装 -> Debugger for Chrome
  2. 调试 -> 添加配置:

launch.json

  1. {
  2. "version": "0.2.0",
  3. "configurations": [
  4. {
  5. "name": "Chrome",
  6. "type": "chrome",
  7. "request": "launch",
  8. "url": "http://localhost:3000",
  9. "webRoot": "${workspaceRoot}/src",
  10. "sourceMapPathOverrides": {
  11. "webpack:///src/*": "${webRoot}/*"
  12. }
  13. }
  14. ]
  15. }
  16. 复制代码
  1. 保存 -> 开始调试
  2. 通过上述步骤即可开始调试

如有问题可以参考下面资料

六 分析包大小

返回目录

使用 source maps 分析 JavaScript 包。

这有助于你了解代码膨胀的来源,从而配合其他插件来减少每个包的大小,优化项目。

  1. 安装:npm i source-map-explorer -S
  2. 修改 package.json:

package.json

  1. "scripts": {
  2. "analyze": "source-map-explorer build/static/js/main.*",
  3. "start": "react-scripts start",
  4. "build": "react-scripts build",
  5. "test": "react-scripts test",
  6. }
  7. 复制代码
  1. 分析:npm run build
  2. 分析:npm run analyze

七 模块引入 CSS

返回目录

在 Create React App 中,如果你的 react-scripts 版本是 2.0 或者更高,你可以通过模块形式引入样式:

Button.js

  1. import React, { Component } from 'react';
  2. import styles from './Button.module.css'; // 将 css modules 文件导入为 styles
  3. import './another-stylesheet.css'; // 导入常规 CSS 文件
  4. class Button extends Component {
  5. render() {
  6. // 作为 js 对象引用
  7. return <button className={styles.error}>Error Button</button>;
  8. }
  9. }
  10. 复制代码

这样子不会导致样式的冲突,就好比你 import JS 进来一样。

八 Sass 安装及使用

返回目录

  1. 安装 node-sassnpm i node-sass -S
  2. 引入:@import 'styles/_colors.scss'; // 假设 styles 目录 在 src/ 目录下

九 添加图片、背景、SVG

返回目录

  1. 添加图片:通过 import 引入即可。
  1. import React from 'react';
  2. import logo from './logo.png'; // 告诉 Webpack 这个 JS 文件使用了这个图片
  3. console.log(logo); // /logo.84287d09.png
  4. function Header() {
  5. // 导入结果是图片的 URL
  6. return <img src={logo} alt="Logo" />;
  7. }
  8. export default Header;
  9. 复制代码
  1. 引用背景:通过 url 引用即可。
  1. .logo {
  2. background-image: url(./logo.png);
  3. }
  4. 复制代码
  1. 引用 SVG:
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. function App() {
  5. return (
  6. <div className="App">
  7. <header className="App-header">
  8. <img src={logo} className="App-logo" alt="logo" />
  9. </header>
  10. </div>
  11. );
  12. }
  13. export default App;
  14. 复制代码

或者:

  1. import { ReactComponent as Logo } from './logo.svg';
  2. const App = () => (
  3. <div>
  4. {/* ReactComponent 导入名称是特殊的 */}
  5. {/* Logo 是一个实际的 React 组件 */}
  6. <Logo />
  7. </div>
  8. );
  9. 复制代码

十 public 文件夹

返回目录

在 Create React App 创建的项目中,有个 public 文件夹,该文件夹下通常有:

  • favicon.ico - 网页小标签
  • index.html - 项目首页
  • mainfest.json - 提供 meta 信息给项目,并与 serviceWorker.js 相呼应,进行离线 APP 定义

当然,它不仅可以拥有这些文件,还可以新增内容。

10.1 引用静态资源

返回目录

index.html 可以引用静态资源。

在 index.html 中引用的静态资源不会被 Webpack 打包,而是被复制到打包目录中,使用方法:

  1. <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  2. 复制代码

只需要加上 %PUBLIC_URL%/ 表示引用 public 下的资源即可。

在 JavaScript 中:

  1. render() {
  2. return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
  3. }
  4. 复制代码

这样也会引用 public 中的资源,从而让图片 不会被 Webpack 打包。当然,需要牺牲的代价有:

  • public 文件夹中的所有文件都不会进行后处理或压缩。
  • 在编译时不会调用丢失的文件,并且会导致用户出现 404 错误。
  • 结果文件名不包含内容哈希值,因此你需要添加查询参数或在每次更改时重命名它们(以便清除浏览器缓存)。

10.2 Mock 数据

返回目录

此外,由于它内含 Node.js,所以还可以利用这点进行数据模拟(Mock),做法是:

  • 在 public 文件夹中新建 api 目录,然后创建文件 headerList.json,引用 axios 后,通过: axios.get('/api/headerList.json').then() 即可调用该文件进行 Mock。

api 下可以存放多个 json 文件

十一 代码打包分割

返回目录

在 Create React App 中,我们可以使用 React Loadable 来进行代码的分割。

使用方式:

  1. import Loadable from 'react-loadable';
  2. const LoadableOtherComponent = Loadable({
  3. loader: () => import('./OtherComponent'),
  4. loading: () => <div>Loading...</div>,
  5. });
  6. const MyComponent = () => (
  7. <LoadableOtherComponent/>
  8. );
  9. 复制代码
  • 参考文献:
  1. Code-Splitting - GitHub
  2. react-loadable - GitHub
  3. Code Splitting in Create React App

十二 引用 TypeScript

返回目录

  1. 使用 TypeScript 启动新的 Create React App项目:npx create-react-app my-app --typescript
  2. 往 Create React App 现有项目中添加 TypeScript:npm i typescript @types/node @types/react @types/react-dom @types/jest -S。(记得修改所有 JS 文件为 TS 文件,例如 src/index.js -> src/index.tsx

十三 React Router - 路由

返回目录

由于 Create React App 并没有规定路由解决方案,然后市面上比较收欢迎的路由解决方案是 React Router,所以可以尝试使用:

十四 自定义环境变量

返回目录

  1. 定义环境变量:process.env.REACT_APP_SECRET_CODE
  2. 获取特殊内置环境变量:process.env.NODE_ENV。值为:testdevelopmentproduction。对应三种环境。
  1. render() {
  2. return (
  3. <div>
  4. <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
  5. <form>
  6. <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
  7. </form>
  8. </div>
  9. );
  10. }
  11. 复制代码

在开发环境,该页面渲染为:

  1. <div>
  2. <small>You are running this application in <b>development</b> mode.</small>
  3. <form>
  4. <input type="hidden" value="abcdef" />
  5. </form>
  6. </div>
  7. 复制代码

十五 测试

返回目录

Create React App 使用 Jest 作为其测试运行器。

但是很不幸的是,工作中并没有用上,估计以后的工作也可能不会用上,所以咱们只需要知道有这回事,等有机会再进行尝试。

  • 参考文献:
  1. 运行测试 - Create React App 中文文档
  2. 调试测试 - Create React App 中文文档

十六 开发环境代理

返回目录

在开发项目的过程中,最担心的莫过于浏览器告诉你跨域了:后端端口在 4000,或者主机在另一个 IP 地址……

所以,我们需要在开发环境中配置代理。

嗯,你问为什么生产(部署)环境我们不做代理?因为那属于后端的活了,或许你是个 全栈 工程师,你可以自行解决下。

往 package.json 中添加字段:

package.json

  1. "proxy": "http://localhost:4000",
  2. 复制代码

这样当你调用接口:fetch('/api/todos') 时,它会请求代理到 http://localhost:4000/api/todos


当然,有可能 proxy 不够灵活,小伙伴们可以尝试通过直接访问 Express,并连接项目的代理中间件,详情看参考文献。

  • 参考文献:
  1. 在开发环境中代理 API 请求 - Create React App 中文文档
  2. 手动配置代理 - Create React App 中文文档

十七 使用 Ajax 请求获取数据

返回目录

在 Create React App 中,可以通过下面两种方法获取 Ajax 数据:

  1. fetch() API
  2. axios

当然,没有限制死必须使用这两种。

这两种调用 Ajax 请求获取数据的方式便捷在它返回 Promise 供链式调用数据。

十八 Title 和 Meta

返回目录

  • 动态更新 Title:document.title API
  • 根据 React 组件更改 Title:React Helmet 等第三方库
  • 动态更新 Meta:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta property="og:title" content="__OG_TITLE__">
  5. <meta property="og:description" content="__OG_DESCRIPTION__">
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. 复制代码

然后读取 index.html 并将 __OG_TITLE____OG_DESCRIPTION__ 替换掉即可。

十九 总结

返回目录

react-create-app 构建react项目的流程以及需要注意的地方的更多相关文章

  1. [React] Create and import React components with Markdown using MDXC

    In this lesson I demonstrate how to use the library MDXC to create and import React components with ...

  2. react create app ,nginx服务器配置

    server{ listen 80; server_name www.domain.com domain.com; location ~* \.js$ { root /home/hard/Projec ...

  3. 利用 Create React Native App 创建 React Native 应用

    $ npm i -g create-react-native-app $ create-react-native-app my-project $ cd my-project $ npm start

  4. 使用npm构建前端项目基本流程

    现在各种前端框架, 库文件基本都托管到npm上, 我们平常下载到别人的项目文件, 也基本是用npm 构建的, 不了解点node和npm那是寸步难行. 下面介绍的代码示例不敢说是最佳实践, 但都是我亲自 ...

  5. 手动构建Servlet项目的流程

    前面讨论过手动建立jsp的项目,jsp是tomcat服务器负责编译执行,所以配置相对简单,而Servlet需要先把java源文件编译成字节码class文件,然后再执行,所以需要servlet-api. ...

  6. 构建Springboot项目、实现简单的输出功能、将项目打包成可以执行的JAR包(详细图解过程)

    1.构建SpringBoot项目 大致流程 1.新建工程 2.选择环境配置.jdk版本 3.选择 依赖(可省略.后续要手动在pom文件写) 4.项目名 1.1 图解建立过程 1.2 项目结构 友情提示 ...

  7. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  8. 使用 Dawn 构建 React 项目

    开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及及进行 jsx 语法的转义.当然也可以用 cre ...

  9. webpack构建react项目(一)

    前言 下面是我们使用到技术栈: webpack + react + redux + react-router + react-thunk + ES6 + .... 注意事项: 建议使用npm5.X 或 ...

随机推荐

  1. css3 --linear-gradient-渐变色

    //由上至下变色 background:-moz-linear-gradient( top,#f9b347,#f4ad40,#f9b347);  background:-webkit-gradient ...

  2. java添加菜单项目

  3. H5采集pcm流转换采样率实时发送到服务端

    function startTalk(ws2, button) { var arrBuffer = new ArrayBuffer(320 * 2); var sendBuffer = new Dat ...

  4. (Swiftmailer)高效的PHP邮件发送库

    Swiftmailer是一个类似PHPMailer邮件发送组件,它也支持HTML格式.附件发送,但它发送效率相当高,成功率也非常高,很多PHP框架都集成了Swiftmailer. Swiftmaile ...

  5. BERT(Bidirectional Encoder Representations from Transformers)

    BERT的新语言表示模型,它代表Transformer的双向编码器表示.与最近的其他语言表示模型不同,BERT旨在通过联合调节所有层中的上下文来预先训练深度双向表示.因此,预训练的BERT表示可以通过 ...

  6. SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页

    SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页 **SpringBoot+Mybatis使用Pagehelper分页插件自动分页,非常好用,不用在自己去计算和组装了. ...

  7. 逻辑回归 vs 决策树 vs 支持向量机(I)

    原文链接:http://www.edvancer.in/logistic-regression-vs-decision-trees-vs-svm-part1/ 分类问题是我们在各个行业的商业业务中遇到 ...

  8. Https,Http,TCP,IP的一些理解

    网络模型分为7层,应用层,表现层,会话层,传输层,网络层,链路层,物理层,每一层有很多不同的协议. http:属于应用层的协议,负责的是数据以什么结构传输也可以说成是打包成什么样子 SSL/TLS:属 ...

  9. Servlet的创建二以及生命周期

    之前说Servlet可以通过实现Servlet接口来创建,但是我们看到了,需要重写该接口中的所有方法. 创建方式二:Servlet的创建还可以继承抽象类GenericServlet并重写其中的抽象方法 ...

  10. Xaml引用图片路径的方式

    最近写代码的时候遇到过好几次引用某个路径下图片资源的情况,思索了一下,便将自己所知的在xaml里引用图片资源的方法写成了个小Demo,并完成了这篇博文.希望罗列出的这些方式能够对大家有所帮助. Xam ...