React开发环境搭建

 

React作为时下较为热门的前端框架之一,由facebook公司开创,用于搭建响应式的前端页面。react的思路是all in js,通过js来生成html,所以设计了jsx语法,还有通过js来操作css,下面我们先开始搭建React框架运行环境:

1、安装node

根据安装提示安装node.js,npm包管理工具也会一同安装

2、查看node和npm版本号

React开发环境搭建

查询到版本号,说明电脑已成功安装node和npm

3、全局安装create-react-app(react脚手架工具)

在cmd命令行中输入:npm install -g create-react-app

React开发环境搭建

 

4、npm换源

在命令窗口执行npm config set registry https://registry.npm.taobao.org。

安装这里是因为我们用的npm的服务器是外国,,安装依赖会很慢,所以就用这个cnpm来安装我们需要的依赖。

React开发环境搭建

 

5、使用脚手架创建一个新项目

在cmd中输入:create-react-app 项目名,开始生成项目

React开发环境搭建

生成成功

React开发环境搭建

6、查看创建完的文件夹,内容如下图:


  1.  

React开发环境搭建

其中:

node_modules用于存放项目的依赖包,也就是构建这个React项目可能会用到的工具,

public文件夹中是 index.html存放目录,也就是React根页面的所在地

src中用于存放js文件,也就是项目开发中的主要区域

package.json用于记录项目信息,以及外部依赖包的导入信息等

7、进入该目录,导入路由

运行npm install --save  react-router-dom

React开发环境搭建

导入成功

8、运行npm start 启动项目,项目创建成功

React开发环境搭建