如何搭建一個「不可告人的」私人專屬網盤？教程拿去

雖然打造私人網盤的目的很很差意思說出來，可是一想到之後存一些東西不再怕莫名其妙地蒸發掉了，就開心的睡不着啊。

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

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

技術變現，到底怎麼變？