React学习(一)React开发环境搭建,使用create-react-app创建一个demo

本系列文章实属学习笔记，刚刚接触，若有错误之处望指正，非常感谢，大佬轻拍
React开发过程中会使用大量node.js提供的各种库（就像Java开发需要使用大量的jar包一样），我们在开发Java程序时使用Maven来管理开发过程中使用的jar包，相应的在开发React程序时我们需要使用npm (这里给个npm的全称吧，node package manager，Node 包管理器，看翻译过来的意思就知道是干什么的) 来管理node提供的各种库。

第一步：安装node.js

去官网下载安装node.js，我这里搭建的环境纯属学习使用，所以我安装当前的最新版本。一路next就行，这里我就不截图了。当我们使用官网下载的安装包进行安装时会自动帮助我们安装好npm。

有朋友可能会问，我怎么知道安装好没有？别急

node -v
npm -v

运行截图如下：

控制台上已经显示了我们安装的node和npm的版本。
这里我们已经把环境搭建好了，接下来安装好我们喜欢的开发软件就可以进行开发了。

第二步：把官方默认的镜像修改为淘宝镜像（你也可以不这么做，那就跳过这一步，如果跳过，请把后文中提到的cnpm替换为npm，但是有可能出现下载库很慢或者卡死的现象）

react这个是老外的东西，所以我们开发过程中使用的各种库都要从国外服务器去下载，经常卡死，所以我们可以使用国内的镜像，操作方法如下：

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

检查一下镜像是否修改成功：

cnpm -v

镜像已经修改好了。

第三步：安装create-react-app工具

我们在开发Java、Android等项目时需要配置很多运行环境、编译环境等配置，React开发也是相同的，但是React开发团队为我们提供了一个一键创建React项目的工具，就是create-react-app。

cnpm install -g create-react-app

上面命令中的 -g 是全局安装的意思，这样执行命令后create-react-app这个创建项目的工具在这台设备上任何地方都可以使用，如果把命令中的 -g 去掉后执行，我们依然可以使用create-react-app工具创建项目，但是之后每一次新建react项目我们都要执行这条命令。
检查工具是否安装成功：

create-react-app -v

可以看到工具已经安装成功！

第四步：创建react项目

create-react-app react-demo
后面这个react-demo为新项目名称

我给我这个新react项目命名为：react-demo
可以看到语句执行时其实已经做了大量的工作。

到这里项目已经创建好了，可以到相应路径下 （文章中涉及到的路径大家可以根据自己机器情况调整，不是一成不变的） 看一下：

这里可以看到，项目已经创建好了。
我们分析一下项目结构：

不同版本的create-react-app创建的项目结构略有差异
node_modules 这个文件夹包含了所有通过 npm 安装的 node 包
public 这个文件夹包含了所有项目构建出的产品文件。最终所有你写在 src/ 文件夹里面的代码都会在项目构建的时候被打包放在 public 文件夹下。
src 我们编写的所有程序文件都在这个文件夹下
.gitignore
package.json 这个文件包含了 node 包依赖列表和一些其他的项目配置
package-lock.json
README.md == .md 表示这是一个 markdown 文件，包含了这个项目的一些基本的指令和介绍==
到这里我们就已经创建了一个react项目，可以运行起来稍微开心一下了。

进入项目根目录react-demo
cd react-demo
运行项目
cnpm start

这时原来的cmd黑窗口会自动关闭，然后自动打开一个新的dos命令窗口如下图：

dos界面提示很详细，这时务必不要关闭这个黑窗口，一旦关闭，项目运行进程就会关闭，项目就停了。
这时浏览器会自动打开一个页面，如下图：

到此一个新的react项目就已经创建成功。
但是我们不能一直在dos界面操作，需要选择一款IDE，这里我选择使用微软的VSCode.

第五步：选择一款编辑器，这里我选择VSCode

官网下载安装包，仍然是一路next,安装后的界面如下图：

File—Open Folder—选择刚刚我们新建项目的根目录，打开，就是下面了：

到这里就可以自由飞翔了！！！！
后面就开始编码了，要是看到项目结构不知道从哪儿下手的小伙伴可以看我React系列笔记二：React学习(二) React学习之demo分析