create-react-app 项目安装和使用

🌙
手机阅读
本文目录结构
axihe

前言:卸载本地全局安装的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

https://a.axihe.com/react/create-react-app/mintty_BDouuVj9h5.png

卸载全局安装好处

因为使用 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

https://a.axihe.com/react/create-react-app/RTGbGFyT57.gif

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-*来找到可用模板的列表。

或者直接点击:https://www.npmjs.com/search?q=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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang