React-----环境配置及基础项目搭建

一、环境配置

1.首先我们需要安装node.js，直接搜索并在官网根据自己电脑操作系统下载合适的node版本。我下载了.msi，双击打开安装。现在最新的node已经包含了npm。

安装完成后，打开cmd命令行，输入node -v和npm -v来查看版本号，如果显示则安装成功。

2.安装create-react-app工具和yarn 

npm install create-react-app yarn -g

等待其安装，意思是全局安装create-react-app脚手架工具，然后就可以试用命令创建新的react项目。

更改yarn安装包的源

yarn config get registry 查看当前的源

改成taobao的源

3.在指定的目录下创建新的react项目

首先在cmd中更换目录到指定的文件夹

E: （选择E盘）

cd ‘React\Demo（进入E盘中的指定文件夹）

然后再输入 create-react-app first 则可以安装在特定目录下（注意项目名称不能有大写字母）

需要等待一段时间~完成后我们可以看到如下内容

其中，

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

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

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

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

--.json文件不能双击打开，可以用文本编辑器打开 例notepad

 

安装完成后，cmd中输入

cd first 进入项目目录

5.部署yarn，以及导入依赖

在cmd中输入：

yarn init --yes

 

yarn start

成功打开网页

 

后话：虽然做了很多傻事 ，比如又单独配置webpack和babel 导致yarn start失败。

总算明白 create-react-app的用处