欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React框架学习之react环境搭建教程

程序员文章站 2022-04-11 22:01:02
楼主刚开始学习react框架(完全的前端小白)在搭建环境这一关都花了不少时间。(还是得多亏同学的帮助,带我走出了困境,看到了希望)所以在此总结一下。 一、 通过npm使用Reac...

楼主刚开始学习react框架(完全的前端小白)在搭建环境这一关都花了不少时间。(还是得多亏同学的帮助,带我走出了困境,看到了希望)所以在此总结一下。

一、 通过npm使用React

1、node.js的安装。

如果你的系统不支持Node.js及NPM,则下载Node.js安装包及源码

如果你和我一样是windows 64位系统,那和我一样按如下选择:

你可以根据不同平台系统选择你需要的Node.js安装包。

Windows 安装包(.msi)

安装步骤1:双击下载后的安装包,如下图所示:

步骤2:点击以上的Run(运行),将出现如下界面,点击next进入下一个界面:

步骤3:勾选接受协议选项,点击”Next“进入下一步:

步骤4:Node.js默认安装目录为”C:、Program File\nodejs\“,你可以修改目录,并点击next(下一步):

步骤5:点击树形图标来选择你需要的安装模式,然后点击下一步(next)

步骤6;点击install(安装)开始安装Node.js。你也可以点击Back(返回)来修改先前配置。然后点击next:直到安装结束:

步骤7:检测是否已经成功安装node.js :点击cmd,输入node -v 如果可以查看当前Node.js版本,则说明node.js安装成功。

目前的node.js都自带npm的。所以无需安装npm

2、React中使用CommonJS模块系统,如browserify或webpack,本教程使用webpack。

国内使用npm速度较慢,你可以使用淘宝定制的cnpm命令行工具代替默认的npm:

在这里,你可以进入自己定义的某个文件路径下,执行命令,否则默认是在C盘下。

如:我选择的是

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

D:\\install\nodeinstall\ npm config set registry https://registry.npm.taobao.org

ps:补充: 这样就可以使用cnpm 命令来安装模块了:

cnpm install [模块名]

更多信息查阅:https://npm.taobao.org/.

3、使用create-react-app快速构建React开发环境

create-react-app 是来自于Facebook,通过该命令我们无需配置就能快速构建React开发环境。

create-react-app 自动创建的项目是基于webpack +ES6

进入项目目录创建项目:

安装目录 cnpm install -g create -react -app

安装目录 create-react-app my-app

cd my-app/

npm start

即可在浏览器中打开https://localhost:3000/ ,结果如下图所示:

配置成功!下面可以进入项目编写你的代码吧!