React开发环境搭建(一)

时间:2024-03-14 17:19:31

一、安装node.js和npm包(或cnpm)

1.打开node.js官网:https://nodejs.org/en/,选择对应版本下载(笔者下载的是14.5.0版本),下载成功后点击安装,安装node.js时,npm包管理工具也会同时安装,下载页面如下:

React开发环境搭建(一)

2.Win+R 打开cmd命令行,输入 node -v 和 npm -v 或 cnpm -v来查看版本号,如下图显示安装完成:

React开发环境搭建(一)

Tips: npm作为包管理器来说相对来说比较好用,但是由于服务器不在国内所以有的时候速度会慢一点,建议安装一下淘宝团队的cnpm,这个就是npm在国内的镜像:npm install -g cnpm -registry=https://registry.npm.taobao.org

二、React开发环境搭建

1.安装create-react-app脚手架工具,命令行如下:

npm install -g create-react-app

2.使用命令创建新的react项目 react-demo,项目名称可以随便起名

在电脑D盘下创建react文件夹,然后命令行进入

cd /d D:\react 进入 D盘下的react文件夹, 然后命令行输入create-react-app react-demo

3.cd /d D:\react\react-demo 进入项目react-demo目录,部署npm,导入react-dom依赖包,命令行如下:

cd /d D:\react\react-demo

npm init (一直enter)

npm install --save react react-dom ( 在该目录下导入react和react-dom)

npm install --save react-router-dom (react路由)

4.运行服务

通过 npm start 来启动项目

npm start

则会自动弹出localhost:3000的网页窗口,并显示Welcome to React则启动成功页面,这时react的简单开发环境就搭建好了

React开发环境搭建(一)