Create React App 中文文档

Create React App 中文文档

  • 快速入门
  • 帮助
  • GitHub

›样式和资源

Welcome

  • 关于文档

快速入门

  • 入门
  • 文件夹结构
  • 可用的 Scripts
  • 支持的浏览器和特性
  • 更新到新版本

开发

  • 编辑器设置
  • 隔离开发组件
  • 分析 Bundle (包) 大小
  • 在开发环境中使用 HTTPS

样式和资源

  • 添加一个样式表
  • 添加 CSS Modules
  • 添加 Sass
  • PostCSS(后处理 CSS)
  • 添加图片,字体和文件
  • 使用 public 文件夹
  • 代码拆分(Code Splitting)

构建 App

  • 安装依赖项
  • 导入组件
  • 使用全局变量
  • 添加 Bootstrap
  • 添加 Flow
  • 添加 TypeScript
  • 添加 Relay
  • 添加 Router(路由)
  • 环境变量
  • 制作渐进式 Web 应用程序(PWA)
  • 创建生产构建

测试

  • 运行测试
  • 调试测试

后端集成

  • 在开发环境中代理 API 请求
  • 使用AJAX请求获取数据
  • 集成后端 API
  • Title & Meta 标签

部署

  • 部署

高级用法

  • 我可以使用 Decorators 吗?
  • 预渲染静态 HTML
  • 高级配置
  • Ejecting 的替代方案

支持

  • 故障排除
Edit

PostCSS(后处理 CSS)

Create React App 会压缩你的 CSS 并通过 Autoprefixer 自动添加浏览器前缀,因此你无需担心它。

支持全新CSS 特性,all 属性, break 属性, 自定义属性, and 媒体查询范围 会自动进行 polyfill,以添加对旧版浏览器的支持。

你可以根据 Browserslist 规范 调整 package.json 中的 browserslist 来自定义目标支持浏览器。

例如,这个样式:

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

将变成:

.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

如果由于某种原因需要禁用 Autoprefixer,请 按照本节进行操作 。

默认情况下 禁用了 CSS Grid(网格) 布局 前缀,但不会删除手动前缀。 如果你想选择加入 CSS Grid(网格) 前缀,请先 熟悉一下它的局限性。
要启用 CSS Grid(网格) 前缀,请将 /* autoprefixer grid: on */ 添加到 CSS 文件的顶部。

← PreviousNext →
Create React App 中文文档
文档
快速入门学习 React
社区
Stack OverflowSpectrumTwitter
更多
GitHubStar
Facebook Open Source
Copyright © 2018 Facebook Inc.