阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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
      

      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
      
      目录
      目录