使用create-react-app(CRA)创建项目

Create React App 是一种官方支持的创建单页 React 应用的方式。它提供了一个现代化的构建设置，无需其他额外的配置。

通过npx使用CRA

如果之前通过 npm install -g create-react-app 全局安装了 create-react-app，建议使用 npm uninstall -g create-react-app 或 yarn global remove create-react-app 卸载该软件包，以确保 npx 始终使用最新版本。

使用如下命令即可通过 CRA 创建项目：

1

npx create-react-app my-app

上述命令会在当前目录下创建名为 my-app 的新项目。

关于npx

npx 是 Node 的包执行器，不同与 Node 的 npm(包管理器)。 npx 是 Node 5.2+ 版本上才有的工具。

npx 会在当前目录下的 ./node_modules/.bin 里去查找是否有可执行的命令，没有找到的话再从全局里查找是否有安装对应的模块，全局也没有的话就会自动下载对应的模块，npx 会将执行的目标下载到一个临时目录，用完即删，不会占用本地资源。

即下面的两种命令是基本一样的效果：

1
2
3

npm install -g create-react-app
create-react-app my-app
npm uninstall -g create-react-app

1

npx create-react-app my-app

另外。npx 也可以执行远程仓库的可执行文件，例如：npx github:piuccio/cowsay hello
再例如：npx http-server 启动一个server

已构建项目的使用

使用 npx create-react-app my-app 命令创建好的项目不需要其他配置就已经可以正常使用了。 常用的命令，与其他 Node 项目类似：

• npm start 或 yarn start : 本地启动，默认访问http://localhost:3000/
• npm run build 或 yarn build : 项目构建
• npm test 或 yarn test : 项目单元测试

所有构建项目的方法

npx

1

npx create-react-app my-app

npm

1

npm init react-app my-app

yarn

1

yarn create react-app my-app

使用模板

1

npx create-react-app my-app --template [template-name]

模板总是以 cra-template-[template-name] 的格式命名，但是我们只需要向创建命令提供 [template-name] 即可。

我们可以在 npm 上搜索 cra-template-* 模板。

选择包管理工具

在使用CRA创建一个新项目时，根据我们所执行的命令不同，就已经决定了这个新项目所使用的包管理工具。

• npx create-react-app my-app : 使用 npm 作为包管理工具
• yarn create react-app my-app : 使用 yarn 作为包管理工具

新项目的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

其中，下面的文件不能修改文件名，一定注意：

• public/index.html — 这个是页面模板
• src/index.js — 这个是JS入口

其他文件可以根据需要删除或者重命名。

可以在 src 内创建子目录。为了加快重建速度，webpack 只处理 src 里面的文件。我们需要将 JS 和 CSS 文件放在 src 里面，否则 webpack 不会看到它们。

在开发环境中使用HTTPS

注意：该功能在 react-scripts@0.4.0 及以上版本中可用。

我们在开发过程中，很可能需要使用 HTTPS 来运行我们的项目。 这时，只需要将 HTTPS 环境标量设置成 true 即可，剩下的和平时启动项目并无二致 npm start。

Windows(cmd.exe)

1

set HTTPS=true&&npm start

注意上面的空格

Windows(Powershell)

1

($env:HTTPS = "true") -and (npm start)

Linux,macOS(Bash)

1

HTTPS=true npm start

使用自定义的SSL证书

在 Linux/mscOS 下，通过修改 SSL_CRT_FILE, SSL_KEY_FILE, HTTPS 三个环境变量，我们可以使用自定义的SSL证书来启动我们的项目，例如：

1

HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start

为了避免每次都要设置环境变量，可以像这样在npm启动脚本中包含。

1
2
3

{
  "start": "HTTPS=true react-scripts start"
}

或者在 .env 文件中 设置 HTTPS=true。

欢迎关注我的公众号 须弥零一，跟我一起学习IT知识。

• ← Previous Post
• Next Post →