从零开始构建react应用（二）环境配置

环境配置

从零开始，我这里的零就是指有一台电脑，其它啥都没有，因为我们要做ssr，所以node是必不可少的，还有我们的编辑器vs code和主语言typescript。

安装node

1. 用浏览器打开node官方下载页：https://nodejs.org/zh-cn/down...
2. 选择自己操作系统对应的安装包下载安装即可，我这边选择当前版本最新功能的macOS Installer (.pkg) 64bit的，地址是 https://nodejs.org/dist/v8.6....，可以看到版本号是8.6.0
3. 具体安装方式，双击下载下来的node-v8.6.0.pkg，一顿continue就ok啦
4. 安装完成后可以使用npm和node命令

安装visual studio code

1. 用浏览器打开vs code官方下载页：https://code.visualstudio.com...
2. 选择自己操作系统对应的安装包下载安装，我这边选择mac版，点击下载后是一个zip文件
3. 解压zip文件得到的直接就是应用程序，mac这里直接将其拖进Applications文件夹就ok了
4. 安装完成后可以使用code命令

安装typescript

1. 用浏览器打开typescript官方网站下载介绍部分：https://www.typescriptlang.or...

2. 可以看到，直接通过命令进行全局安装即可

   npm install -g typescript

3. 这样就可以使用tsc命令了

PS：如果npm，tsc这些命令不可用的话，要记得看一下自己操作系统的path里是不是包含了这些命令的软链

创建应用目录

github大家应该都不陌生，我这边选择将这个react应用放到github仓库上去，这样也方便后续迭代管理使用。如果有同学没有github也不要紧，注册一个也很快，实在不方便的话，可以直接在本地创建一个文件夹来作为应用目录。

使用github的同学待会需要拉取仓库，所以需要使用到git客户端。

安装git

1. 用浏览器打开git官方下载页：https://git-scm.com/downloads
2. 选择自己操作系统对应的安装包下载安装，mac版本对应的下载地址是 https://git-scm.com/download/mac
3. 安装完成后可以使用git命令了

创建应用

1. 我在github上新建了一个仓库叫 react-app，选择了自动创建node相关的.gitignore文件和MIT许可证，还有一个空的README.md文件
   

2. 在本地Terminal／cmd中执行以下命令来拉取仓库
   可以选择通过ssh方式

   git clone [e-mail]:devlee/react-app.git

   或者使用https方式

   git clone https://github.com/devlee/react-app.git

   执行以下命令进入该目录

   cd react-app

   执行以下命令在vs code中打开这个项目目录

   code .

   

项目目录结构

项目目录结构没有什么特定的标准规定，这里讲一下我常用的目录结构。

src目录

这个目录如下图，在根目录下，用于存放我们的源代码。

1. 通过New Folder小图标可以创建一个目录，点击后直接输入目录名回车即可
   
2. src目录下面具体又分client，server，webpack三个文件夹
   
3. client目录下放react相关的客户端代码
4. server目录下放koa相关的服务端代码
5. webpack目录下放工程化相关的配置代码

PS：测试，代码覆盖率等会在后续相关篇幅进行追加

public目录

这个目录位于项目根目录下，用于存放静态资源，比如favicon.ico文件。

@types目录

这个目录位于项目根目录下，用于存放自定义的.d.ts文件，用于typescript的相关检测。

到此为止，我们已经拥有了下面这个空的项目，每个文件和文件夹的作用也都了解了。

Thanks

By devlee