使用React搭建初始化环境(React入门)

1,869 阅读1分钟

使用VSCode编辑器搭建React的基础使用环境(Visual Studio Code官方下载地址)

一、搭建React使用环境

1.检查是否安装React包

在任意位置打开命令窗口

命令窗口

输入命令:

    npm list -g --depth=0 

如果有下面这个包的话标明已经安装好React了,可以直接跳过安装进入创建环节,如果没有可以可以按照以下步骤安装

React

2.安装React

在命令窗口输入:

    npm i create-react-app -g

安装React

注意由于服务器是在国外,速度会较慢,而且容易丢包,建议使用科学上网或者使用阿里的提供服务器下载,即以下代码

    cnpm i create-react-app -g

出现一下代码即安装成功

success

3.安装VSCode上运行React的相关插件

安装好VSCode后,打开软件

VSCode

在插件中搜索ES7

ES7 React/Redux/GraphQL/React-Native snippets

第一个ES7 React/Redux/GraphQL/React-Native snippets就是运行React的运行插件,点击安装,安装好后重启VSCode。

二、创建

1.创建react

在命令窗口输入:

    create-react-app first-react-project(项目名称)

创建React

出现以下代码即创建成功

创建成功

将命令窗口切换至项目文件夹,输入运行命令

    npm start

如果没有报错,React项目运行成功

运行React
如果报错,将项目文件中的node_modules文件删除,然后在项目所在文件打开命令框,重新安装React环境

React默认端口号为3000,打开浏览器,在地址窗口输入localhost:3000出现一下窗口,即React初始化环境搭建完成

React初始化环境搭建完成