React Study - Create React App

栏目: 服务器 · 发布时间: 8个月前

来源: juejin.im

本文转载自:https://juejin.im/post/5cc11f9c6fb9a0321437649a,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

create by jsliang on 2019-04-24 11:36:57

Recently revised in 2019-04-25 10:44:54

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

一 目录

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

目录

二 前言

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

四 默认支持特性

  • 支持所有现代浏览器(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
{
  "version": "0.2.0",
  "configurations": [
    
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
复制代码
  1. 保存 -> 开始调试
  2. 通过上述步骤即可开始调试

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

六 分析包大小

使用 source maps 分析 JavaScript 包。

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

npm i source-map-explorer -S
package.json
"scripts": {
  "analyze": "source-map-explorer build/static/js/main.*",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
}
复制代码
npm run build
npm run analyze

七 模块引入 CSS

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

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // 将 css modules 文件导入为 styles
import './another-stylesheet.css'; // 导入常规 CSS 文件

class Button extends Component {
  render() {
    // 作为 js 对象引用
    return <button className={styles.error}>Error Button</button>;
  }
}
复制代码

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

八 Sass 安装及使用

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

九 添加图片、背景、SVG

  1. 添加图片:通过 import 引入即可。
import React from 'react';
import logo from './logo.png'; // 告诉 Webpack 这个 JS 文件使用了这个图片

console.log(logo); // /logo.84287d09.png

function Header() {
  // 导入结果是图片的 URL 
  return <img src={logo} alt="Logo" />;
}

export default Header;
复制代码
  1. 引用背景:通过 url 引用即可。
.logo {
  background-image: url(./logo.png);
}
复制代码
  1. 引用 SVG:
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;
复制代码

或者:

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

十 public 文件夹

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

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

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

10.1 引用静态资源

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

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

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

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

在 JavaScript 中:

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

这样也会引用 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 来进行代码的分割。

使用方式:

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);
复制代码
  • 参考文献:
  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,所以可以尝试使用:

  • 安装: npm i react-router-dom -S
  • 使用:React Router

十四 自定义环境变量

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

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

<div>
  <small>You are running this application in <b>development</b> mode.</small>
  <form>
    <input type="hidden" value="abcdef" />
  </form>
</div>
复制代码

十五 测试

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

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

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

十六 开发环境代理

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

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

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

往 package.json 中添加字段:

package.json
"proxy": "http://localhost:4000",
复制代码

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

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

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

十七 使用 Ajax 请求获取数据

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

fetch()
axios

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

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

十八 Title 和 Meta

document.title
React Helmet
<!doctype html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__">
    <meta property="og:description" content="__OG_DESCRIPTION__">
  </head>

  <body>
  
  </body>
</html>
复制代码

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

十九 总结

  • 关于照抄 Create React App

有必要吗?有必要,也没有必要。

有必要是因为 好记性不如烂笔头 ,自己敲一遍可以加深点点记忆,而且中文文档的翻译比较哆嗦,所以总结起来看着方便。

没必要是因为大部分都在 Create React App 的中文文档/英文文档中都有提示,所以一些小伙伴可能在下面 ** 了。

whatever, just record.

  • 关于前端学习
  1. 昨天微信群一位小伙伴询问有没有购买慕课网的 TS 重构 Axios 视频
  2. 昨天票圈一位小伙伴推荐 Koa 源码剖析视频

只能说,各自有各自的安排。

但是,千万千万不要随大流,能用到工作的知识才是 有用知识

如果这些知识对你目前的工作,或者甚至以后的工作毫无帮助,请忽视它,无论它在前端圈子有多热闹。

  • 关于 jsliang
  1. 将 React 及其周边技术的官方文档过一遍
  2. 进行自己构思的项目实战
  3. 跟随公司项目进行大量操练
  4. 进一步剖析 React 源码
  5. 学习算法和数据结构
  6. 再说……

jsliang广告推送:

也许小伙伴想了解下云服务器

或者小伙伴想买一台云服务器

或者小伙伴需要续费云服务器

欢迎点击 服务器 推广 查看!

React Study - Create React App
React Study - Create React App

React Study - Create React App

jsliang 的文档库梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。

基于 github.com/LiangJunron… 上的作品创作。

本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


为你推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入React技术栈

深入React技术栈

陈屹 / 人民邮电出版社 / 2016-11-1 / CNY 79.00

全面讲述React技术栈的第一本原创图书,pure render专栏主创倾力打造 覆盖React、Flux、Redux及可视化,帮助开发者在实践中深入理解技术和源码 前端组件化主流解决方案,一本书玩转React“全家桶” 本书讲解了非常多的内容,不仅介绍了面向普通用户的API、应用架构和周边工具,还深入介绍了底层实现。此外,本书非常重视实战,每一节都有实际的例子,细节丰富。我从这......一起来看看 《深入React技术栈》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具