Getting Started

——创建一个React App的多种方式

Quick Start

三条指令快速创建一个项目并运行

npx create-react-app my-app
cd my-app
npm start

！注意： 非全局安装create-react-app可以保证npx总是最新的版本。

Get Started Immediately

内置的环境工具如webpack和Babel，无需额外安装。

Createing an App

新建项目时可供选择的一些细节。

Methods

npx

npx create-react-app my-app

npm

npm init react-app my-app

yarn

yarn create react-app my-app

Selecting a template

可以指定create-react-app以什么模板创建新项目，模板可选择可自定义。

Selecting a package manager

npm或者yarn，取决于新建项目时使用的命令脚本。

Output

项目创建后生成初始的项目结构，安装一些基础的依赖。项目结构如下所示：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src├── App.css├── App.js├── App.test.js├── index.css├── index.js├── logo.svg├── serviceWorker.js└── setupTests.js

Scripts

项目建好后，可以运行一些内置的命令：

npm start 或 yarn start

在开发模式下运行项目。修改代码自动重载，能在命令行窗口看到报错和警告。

npm test 或 yarn test

以交互的方式运行测试监测器。

npm run build 或 yarn build

以生产模式构建项目。用哈希重命名文件名，保证构建最小化，在此之后，项目就可以准备部署。

Folder Structure

——文件结构及文件的介绍说明
文件结构如下：

my-app/README.mdnode_modules/package.jsonpublic/index.htmlfavicon.icosrc/App.cssApp.jsApp.test.jsindex.cssindex.jslogo.svg

以下文件必须存在且不得修改其文件名：

  • public/index.html 是页面模板
  • src/index.js 是js入口

其他文件则可以随意删除或命名。

一般情况下:
①、在src目录下创建子目录，只有在src目录下的文件会被webpack处理，因此所有的js和css文件都置于src目录下；
②、只有在public目录下的文件才能被public/index.html 引用；
③、可以创建其他与src和public平级的目录，此类目录在生产环境构建时不会被囊括进去；

Available Scripts

——在项目中可以运行的脚本命令

npm start

npm test

npm run build

npm run eject

Supported Browsers and Features

——支持的浏览器和语言特性

Supported Browsers

默认项目能在所有现代浏览器上运行，IE9，10，11 则需要一些垫片的支持。

Supported Language Features

项目能支持最新的js特性，但应用实验性的协议时需谨小慎微，项目默认是不包含任何垫片的。如果项目应用了ES6中的运行时特性，请确保手动添加了所需的垫片或者确保运行浏览器能支持这种特性。

Configuring Supported Browsers

项目默认会在package.json文件中包含 browserslist 配置项，该配置项控制output的js代码能够兼容具体的浏览器。其中production 属性在构建项目时生效，development 属性在开发环境中生效。可以根据项目将部署在具体哪种浏览器中配置browserslist 。

Updating to New Releases

——如何更新已有的就项目到最新的React版本

Setting Up Your Editor

——做好开发工具相关的前置工作

Syntax highlighting

各个开发工具都有一些代码语法高亮工具。

Displaying Lint Output in the Editor

ESLint插件能够展示warnings 和 error在开发工具中，你还可以定制自己的ESLint config。

Extending or replacing the default ESLint config

一堆高级的配置建议以及看不懂不遵守的后果。

Debugging in the Editor

VSCode 和 WebStorm支持开发者能够在开发工具中进行debug而不用离开当前界面，保证了一个连续的开发工作体验。这两个平台各自需要一些配置，稍微涉略一下VSCode如何配置。

Formatting Code Automatically

Prettier可以规范js，css，和json的格式。
，应用Prettier可以让你的代码自动地符合团队开发要求的规范。
接下来介绍了如何配置这些formatter以及它们在代码开发中的什么阶段发挥作用。

Developing Components in Isolation

——不把组件添加到app.js也能查看组件效果的方法：Storybook for React 和 React Styleguidist
以下是这两个工具的配置和使用。

Analyzing the Bundle Size

Using HTTPs in Development

Adding a Stylesheet

——添加css的新方式
使用 webpack setup的项目同时使用 webpack 管理所有的文件，webpack 提供了一种客制化的方式使得你可以使用import 在js文件中导入css文件。这样做免不了在其他不是用webpack构建的环境中项目无法顺畅地运行，但是更多的开发者觉得这种做法比较方便。

Adding a CSS Modules Stylesheet

项目支持CSS Module 和常规样式表同时使用的方式。CSS Module 通过在样式名后追加hash值得方式达到同文件中同类名样式也不会冲突。

【笔记】Create React APP 文档略读相关推荐

  1. Create React App proxy配置

    最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...

  2. 深入浅出 Create React App

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. 如何使用Create React App DevOps自动化工作中所有无聊的部分

    by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...

  4. 【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）

    基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...

  5. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...

  6. Create React App 2.0 华丽登场

    贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...

  7. 商城前后端原型、商城prd文档、商城后台管理系统、商城app文档、电商需求文档、限时秒杀、电商平台、促销助力、拼团抽奖、电商文档、prd文档、电商前后端原型、电商原型、Axure电商系统、rp原型

    商城前后端.商城prd文档.商城后台管理系统.商城app文档.电商需求文档.限时秒杀.电商平台.促销助力.拼团抽奖.电商文档.prd文档.电商前后端原型.电商原型.Axure电商系统.rp原型 Axu ...

  8. Create React App 2.0 正式发布：Babel 7、webpack 4 等

    英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...

  9. 【学习笔记】Windows格式文档转换成Unix格式

    [学习笔记]Windows格式文档转换成Unix格式 我们有时候需要将文档格式从Windows格式转换成Unix格式,Windows下换行是\r\n,而Unix下换行是\n,所以只需要将文档中的\r去 ...

最新文章

  1. UNIX中的Select函数
  2. 图解Numpy的tile函数
  3. 节点操作-创建并添加删除节点替换克隆节点
  4. python的datetime举例_Python datetime.timedelta()用法及代码示例
  5. dp按照规模分类总结
  6. java调用打印机打印excel linux_手把手教你嵌入式Linux系统驱动hp1020打印机
  7. bgll算法 matlab,一种复杂网络社区检测的方法与流程
  8. 12.04 安装svn
  9. uva 10562 Undraw the Trees
  10. ubuntu14.04 server 安装docker
  11. 《越狱》的中国隐秘流行
  12. 记事本编写java_编写运行最简单的java程序——使用记事本编写java程序
  13. java poi操作word转pdf
  14. swagger常用注解
  15. matlab保存f黑白图片_MATLAB的矩阵运算与重构
  16. 弹出USB大容量存储设备时出问题 的解决方法
  17. ONLYOFFICE文档转换开发技术
  18. 然后查看服务器运行情况,netstat命令查看服务器运行情况
  19. mysql中selec sum返回null的解决方法
  20. 大话西游2同一个账号同一个服务器,大话西游2：一个服务器的火爆程度究竟是由什么决定...

热门文章

  1. 计算机缺少更新,电脑更新系统出现文件丢失或者损坏无法安装怎么办 | 学客联盟...
  2. 真正实现网络下载，文件不落地.解决XmlHttp对象、winnet.dll、URLDownloadToFile生成的ie缓存(Hook_CreateFileW阻止缓存生成)
  3. POJ1149 PIGS 题解
  4. 网盘、云盘共享文件搜索引擎链接收藏目录
  5. 开发webgl应用时，cesium快速定位相机角度、相机位置的方法
  6. 英语时态：一般、否定疑问句、现表将来
  7. 新建vue-cli项目body与页面边框存在间隙
  8. 第二十三章 SQL函数 CAST（二）
  9. 公众号自动回复不生效php,php,微信公众平台开发者_微信公众号开发者自动回复设置没反应，php,微信公众平台开发者 - phpStudy...
  10. 为什么显示服务器升级中,手机老是显示服务器升级中