React.js入门篇——快速搭建开发环境

Posted 2021-05-01 小古时光

React.js简介

React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话，那么 React 的组件就相当于 MVC 里面的 View。如果你不熟悉也没关系，你可以简单地理解为，React.js 将帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的，这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。

React.js 不是一个框架，它只是一个库。它只提供 UI （view）层面的解决方案。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。

环境安装

Node.js官网下载：https://nodejs.org/zh-cn/

下载并且安装Node.js，没有特殊情况，默认下一步直接安装即可

随后打开cmd或者power shell查看是否成功安装

可以看到已经成功安装node和npm，安装Node.js时默认安装了npm

快速搭建React App

新建一个目录react，按住Shift键同时点击鼠标右键，即可在当前目录中打开

根据官方文档：https://facebook.github.io/react/docs/installation.html

在react目录中输入一下命令：

1、npm install -g create-react-app

安装create-react-app依赖，-g表示全局安装，除了当前目录，其他目录也可以使用，没有-g则只能在当前目录使用

2、create-react-app example

使用create-react-app新建一个React App，工程名称为example

耐心等待，成功安装

3、cd example

进入exampl文件夹

4、npm start

运行当前工程

然后浏览器会自动打开http://localhost:3000，看到下图为成功安装

 Tips 

如果有些同学安装过程比较慢，那是很有可能是因为 npm 下载的时候是从国外的源下载的缘故。所以可以把 npm 的源改成国内的 taobao 的源，这样会加速下载过程。在执行上面的命令之前可以先修改一下 npm 的源：

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

‍

欢迎添加好友交流学习

---

▼ 猫来了点赞