如何开发由Create-React-App 引导的应用(一)
此文章是翻译How to develop apps bootstrapped with Create React App 官方文档
系列文章
- 如何开发由Create-React-App 引导的应用
- 如何开发由Create-React-App 引导的应用(二)
- 如何开发由Create-React-App 引导的应用(三)
- 如何开发由Create-React-App 引导的应用(四)
Updating to New Release
Creat React App 分成两个包:
create-react-app
是用于创建新项目的全局命令行工具。react-scripts
是在新建项目中的开发依赖。
几乎不需要更新create-react-app
自身:它将所有的设置委托给了react-scripts
。
当你运行create-react-app
时,它总是使用react-scripts
的最新版本来创建项目,以便你自动获得所有的新特性和改进。
要将现有项目更新为react-scripts
的最新版本,打开更新日志,找到你当前正在用的版本(可以在package.json
中找到),按照最新版本的迁移说明来操作。
在大多数情况下,更改packages.json
中react-scripts
的版本号,然后运行npm install
应该就可以了,但是对于潜在的重大变化,请参考更新日志。
我们致力于保持最小的重大变化,从而可以无痛的升级react-scripts
。
Sending Feedback
我们总是关注您的反馈。
Folder Structure
创建完成后,你的项目应该看上去像这样:
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
logo.svg
对于要构建的项目,这些文件必须存在:
public/index.html
是页面模版;src/index.js
是JavaScript 入门点。
你可以删除或重命名其它的文件。
你可以在src
中创建子目录。为了更快的重构,只有位于src
中的文件会被Webpack 处理。
你需要将任何JS 和CSS 放到src
中,否则Webpack 将不会处理。
public/index.html
只能使用public
中的文件。
阅读使用JavaScript 和HTML 资源的说明。
但是,你可以创建更多的顶级目录。
它们不会被包含在生产版本中,因此你可以将它们用于文档说明等。
Available Scripts
在项目目录中,你可以运行:
npm start
在开发模式下运行应用。
打开 http://localhost:3000 在浏览器中查看。
如果你进行了修改,页面将重新加载。
你还可以在控制台中看到lint error。
npm test
在交互观察者模式下,启动test runner。
更多信息请参考running tests 章节。
npm run build
构建生产版本应用到build 文件夹。
它在生产模式下正确地绑定了React,并且优化了构建以获得最佳性能。
构建是minified 并且文件名包含哈希值。
你的应用已经准备好部署了!
更多信息请参考deployment 章节。
npm run eject
注意:这是一个单向操作。一旦你eject
,你不能返回!
如果你对构建工具和配置选项不满意,你可以运行eject
。此命令将从项目中删除单个构建依赖。
相反,它会将所有配置文件和转变的依赖(Webpack、Babel、ESLint 等)复制到你的项目中,所以你可以完全控制它们。除了eject
外所有的命令仍将其作用,但它们将指向复制的脚本,以便你调整它们。在这一点,完全看你自己。
你不必使用eject
。The curated feature set 适用于中小型部署。但是我们明白,当你准备使用这个工具时,如果你不能自定义它,则它将没有用。
Supported Language Features and Polyfills
这个项目支持最新JavaScript 标准的超集。
除了ES6 语法,它还支持:
- Exponentiation Operator(ES2016)
- Async/await(ES2017)
- Object Rest/Spread Properites(stage 3 proposal)
- Class Field and Static Properties(stage 3 proposal)
- JSX 和 Flow 语法
学习更多关于不同提案阶段。
虽然我们建议你谨慎使用这些实验性提案,但Facebook 在产品代码中大量使用这些功能,因此,如果将来这些提案发生变化,我吗将提供codemods。
注意这个项目只包括几个ES6polyfills:
如果你使用任何需要运行时支持的ES6+ 特性(像Array.from()
或Symbol
),确保你手动添加了合适的polyfill,或者你的目标浏览器已经支持它们了。
Syntax Highlighting in the Editor
要在你喜欢的文本编辑器中配置语法高亮,前往相关的Babel 文档说明页,然后按照说明操作。包含大部分流行的编辑器。
Displaying Lint Output in the Editor
注意:这个特性需呀
react-scripts@0.2.0
或更高。
一些编辑器,包括Sublime Text、Atom 和Visual Studio Code 提供了ESLint 插件。
对于linting 它们不是必须要的。你会在终端以及浏览器控制台中看到linter 输出。但是,如果你喜欢在编辑器中显示lint 结果,则需要执行一些额外的操作。
首先,你需要为你的编辑器安装ESLint 插件。
Atom 用户使用
linter-eslint
笔记
如果你正在使用Atomlinter-eslint
插件,确保 Use global ESLint installation 选项已经选中:
Visual Studio Code 用户
VS Code ESLint 插件会自动侦测Create React App 的配置文件。所以你不需要在根目录下创建eslintrc.json
文件,除非你想要添加你自己的规则。在这种情况下,你应该包含CRA 的配置,通过添加下面这行:
{
// ...
"extends": "react-app"
}
然后将下面这块代码添加到你的项目中的package.json
文件中
{
//...
"eslintConfig": {
"extends": "react-app"
}
}
最后,你需要全局安装一些包:
npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-flowtype@2.21.0
我们认识到这是次优的,由于我们隐藏ESLint 依赖的方式,它目前是必须的。ESLint 团队已经在为此提供解决方案,因此在几个月内可以会变得不必要。
Debugging in the Editor
这个特性目前只有Visual Studio Code编辑器支持。
Visual Studio Code 支持实时编辑和调试,使用Create React App 开箱即用。这能够使你作为一个开发者不需要离开编辑器就可以进行编写和调试你的React 代码,最重要的是它可以让您拥有持续的开发工作流程,其中上下文切换是最小的,因为你不必在不同工具之间进行切换。
你需要确保VS Code 是最新版本,并且VS Code 的Chrome Debugger Extension 已经安装了。
然后将下面代码添加到你的launch.json
文件,并将其放到你的应用根目录下的.vscode
文件夹中。
{
"version": "0.2.0",
"configurations": [{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}]
}
运行npm start
启动你的应用,按F5
或点击绿色debug 图标在VS Code 中调试。现在你可以写代码、设置断点、修改代码以及调试你最新修改的代码--所有都在你的编辑器中实现。
Changing the Page title
你可以在生成项目的public
文件夹下知道源HTML 文件。你可以编辑<title>
标签,把“React App” 标题改为其他任何东西。
请注意,通常你不会经常在public
目录下编辑文件。例如,可以在不更改HTML 情况下,添加CSS 文件。
如果你需要根据内容来动态更新页面的标题,你可以使用浏览器的document.title API。对于要从React 组件更改标题的更复杂的场景,可以使用React Helmet 这个第三方库。
在生产环境中,你为自己的应用使用自定义服务器,要将标题在发送到浏览器之前修改,你可以遵循本章 建议。或者,你可以预构建每一个页面为静态HTML 文件,然后加载JavaScript 包,将在这里介绍。
Installing a Dependency
生成的项目中包括React 和ReactDOM 依赖。它也包括Create React App 使用的一组脚本作为开发依赖。你也可以使用npm
安装其它的依赖(例如,React Router):
npm install --save <library-name>
如何开发由Create-React-App 引导的应用(一)的更多相关文章
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- create react app遇到的问题
我现在想的是吧 static 资源和动态 api 来分开处理, static 资源开启 nginx 服务器,api 请求由 express 完成, 现在的问题是开发的时候 proxy 设定将所有的请求 ...
随机推荐
- struts2 使用filter解决中文乱码问题
1.编写fliter的代码 import java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterChai ...
- Spark监控官方文档学习笔记
任务的监控和使用 有几种方式监控spark应用:Web UI,指标和外部方法 Web接口 每个SparkContext都会启动一个web UI,默认是4040端口,用来展示一些信息: 一系列调度的st ...
- 解决反序列化(Deserialize)无法找到程序集的错误
http://blog.csdn.net/w_s_q/article/details/5677536 在使用.NET序列化对象时,会将程序集信息也包含进去.如果将序列化之后的字节数组通过网络(或其他传 ...
- javascript中对象字面量与数组字面量
第一部分 我们知道JavaScript中的数据类型有基本数据类型和引用类型,其中Object类型就是非常常用的类型.那么如果创建一个Object类型的实例呢?下面我介绍两种方法: 第一:构造函数法. ...
- Android动画(二)-属性动画
我们在上一篇博客中,讨论了视图动画与帧动画.那么这节课则要讨论更复杂,更强大的Property animation(属性动画). 视图动画使用简单,但是功能也简单.(只有那四种功能).并且也不改变Vi ...
- 微信小程序开发之scroll-view
本文主要介绍通过scroll-view实现回至顶部,如下效果 一.页面代码 顶部的工具栏放一个查找按钮,滚动区域实现分页,目的就是为了点击上一页\下一页时,自动回到顶部. scroll-view必须指 ...
- 关于 jar 包数据更新的问题
参考: 人乐草心的博文 如果要更新一个 jar 包内文件的一些信息,又不想重新编译,发包,可以如下操作. Extract JAR file unzip 拆包方式 unzip xxx.jar [ -d ...
- 为什么很多第三方接口,都改成了基于http,直接传递json数据的方式来代替webservice?
这实际上是三个问题,从WebService到今天流行的RESTful API(JSON) over HTTP,经历了数次变革 1 WebService有很多协议,为什么HTTP比较流行? WebSer ...
- SSM框架开发web项目系列(五) Spring集成MyBatis
前言 在前面的MyBatis部分内容中,我们已经可以独立的基于MyBatis构建一个数据库访问层应用,但是在实际的项目开发中,我们的程序不会这么简单,层次也更加复杂,除了这里说到的持久层,还有业务逻辑 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...