最资讯丨使用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的新项目。
关于npxnpx是 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: 项目单元测试
所有构建项目的方法npxnpxcreate-react-appmy-appnpm
npminitreact-appmy-appyarn
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。
欢迎关注我的公众号“须弥零一”，原创技术文章第一时间推送。
