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。
欢迎关注我的公众号“须弥零一”,原创技术文章第一时间推送。