如何使用 npm 安装 React

首先我们可以打开控制台,输入 npm 或 node 检验是否安装成功。附加 version 参数可以查看我们安装的 npm 及 node 的版本。


node -v

npm -v

由于 npm 官方的服务器在国外,在国内使用可能会遇到很多网络问题,而且速度也非常慢,为了方便我们的开发,我们需要手动切换 npm 到国内的镜像源。国内最稳定的镜像源是淘宝提供的。

打开淘宝 npm 镜像的官网,我们可以看到简要的使用说明。首先,在这里,我们可以获取到镜像的地址,先复制备用。之后打开命令行,注意到这里,因为我们的 npm 默认是安装在系统文件夹下的,所以需要以管理员模式打开命令行,否则在安装包的过程中可能会出现一些权限问题。

在命令行中,我们输入

npm config set registry https://registry.npm.taobao.org

来修改npm默认的安装源,通过

npm config get registry

来检验一下刚才的配置是否成功。

除此之外,我们还可以使用淘宝镜像提供的cnpm工具,通过cnpm来安装包一般速度会更快一些,我们可以直接复制文档中的命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

粘贴在命令行中,回车进行安装,初次安装需要等待的时间可能会比较久,一定要有耐心。

等待安装完成之后,我们可以在命令行输入cnpm -v来测试是否安装成功。

使用 npm 安装 React

接下来,我们可以尝试一下,使用 npm 安装 React 到我们的项目中。在我们的工作目录,按住 shift 点击鼠标右键,在弹出的菜单中选取“在此处打开命令行”,创建一个项目的文件夹,例如 learn-react ,使用 cd 命令切换至文件夹中,输入:

cnpm init -y

使用默认设置初始化我们的项目的 npm 配置,在项目目录中会生成一个 package.json 文件,里面会保存我们项目的基本信息、命令脚本以及依赖的库等信息。再然后,我们可以通过命令:

cnpm install react react-dom --save

来安装 React,并将其保存到我们的项目依赖当中。现在再来看一下 package.json 文件,我们可以看到其中的 dependencies 已经保存了 react 的信息了。

使用 create-react-app 命令行工具

通过 npm,我们可以安装许多命令行工具。 React 官方专门为我们准备了专用的 React 项目生成工具 create-react-app,只需要简单几行代码即可生成 React 项目,并且在开发时还支持实时更新,自动重载等功能。

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

如果是我们完全地手工配置,则需要配置安装 Webpack/Babel 等工具库。所以对于初学者或想要快速开发应用的同学,create-react-app 就是你最好的选择。

原文: https://www.w3cplus.com/react/react-learn-1-2.html © w3cplus.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值