facebook create-react-app 创建react脚手架

原创 枫lwlw 随笔 react 172阅读 2018-01-19 10:04:01 举报

快速安装:#####
npm install create-react-app -g
create-react-app my-app
cd my-app
npm start
默认打开的连接地址是http://localhost:3000/

用户指南:

[ol]
[li]更新新版本[/li]
[li]目录结构[/li]
[li]可用的scripts[/li]
[li]支持浏览器[/li]
[li]支持语言特新和Polyfills(Supported Language Features and Polyfills)[/li]
[li]语法高亮显示的编辑器(Syntax Highlighting in the Editor)[/li]
[li] 编辑器eslint验证(Displaying Lint Output in the Editor) [/li]
[li]编辑器debuuger调试(Debugging in the Editor)[/li]
[li]改变网页的标题(Changing the Page <title>)[/li]
[li]安装依赖[/li]
[li]引进组件(Importing a Component)[/li]
[li]代码分离(Code Splitting)[/li]
[li]添加样式(Adding a Stylesheet)[/li]
[li]处理后的代码(Post-Processing CSS)[/li]
[li]预编译css(Adding a CSS Preprocessor (Sass, Less etc.))[/li]
[li]添加图片,字体和文件(Adding Images, Fonts, and Files)[/li]
[li]使用公用文档中的文件(Using the public Folder)[/li]
[li]使用全局变量(Using Global Variables)[/li]
[li]添加bootstrap(Adding Bootstrap)[/li]
[li]Flow布局(Adding Flow)[/li]
[li]添加路由器(Adding a Router)[/li]
[li]添加自定义环境变量(Adding Custom Environment Variables)[/li]
[li]我们能用修饰吗?(Can I Use Decorators)[/li]
[li]在开发中代理API请求。(Proxying API Requests in Development)[/li]
[li]在开发使用HTTPS(Using HTTPS in Development)[/li]
[li]在服务器上生成动态的<meta>标记。(Generating Dynamic <meta> Tags on the Server)[/li]
[li]预渲染成静态HTML文件。(Pre-Rendering into Static HTML Files)[/li]
[li]运行测试(Running Tests)[/li]
[li]调试测试(Debugging Tests)[/li]
[li]发展中组件隔离(Developing Components in Isolation)[/li]
[li]发布组件npm(Publishing Components to npm)[/li]
[li]制作一个进步的网络应用程序。(Making a Progressive Web App)[/li]
[li]分析包的大小(Analyzing the Bundle Size)[/li]
[li]部署(Deployment)[/li]
[li]高级配置(Advanced Configuration)[/li]
[li]故障排除(Troubleshooting)[/li]

[/ol]

更新新版本

创建APP主要的两个包:
1、create-react-app 全局的包,不需要更新,在创建APP是会自动安装最新的react-scripts
2、react-scripts 可以单独的更新,更新方法:打开open the changelog,找到最新的版本号,在APP项目中的package.json文件中找到react-scripts,将版本号更改成你要更新的版本号,再次安装(npm install);

目录结构

my-app/
README.md
node_modules/
package.json
public/
index.html ---页面模板
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js ---js入口
logo.svg

可以在src中创建子目录,为了更快的重构和处理src中的文件,一般用webpack打包处理
[#####b]可用的scripts
npm start ---应用程序在开发模式下运行(http://localhost:3000
npm test --- 启动交互式观察模式的测试运行器
npm run build --- 将APP打包到build文件夹中在生产环境中

支持浏览器

支持ie9及以上版本

支持语言特新和Polyfills(Supported Language Features and Polyfills)

[ul]
[li] Exponentiation Operator (ES2016).[/li]
[li] Async/await (ES2017).[/li]
[li]Object Rest/Spread Properties (stage 3 proposal).[/li]
[li]Dynamic import() (stage 3 proposal)[/li]
[li]Class Fields and Static Properties (part of stage 3 proposal).[/li]
[li]JSX and Flow syntax.[/li]
[/ul]
注意,该项目只包括几个ES6 polyfills:
[ul]
[li]Object.assign()via object-assign.[/li]
[li]Promise via promise.[/li]
[li]fetch() via whatwg-fetch.[/li]
[/ul]

编辑器eslint验证

首先你需要在编辑器中安装eslint插件,然后在项目的根目录下创建.eslintrc文件,代码如下:
json 代码

详细请参考eslint官网
它只影响你的编辑器,不会影响浏览器和终端的输出。
如果你想为你的项目执行一个编码风格,可以考虑使用更Prettier,而不是ESLint样式规则

编辑器debuuger调试

仅支持Visual Studio CodeWebStorm.
Visual Studio Code(主要介绍)
你需要安装最新版本的vscode和vscode的 Chrome Debugger Extension,在你的根目录下添加一个launch.json文件,文件内容如下:
json 代码

项目npm start启动时,按F5,进行调试。

改变网页的标题

可以用浏览器的API: document.title,复杂情况下也可以用组件React Helmet或则react-document-title(我常用的组件)
安装依赖
例如 npm install --save react-router
引进组件
例如:
Button.js
javascript 代码

DangerButton.js
javascript 代码

添加样式
项目使用webpack打包;
例如:
Button.css
css 代码

Button.js
javascript 代码

处理后的代码
项目中添加组件:Autoprefixer,自动补全css代码前缀,不用担心兼容的问题
例如
css 代码

编译后的css:
css 代码

预编译css
npm install --save node-sass-chokidar
package.json文件中的scripts添加:
"scripts": {

  • "build-css": "node-sass-chokidar src/ -o src/",
  • "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    安装npm-run-all模块后
    package.json文件中的scripts添加:
    "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
  • "start-js": "react-scripts start",
  • "start": "npm-run-all -p watch-css start-js",
  • "build-js": "react-scripts build",
  • "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
    }
    添加图片,字体和文件
    图片大小下雨10000 bytes,图片包含 bmp, gif, jpg, jpeg, and png。 SVG除外
    例如:
    javascript 代码

使用公用文档中的文件(Using the public Folder)
公用文件解决的额问题:
1、你需要一个建立输出文件与一个特定的名称,例如 manifest.webmanifest
2、你有成千上万的动态图像,需要参考他们的路径
3、你想要一个小脚本例如pace.js捆绑之外的代码
4、一些图书馆可能不兼容Webpack你别无选择除了引用<script>标记
添加bootstrap(Adding Bootstrap)
安装:
npm install --save react-bootstrap bootstrap@3
引用:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
Flow布局(Adding Flow)
将流添加到创建反应应用项目,遵循这些步骤:
安装: npm install --save flow-bin (or yarn add flow-bin).
添加 "flow":在package.json文件的scripts中添加“flow”
运行: npm run flow init (or yarn flow init) 创建一个 .flowconfig 文件在更目录下
添加: // @flow 检查你的代码
添加路由器(Adding a Router)
安装:
npm install --save react-router-dom
基础案例
添加自定义环境变量(Adding Custom Environment Variables)
默认情况下你会NODE_ENV定义,任何其他环境变量从REACT_APP_开始
1)在shell中添加临时变量
Windows (cmd.exe)
javascript 代码

Windows (Powershell)
javascript 代码

Linux, macOS (Bash)
javascript 代码

2)在.env开发环境变量添加
在羡慕的根目录中创建.env文件:
javascript 代码

.文件应该签入到源代码控制系统
其他的.env文件的使用:
.env:默认.
.env.local: 本地重写;除了测试适用于所有的环境
.env.development, .env.test, .env.production: 特殊环境设置.
.env.development.local, .env.test.local, .env.production.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 (note .env.local is missing)

我们能用修饰吗?(Can I Use Decorators)
Create React App不支持目前因为装饰语法。因为:
1、这是一项实验性的建议,并有可能改变。
2、目前的规范版本并没有得到Babel的官方支持。
3、如果规范发生变化,我们将无法编写codemod,因为我们在Facebook内部不使用它们。
当规范进入稳定阶段时,创建React App将添加decorator支持。
1、用AJAX请求获取数据。
2、与API后端集成。
3、node
4、Ruby on Rails
在开发中代理API请求。(Proxying API Requests in Development)
在package.json中添加:
javascript 代码

这种方式,当fetch('/api/todos')的开发,开发服务器将认识到,这不是一个静态的资产,并将代理你的请求到http://localhost:4000 / api /todos 作为后备。开发服务器只会尝试在其Accept标头中向代理发送没有text/html的请求。
代理选项支持HTTP、HTTPS和WebSocket连接。
如果代理选项对您不够灵活,或者您可以:
配置代理自己
在您的服务器上启用CORS(以下是如何实现它的方法)。
使用环境变量将正确的服务器主机和端口注入到您的应用程序中。
手动配置代理
1、首先安装 http-proxy-middleware 或则 http-proxy
npm install --save http-proxy-middleware||http-proxy
2、在package.json中配置
json 代码

左右的请求都会走这里。
如果您需要指定多个代理,那么可以通过指定额外的条目。匹配正则表达式,因此,您可以使用一个正则表达式来匹配多个路径
json 代码

配置websocket代理
设置websocket.io服务
您可以在服务器上使用像html 代码

这样的库,在浏览器中使用原生WebSockets
在package.json 中手动配置websocket服务:
json 代码

在开发使用HTTPS(Using HTTPS in Development)
Windows (cmd.exe)
set HTTPS=true&&npm start
Windows (Powershell)
($env:HTTPS = $true) -and (npm start)
(Note: the lack of whitespace is intentional.)

Linux, macOS (Bash)
HTTPS=true npm start
在服务器上生成动态的<meta>标记。(Generating Dynamic <meta> Tags on the Server)
因为创建React App不支持服务器渲染,你可能会想如何让<meta>标签动态,并反映当前的URL。为了解决这个问题,我们建议将占位符添加到HTML中,如下所示:
html 代码

预渲染成静态HTML文件。(Pre-Rendering into Static HTML Files)
如果您使用静态托管提供程序来托管您的构建,您可以使用react-snapshotreact-snap来为您的应用程序中的每条路由或相关链接生成HTML页面。当JavaScript包加载时,这些页面将无缝地变得活跃或“水化”。
您可以在这里阅读更多关于零配置的预渲染(也称为快照)
制作一个进步的网络应用程序。(Making a Progressive Web App)
默认情况下,生产构建是一个功能齐全的、离线的先进Web应用程序。
先进的Web应用程序比传统的Web页面更快、更可靠,并提供了一种引人入胜的移动体验:
所有静态站点资产都被缓存,以便在随后的访问中快速加载页面,而不考虑网络连接(比如2G或3G)。更新在后台下载。
无论网络状态如何,你的应用程序都可以运行,即使离线。这意味着你的用户将能够在10,000英尺和地铁上使用你的应用。
在移动设备上,你的应用可以直接添加到用户的主界面,app图标等等。您还可以使用web推送通知重新吸引用户。这就消除了对应用程序商店的需求。
sw-precache-webpack-plugin集成到生产配置中,它将负责生成一个服务工作人员文件,该文件将自动预缓存所有本地资产,并在部署更新时保持更新。服务人员将使用cache-first策略来处理所有对本地资产的请求,包括初始的HTML,以确保您的web应用程序可靠地快速,即使是在一个缓慢或不可靠的网络上。

[li]分析包的大小(Analyzing the Bundle Size)[/li]
[li]部署(Deployment)[/li]
npm build 打包代码构建到你的服务器上。
静态服务
服务器是node环境,最简单的处理方法是安装server,让它处理剩下的:
npm install -g serve
serve -s build
最后一个命令所示将静态站点在端口5000上。像许多服务的内部设置,端口可以使用- p或--port
运行这个命令选项的完整列表
serve -h

[li]高级配置(Advanced Configuration)[/li]
[li]故障排除(Troubleshooting)[/li]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复