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

搭建react入门环境

程序员文章站 2022-05-28 18:36:46
...

之前自己开始学的时候也在网上找过很多入门教程,然后乱七八糟的安装的好多,最后还是没有学会如何去搭,最后的最后,选择了react的菜鸟教程,然后按照步骤一步一步来,首先装node.js,可以先去官网下载一个最新的安装包,然后开始安装。

1,双击安装包

搭建react入门环境

2,点击NEXT(下一步)

搭建react入门环境

3,勾选协议,点击next(下一步)

搭建react入门环境

4,选择安装路径,点击点击next(下一步)

搭建react入门环境

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

搭建react入门环境

6,点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步)

搭建react入门环境

安装过程

搭建react入门环境

7,点击 Finish(完成)按钮退出node.js安装向导。

8,通过npm来使用React

我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack,本教程使用 webpack。

国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

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

9,使用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

如果打开的页面是这样的,证明你就成功了

搭建react入门环境


项目的目录结构如下:

搭建react入门环境

到这,你就已经成功了,初次写博客,如有不足,请多多指教