雖然打造私人網盤的目的很不好意思說出來，但是一想到以后存一些東西再也不怕莫名其妙地蒸發掉了，就開心的睡不著啊。

好嘞，回到咱們今天的主題：如何打造一個私人專屬網盤？本教程將使用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像張無忌還是令狐沖？

大量機器學習&深度學習資料

技術變現，到底怎么變？

總結

以上是生活随笔為你收集整理的如何搭建一个“不可告人的”私人专属网盘？教程拿去的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。