阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录