create-react-app 项目安装和使用
前言:卸载本地全局安装的create-react-app
如果您以前是通过npm install -g create-react-app
命令全局安装的 create-react-app, 但是又想每次都使用最新版来创建项目
建议您先卸载掉,
npm uninstall -g create-react-app
通过上面的卸载命令可以实现卸载。
以后使用npx create-react-app my-app
安装项目,就是都是基于最新的 create-react-app 来创建项目了。
注意:如果没有卸载全局安装的 create-react-app,请一定不要直接使用
npx create-react-app my-app
安装项目。
否则会引起错误: 创建的项目中没有 src、public文件夹
你可以通过下面命令来检测是否有全局安装;
create-react-app --version
卸载全局安装好处
因为使用 npx 安装的时候,原理是如果本地没有 create-react-app,npx 会临时借用远程的最新版本 create-react-app 来处理。
如果你不了解 npx 和 npm,可以查看 npx 和 npm 之间的区别和联系
npx 主要特点
- 1、临时安装可执行依赖包,不用全局安装,不用担心长期的污染。
- 2、可以执行依赖包中的命令,安装完成自动运行。
- 3、自动加载 node_modules 中依赖包,不用指定 $PATH。
- 4、可以指定 node 版本、命令的版本,解决了不同项目使用不同版本的命令的问题。
使用 npx 安装的坏处
使用npx
默认情况下,如果最新版的版本里有 BUG,那就是用带有 BUG 的版本进行操作的。
如果你想要基于某个特定版本的create-react-app
来做项目,安装特定的版本也是不错的方案
不卸载全局又想使用 npx 的方法
npx 操作的时候,带上参数 –ignore-existing,忽略本地的 cli 就可以了。
npx --ignore-existing create-react-app my-app
快速开始
通过这个脚手架安装项目,不需要安装或配置 Webpack 或 Babel 等工具,脚手架会预先配置好并且隐藏的;
我们只需要专注于代码就可以了。
npx create-react-app my-app
cd my-app
npm start
然后打开 http://localhost:3000/
查看你的应用。
当你准备部署到生产环境时,使用 npm run build
创建一个压缩后的 bundle(包)。
Nodejs 版本要求
你的本地开发机上需要使用 Nodejs,并且Nodejs版本 >= 8.10
,不过服务器上不需要,因为最后 build 之后就是一些静态文件。
在当前目录下创建项目
npx create-react-app my-app
是在当前文件夹下创建一个my-app
的目录然后安装依赖。
但是很多时候,我们是使用 Github 仓库,或者 Svn 的仓库,clone 后再进行安装的,这时候就需要基于当前的目录进行创建;
如果你要在当前文件夹下直接创建package.json
文件等,可以使用
npx create-react-app ./
推荐使用 nrm 管理 npm 源
推荐使用 nrm 来使用管理你的 npm 源;
如果对nrm不了解,可以参考阿西河整理的 nrm 教程
这样可以自由切换到官方源和淘宝源等,非常方便进行管理。
你可以使用 nvm (macOS/Linux) 或 nvm-windows 在不同项目之间轻松地切换 Node 版本。
有很多方式可以创建程序
要创建新应用,你可以选择以下方法之一:
npx
npx create-react-app my-app
( npm 5.2+ 或更高版本自带npx
)
npm
npm init react-app my-app
npm init <initializer>
在 npm 6+ 中可用
Yarn
yarn create react-app my-app
yarn create
在 Yarn 0.25+ 中可用
基于一个模板创建
现在,您可以选择通过添加 --template [template-name]
到 creation 命令来从模板启动新应用。
如果您不选择模板,我们将使用基本模板创建您的项目。
模板总是以格式命名 cra-template-[template-name]
,但是您只需 [template-name]
要向创建命令提供即可。
npx create-react-app my-app --template [template-name]
您可以通过在 npm 上搜索
cra-template-*
来找到可用模板的列表。
自定义模板文档描述了如何构建自己的模板。
创建基于 TypeScript 应用
您可以使用模板启动新的 TypeScript
应用。
要使用我们提供的 TypeScript
模板,请附加 --template typescript
到创建命令。
npx create-react-app my-app --template typescript
如果您已经有一个项目并想要添加 TypeScript,请参阅我们的 添加 TypeScript 文档。
选择一个包管理器
创建新应用程序时,CLI 将使用 Yarn 安装依赖项(如果可用)。
如果安装了 Yarn,但更喜欢使用 npm,则可以追加 --use-npm
到 creation 命令。例如:
npx create-react-app my-app --use-npm