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

添加图片,字体和文件

使用 Webpack,添加图片和字体等静态资源的工作方式与 CSS 类似。

你可以 直接在 JavaScript 模块中 import 文件。 这会告诉 Webpack 将该文件包含在 bundle(包) 中。 与 CSS 导入不同,导入文件会为你提供字符串值。 此值是你可以在代码中引用的最终路径,例如 image 的 src 属性或链接到 PDF 的 href 属性。

要减少对服务器的请求数,导入小于 10,000 字节的图片将返回 data URI 而不是路径。 这适用于以下文件扩展名:bmp ,gif ,jpg ,jpeg 和 png 。 由于 #1153 ,SVG文件被排除在外。

例如:

import React from 'react';
import logo from './logo.png'; // 告诉 Webpack 这个 JS 文件使用了这个图片

console.log(logo); // /logo.84287d09.png

function Header() {
  // 导入结果是图片的 URL 
  return <img src={logo} alt="Logo" />;
}

export default Header;

这确保了在构建项目时,Webpack 可以正确地将该图片移动到构建文件夹中,并为我们提供正确的路径。

这也适用于 CSS :

.Logo {
  background-image: url(./logo.png);
}

Webpack 在 CSS 中找到所有相关模块引用(它们以 ./ 开头),并用编译后的 bundle(包) 中的最终路径替换它们。如果输入拼写错误或意外删除重要文件,你将看到编译错误信息,就像导入不存在的 JavaScript 模块一样。编译包中的最终文件名由 Webpack 从内容哈希生成。如果文件内容将来发生变化,Webpack 将在生产中为其指定一个不同的名称,因此你无需担心这些静态资源的长期缓存。

请注意,这也是 Webpack 的自定义功能。

React 不需要它,但许多人喜欢它( React Native 使用类似的图片机制)。
处理静态资源的另一种方法将在下一节中介绍。

添加 SVG

注意:此功能适用于 react-scripts@2.0.0 及更高版本。

上面的部分介绍了添加 SVG 文件的一种方法。你还可以直接导入 SVG 作为 React 组件。你可以使用这两种方法中的任何一种。在你的代码中,它看起来像这样:

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo 是一个实际的 React 组件 */}
    <Logo />
  </div>
);

如果你不想将 SVG 作为单独的文件加载,这很方便。不要忘记导入中的花括号! ReactComponent 导入名称是特殊的,它告诉 Create React App 你想要一个渲染 SVG 的 React 组件,而不是它的文件名。

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