从零开始搭建一个基于React框架的博客发布系统 （一）初始化环境

了解博客搭建流程

欢迎稍后收看我的下一篇文章，node操作文件脚本编写。
现在的博客搭建一般都是使用Github作为载体，无论我们经过什么配置，做的事情只有一个，那就是把编译好的系统部署到github上去，比如Hexo，只不过一些复杂的操作他都帮你省了，你只需要上传自己的博客内容就万事大吉了。

github作为一个承载容器，你自己新建一个io后缀的项目之后(一个账号只可以有一个此项目)，每次把编译过的代码push到github上去之后，github会自动的帮你部署，等你再次访问该地址，得到的就是你的博客项目了。

声明一下，这个系统的想法以及实现的绝大部分都来源于我的同事，sxq，我不生产代码，我只是代码的搬运工。

本次文章重点不是博客搭建的流程，而是通过这个项目来学习前端的一些技术：

• 利用create-react-app跑通项目
• webpack的配置详解
• nodejs的文件操作以及命令行操作
• 一些React本身的知识，比如生命周期，组件书写，路由等
• 数据管理中心，mobx/redux的使用
• 一些babel的配置与使用

初始化create-react-app

首先需要安装一下node环境，node本身带有npm工具，所以安装好node之后就可以是用npm命令了。个人习惯原因，我更喜欢是用yarn,这是个和npm一样的包管理工具，可以直接npm通过命令来安装yarn。

安装命令如下npm install -g yarn,-g标识全局安装，这样就可以在任何一个路径下面使用了。

好了，node和yarn就是前期要准备的安装环境了。

第一步，全局安装create-react-app

任何一个路径键入yarn global add create-react-app

第二步，创建本地的create-react-app

接下来，在一个你希望存储代码的文件夹下输入如下命令，他会自动帮你创建好程序。

create-react-app blog,然后在当前路径进入到，创建的文件夹，cd blog

第三步，初始化开发环境

首先安装依赖包，yanr install,然后create-react-app默认是把配置项给隐藏掉的，所以还要键入如下命令。yarn run eject然后他会问你yes or no,你输入y就好了。声明一下，这是个单项操作，eject之后就回不去了。

现在看一下开发的目录：

大致的说一下：src里面就是我们的前端代码，package.json中是依赖包的引入文件，install命令就是通过读取依赖来下载依赖包。node_modules是下载的依赖包的存放地址，public中存放一些公共的文件，scripts中存放的是运行的脚本，我们执行yarn start的时候，实际上执行的就是start.js的脚本内容。

欢迎收看我的下一篇文章，node操作文件脚本编写。