Create React App

MLtech 等级 869 0 0

Create React App

Create React App

Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app

create-react-app遵循约定优于配置(Coc)的原则,默认配置、项目结构等,让Web开发人员能够快速上手React。

搭建create-react-app:

1. 安装node

  下载链接, 选择适当版本;

  node -v  # 检查node版本

  npm -v  # 检查npm版本

2. 全局安装create-react-app脚手架

  npm install -g create-react-app

3. 创建react app

  create-react-app react-app (该步会比较慢,与网络相关)

  Create React App

4. 查看README.md

5. 运行react app

  npm start

6. 浏览http://localhost:3000/

以上是利用create-react-app来创建react app的步骤。

下面对README.md解读~

(1)当create-react-app升级后,可以只升级react-scripts。步骤可遵循这里

(2)`**public/index.html**`和`**src/index.js**`这两个文件必须存在。Webpack会处理src文件夹里的内容,js,css,html等需要置于src中

(3)已配置好的script:

  1. npm start    -> 开发模式下运行于http://localhost:3000

  2. npm test     -> js测试

  3. npm run build  -> build react app用于生产环境并生成到build文件夹下

(4)支持Debugging的文本编辑器:VSCode,WebStorm

  1. VSCode + Chrome Debugger Extension

    在launch.json中添加如下,(端口号由配置决定)

{ "version": "0.2.0", "configurations": \[{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/src", "sourceMapPathOverrides": { "webpack:///src/\*": "${webRoot}/\*" }
  }\]
}

    启动调试,

Create React App

  2. WebStorm + JetBrains IDE Support(略) 

(5)git commit前代码格式化

  1. 运行 npm install --save husky lint-staged prettier

2. package.json中scripts属性添加 "precommit": "lint-staged"

3. package.json中添加属性lint-staged    

"lint-staged":{ "src/\*\*/\*.{js,jsx,json,css}": \[ "prettier --single-quote --write", "git add" \]
  }

(6)组件,多使用export default component, import component from './component'

(7)建议各个组件有自己的一套css,尽量不复用(Generally, we recommend that you don’t reuse the same CSS classes across different components.)

(8)添加图像、字体、文件

  webpack在build过程中会根据静态资源内容hash,之后重命名静态资源,避免浏览器缓存问题。可以类似import组件的方式import静态资源。  

import React from 'react';
**import logo from** **'./logo.png';** // Tell Webpack this JS file uses this image
 console.log(logo); // **/logo.84287d09.png**

function Header() { // Import result is the URL of your image
  return <img src={**logo**} alt="Logo" />;
}

export default Header;
.Logo { background-image: url(**./logo.png**);
}

 (9)`public`文件夹

  该文件夹中的内容不会被webpack处理,且相互之间访问需使用前缀PUBLIC_URL。  

<link rel\="shortcut icon" href\="%PUBLIC\_URL%/favicon.ico"\>

(10)使用全局变量

const $ = **window.**$;

(11)使用Bootstrap

npm install --save **react-bootstrap** bootstrap@3

react-bootstrap中并没有包含bootstrap的css,因此也需要install bootstrap

src/index.js中,import bootstrap.css

**import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';** // Put any other imports below so that CSS from your // components takes precedence over default styles.

接下来在组件中import bootstrap的组件

import { Navbar, Jumbotron, Button } from 'react-bootstrap';

(12)静态类型检查工具 - Flow

create-react-app集成步骤:  

1\. Run \`npm install --save flow-bin\` (or \`yarn add flow-bin\`). 2\. Add \`"flow": "flow"\` to the \`scripts\` section of your \`package.json\`. 3\. Run \`npm run flow init\` (or \`yarn flow init\`) to create a \[\`.flowconfig\` file\] in the root directory.
4. Add \`// @flow\` to any files you want to type check (for example, to \`src/App.js\`).
 then run \`npm run flow\` (or \`yarn flow\`) to check the files for type errors.

(13)环境变量

1. 在create-react-app中,除了内置的环境变量,如NODE_ENV、PUBLIC_URL外,其余环境变量需要用REACT_APP_作为前缀

2. 在定义了环境变量后,需要重新build才能生效

3. js中访问环境变量,加前缀process.env.

REACT\_APP\_SECRET\_CODE -> **process.env.**REACT\_APP\_SECRET\_CODE

4. 在.env文件中,定义环境变量

在项目根目录下创建.env文件,定义环境变量

Create React App

此外,还有其他env文件,比如.env.local,优先级如下:

\* \`npm start\`: \`.env.development.local\` > \`.env.development\` > \`.env.local\` > \`.env\`
\* \`npm run build\`: \`.env.production.local\` > \`.env.production\` > \`.env.local\` > \`.env\`   
\* \`npm test\`: \`.env.test.local\` > \`.env.test\` > \`.env\`

 ***********

(14)通过ajax获取数据

 React并没有规定如何获取数据,但通常可以使用全局函数fetch()发送ajax请求,解析返回的Promise对象。

(15)开发环境中与后台API整合

目前在各种框架下的前端开发,都会使用webpack, express等作为类似server,占据端口,提供服务,但是后台api的开发与测试也同样需要占据端口。虽然端口各有所用,但是习 惯传统开发的人,不免觉得这样做完全是资源的浪费,毕竟传统开发方式只用一个端口就ok了。

 从react-scripts@0.2.3版本开始,create-react-app提供了proxy字段,用于设置请求后台api时所用到的host和端口。

package.json

"proxy": "http://localhost:4000",

注意点:

  1. proxy字段仅在开发过程中起作用(npm start)

  2. 请求头中accept=text/html将被忽略掉

  3. 可以具体配置proxy增加灵活性

同时,可以配置websocket和https的代理

配置https代理:(当api server提供https服务时)

Windows: 

set HTTPS=true&&npm start

Linux & macOS

HTTPS=true npm start

(16)build后包大小分析

使用source-map-explorer ,步骤如下:

1. install source-map-explorer

npm install --save source-map-explorer

2. 在package.json中的scripts中添加:

"analyze": "source-map-explorer build/static/js/main.\*",

3. 运行命令

npm run build
npm run analyze

 (17)Advanced Configuration

Done!

收藏
评论区

相关推荐

Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
React之集成测试 –测试环境
本章节介绍了可能会影响你测试环境的因素,并包含某些场景下的建议。 测试运行器使用 ,, 等测试运行器能像编写 JavaScript 一样编写测试套件,并将其作为开发过程的环节运行。此外,测试套件也将作为持续集成的环节运行。 Jest 与 React 项目广泛兼容,支持诸如模拟 、 和 等特性。如果你使用 Create React App,且
Angular React Vue我应该选择什么?
2017 年比较 Angular、React、Vue 三剑客 ============================== 为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 [Angular](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.juej
Electron整合React使用搭建开发环境
Electron整合React使用搭建开发环境 ----------------------- **博客说明** > 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! #### 简介 用于构建用户界面的 JavaScript 库 #### 步骤 ##### 首先创建React
RN开发快速切换底部导航时react
目前react-native平台最好用的轮播图组件:[react-native-swiper](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fleecade%2Freact-native-swiper%2F) 最近在项目迭代开发测试中发现一个问题,就是在快速切换
React Developers的10个超实用神奇工具
![](https://oscimg.oschina.net/oscnet/be7e96e371213baf084f2018a5e0ecd1d6e.jpg) ![](https://oscimg.oschina.net/oscnet/d1f601c7e7175b985b1000f935f5e3191f4.jpg) React是一个用于构建用户界面的Jav
React Native 简介:用 JavaScript 搭建 iOS 应用(2)
**【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中,作者介绍通过 React Native 框架构建一个示例应用的开发过程,使得网络技术和移动开发碰撞出绚丽火花!** [React Native 简介:用 JavaScript 搭建 iOS 应用
React Native与ExMobi技术路线探索
随着Facebook陆续开源React Native的iOS和Android版本,这种以JavaScript来开发原生APP的方式在移动应用开发圈里得到广泛关注,虽然React Native并不是第一个采用JavaScript编写原生APP的产品,但是其独特的设计思想和实现方式是非常值得借鉴的。 而作为国内老字号的移动应用开发平台,同样支持开发原生APP
React 安装教程
我是windows系统  提前安装好了node 1.安装好node 不多介绍,百度 2.安装react 根据react 官网提示,在命令提示符输入 npm install -g create-react-app ![](https://oscimg.oschina.net/oscnet/4bf5c4917aa9e45e056654f406955c
React中常见的TypeScript定义使用
前言 -- 在我学习`typescript`时,想在`react`中使用`typescript`写代码,从头开始的时候是懵逼的,因为官方文档并没有使用`typescript`的教程,多是自己在网上查,自己看定义摸索 所以今天把我用过的,总结归纳一下,希望能帮助到同样在摸索的同学 以下代码`react`版本为`16.13.1`,在`create-reac
React前端开发入门与实战
**阿里云大学:[React前端开发入门与实战](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fclick.aliyun.com%2Fm%2F1000010022%2F)** 本课程主要讲解React的基础使用技巧及实战案例。 React 是一个用于构建用户界面的 JavaScript
React学习笔记
**React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。** !
React学习笔记一 ,初始环境搭建
全局安装create-react-app :cnpm install -g create-react-app 创建一个自己的项目my-app: create-react-app my-app 进入项目my-app: cd my-app 运行项目:cnpm start 目录结构如下图: ![](https://static.oschina.net/u
React的Sass配置
React提供的脚手架[creact-react-app](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ffacebook.github.io%2Fcreate-react-app%2Fdocs%2Fadding-a-sass-stylesheet)创建的工程文件不像vue那种暴露出web
React的使用方法(脚手架的方法)
**使用react加脚手架创建一个项目:** * npm install create-react-app -g * create-react-app myapp * cd myapp * yarn start **npx : 帮助我们更方便的找到本地安装的命令** * .\\node\_mo