【前端】React环境搭建和NPM配置问题！！（详）

 

最近在接触前端的知识，学完了html和CSS之后，短暂接触了js,现在要开始使用react了。在网上找了很多react配置的教程，经过自己一步步摸索，总算初步解决了react配置问题。参考的文章我都放在文章末尾了。

 

以下步骤均在windows环境下进行。

---

---

首先我在这里：

https://www.reactjscn.com/tutorial/tutorial.html

了解到在本地搭建环境要确保电脑上安装了Node.js，于是我们来到官网https://nodejs.org/en/下载合适版本并安装。

安装过程我就跳过了，详细过程可参考菜鸟教程https://www.runoob.com/nodejs/nodejs-install-setup.html

在我们安装node时，npm工具就随之一起自动安装了。这时我们可以cmd输入node -v和npm -v检查安装的版本：

能够显示出来就说明安装成功了。

接下来我们先用npm 安装 create-react-app脚手架工具，它可以自动地在本地目录中创建react项目。 这时候考虑到npm在国内使用起来速度很慢，我们可以用淘宝镜像工具cnpm进行安装。我使用的是npm安装的，也没有想象中的这么慢hh。

淘宝镜像安装：

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

安装create-react-app：

cnpm install -g create-react-app

注意你如果直接使用npm安装，前面的cnpm应该改成npm.

 

装好之后我们就可以新建项目了！

我们首先用命令行进入到我们的目标文件夹，使用

create-react-app appname  //appname是自己项目的名称可以改动

这时候在指定的文件夹内就建好了一个项目。

接下来输入以下命令：

npm install --save react react-dom （ 导入react和react-dom  ）         

 npm install --save  react-router-dom   （react路由，以后会用到）

这时候差不多完成了配置啦。输入npm start就能在浏览器中看到你的项目！

当你建完一个项目时，可能会依赖到很多包，这时候要使用npm install命令安装包，才能保证项目正确执行。

如果出现 missing script：start错误，就要仔细检查你的项目路径了，要保证你是在你所建立的项目里操作。

参考文章：

https://www.runoob.com/react/react-install.html

https://www.runoob.com/nodejs/nodejs-npm.html

https://www.jianshu.com/p/1f3acf8f8927

https://blog.csdn.net/shuaishuai1234/article/details/82790049

https://blog.csdn.net/daxiazouyizou/article/details/79743832

https://blog.csdn.net/weixin_39939012/article/details/80540233

 

---

后续：

    在react项目中使用ECharts：

https://blog.csdn.net/hahahhahahahha123456/article/details/80390151