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

使用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 创建项目：

npxcreate-react-appmy-app

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

关于npx

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

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

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

npminstall-gcreate-react-appcreate-react-appmy-appnpmuninstall-gcreate-react-app

npxcreate-react-appmy-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

npxcreate-react-appmy-app

npm

npminitreact-appmy-app

yarn

yarncreatereact-appmy-app

使用模板

npxcreate-react-appmy-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 作为包管理工具

新项目的结构

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)

setHTTPS=true&&npmstart

注意上面的空格

Windows(Powershell)

($env:HTTPS="true")-and(npmstart)

Linux,macOS(Bash)

HTTPS=truenpmstart

使用自定义的SSL证书

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

HTTPS=trueSSL_CRT_FILE=cert.crtSSL_KEY_FILE=cert.keynpmstart

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

{"start":"HTTPS=truereact-scriptsstart"}

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

---- END ----

---

欢迎关注我的公众号“须弥零一”，原创技术文章第一时间推送。