如何搭建一个“不可告人的”私人专属网盘？教程拿去

虽然打造私人网盘的目的很很差意思说出来，可是一想到之后存一些东西不再怕莫名其妙地蒸发掉了，就开心的睡不着啊。

好嘞，回到我们今天的主题：如何打造一个私人专属网盘？本教程将使用React & SPA为技术基础，来完成这个应用的搭建。

整个过程将涉及如下3块知识点：

• React 简介和环境搭建

• node & npm 基本使用

• React SPA 简单实践

React简介

React 是什么？对前端有所了解的同窗，想必都或多或少听到过 React 这个名字。React 是由 Facebook 公司发起的一个开源前端框架。React 在诞生之初，就是对传统前端开发的一种颠覆。通过若干年的发展，React 已经成为了目前世界上最流行的前端框架，可能没有之一。

React，Vue.js 和 Angular.js 是目前主流的三大前端框架。不少互联网公司在招聘前端工程师时都会在招聘条件里写上要求掌握这三个框架当中的至少一种。

环境准备

在使用 React 以前，咱们首先须要安装基于 node 的支撑环境。node 是一个基于 Chrome JS 引擎的 JS 运行环境，node 能够用来作不少事情，包括脚本开发，服务器端开发等等，因为和本教程主要内容无关，这里就再也不赘述了。在本教程中，咱们只须要 node 做为一个工具。React 的开发工具大部分是基于 node 的。在 node 的帮助下咱们开发 React 应用会简单不少。

React 是一个纯前端框架，实际上咱们也能够直接在网页端引入 React 的 JS，就像引用 jQuery 同样。不过如今并不推荐这种方式了。基于 node 的工具要好用不少。

打开终端，输入以下命令查看 node 的版本：

这样就说明 node 已经安装好了。

安装 create-react-app

在安装好 node 环境以后，咱们就能够经过 npm 来安装各类工具和依赖了。npm 全称是 node package manager，即 node 的包管理工具，它的地位相似于 Ubuntu 中的 apt-get。后面不少地方咱们都会使用 npm 来安装须要的包。

若是你使用的是实验楼的国内实验环境，或者是在本身的本地电脑上操做，推荐首先把 npm 的镜像地址设置成国内的淘宝镜像地址，这样安装 npm 包的速度会快不少：

在安装依赖以前，咱们先把 npm 升级到最新版本，在终端中输入：

等待脚本执行完成以后，使用 npm --version 查看 npm 的版本，本教程书写时，最新的 npm 版本是：6.4.1

而后咱们使用 npm 安装 create-react-app，它是 Facebook 官方的一个用来简化 React 开发的工具。在命令行中输入：

等待安装完成以后，在命令行中输入 create-react-app，将看到它的简要帮助文档，说明工具已经成功安装上了。

建立 React 工程

在工具准备完成以后，咱们就可使用它来建立咱们的 React 工程了。在终端中输入 create-react-app cloud-disk-app。

因为 npm 的限制，名字不能使用大写，命名惯例是小写字母加分隔符。

而后会通过一个有点长的等待过程，在这个过程当中工具会建立好工程目录，把全部须要的依赖都下载下来。等待操做完成以后，进入工程目录 cd cloud-disk-app，而后输入 npm start，等待一下子，会看到 React Development Server 已经成功打开，而且自动打开了浏览器(这里须要使用火狐浏览器)：

到这里咱们已经完成了一个 React 工程的初始化工做。最终咱们将能够建立出一个最简单的React页面，它大体长这样：

接下来就是node & npm 基本使用以及React & SPA的一些简单实践。由于篇幅有限，而且该教程由开源爱好者Skyline75489在实验楼发布了完整的版本，建议你们直接到电脑端学习：我是一道传送门

你也能够在实验楼公众号后台回复关键词“专属网盘”下载该项目完整代码。

今日推荐

8个爽滑的Windows小软件，很差用你拿王思葱砸死我

60人，42天，死磕机器学习，结果以下。

武侠版编程语言...Java像张无忌仍是令狐冲？

大量机器学习&深度学习资料

技术变现，到底怎么变？