React + webpack 開發單頁面應用簡明中文文檔教程（一）一些基礎概念

React 入門系列教程導航

React + webpack 開發單頁面應用簡明中文文檔教程（一）一些基礎概念
React + webpack 開發單頁面應用簡明中文文檔教程（二）創建項目
React + webpack 開發單頁面應用簡明中文文檔教程（三）目錄說明以及調整項目構架文件
React + webpack 開發單頁面應用簡明中文文檔教程（四）調整項目文件以及項目配置
React + webpack 開發單頁面應用簡明中文文檔教程（五）配置 api 接口請求文件
React + webpack 開發單頁面應用簡明中文文檔教程（六）渲染一個列表，初識 jsx 文件
React + webpack 開發單頁面應用簡明中文文檔教程（七）jsx 組件中調用組件、父組件給子組件傳值
React + webpack 開發單頁面應用簡明中文文檔教程（八）Link 跳轉以及編寫內容頁面
React + webpack 開發單頁面應用簡明中文文檔教程（九）子組件給父組件傳值
React + webpack 開發單頁面應用簡明中文文檔教程（十）在 jsx 和 scss 中使用圖片
React + webpack 開發單頁面應用簡明中文文檔教程（十一）將項目打包到子目錄運行

---

我之前寫了一系列的 vue 相關的入門博文，深受大家的歡迎。現在開發了幾個 reactjs 的小項目，略有心得，因此，想與大家分享。

由于之前有了 vue 開發的一些經驗，因此，這個系列的博文會相對比較簡單。

如果你是有過一些經驗的開發者，可以略過這篇博文，直接閱讀下一篇。如果你只是掌握了 jquery 這種原始開發模式的初級前端工程師，那么請先從本文開始閱讀。

開發環境以及生產環境

我嘗試用后端的概念來解釋。

當我們使用某種編譯型的語言來開發項目，例如 golang 這種語言。我們寫好程序腳本，然后在命令行中可以直接執行，不需要編譯。這就是開發環境。

當我們把程序開發好了，編譯成二進制文件，然后直接運行這個二進制文件，這就屬于生產環境。

簡單理解一下，不要和公司中的開發服務器環境、測試環境、預發布環境、以及生產環境等服務器環境搞混。

也就是說，我們在開發模式下編寫代碼，無需編譯，則我們稱之為開發環境。我們把我們開發的代碼進行編譯，將編譯之后的代碼放在某種其他的環境下運行，則稱之為生產環境。

我們前端本來是沒有所謂的這兩種差異的，因為無論是 html、css 還是 js 都是腳本型的語言，也就是說，是不需要編譯的，也就無所謂開發還是生產了。

但是，前端的發展日新月異，無論 html、css 還是 js 都有一些先天的缺陷，比如，css 不支持邏輯編寫，因此寫起來非常不便，于是我們發明了 less、sass 等預編譯語言，又比如 js 是弱類型語言，因此又搞了 typescript 這種強類型的腳本。等等等等。

但這還是不是最重要的，最最重要的是，我們的瀏覽器不隨著這些語言的發布或者更新就立即得到更新，因此，有很多很多牛逼的特性，在瀏覽器中都得不到支持。

所以，我們需要編譯，將我們寫的如 es6 的一些箭頭函數，以及其他等等各種東西，編譯成當前瀏覽器能夠運行的代碼。

因此，本來明明不需要編譯的前端，也需要編譯了。

既然是需要編譯，那么干脆來得狠點，就有了 Nodejs 環境。

事實上，無論是 vue 還是 react 亦或是其他的前端現代框架，都是以 node 為開發環境的了。

我們在 Nodejs 中開發項目，寫代碼，跑起來看效果，等等，這些都是在所謂的開發環境中。只有最終把整個項目編譯打包，將輸出的靜態文件，放到服務器的 nginx 或者 apache 中運行，才算放到了生產環境。

目前我們前端開發的大多數時候，都是在 node 下面開發的。

所以，我們需要安裝 nodejs。安裝方法請查看 Installing Node.js via package manager

開發操作系統的選擇

對于大多數前端開發者，都是在 windows 環境下開發的。我可以理解，但是，實際情況是 nodejs 的運行，在不同的系統下面還是有差異的，更多的時候，在類 unix 環境中，運行得更好。

所以，為了不必要的麻煩，最好將開發操作系統更換為其他操作系統。

首推 MACOS 系統環境

MacOS 是蘋果公司基于 unix 開發的一套圖形界面的操作系統。在圖形界面上無可挑剔，是大量設計師以及視頻工作者，亦或是咖啡館中裝逼的文青的必備操作系統。

但是，如果你僅僅認為它只是一個漂亮的操作系統的話，那就大錯特錯了?；?unix 的核心，使得 MacOS 命令行無比強大。再配合 brew 這樣的神器，簡直就是簡直了。

本人常年在 mac 下開發，已經無法自拔。

使用蘋果操作系統，最簡單的方法是去購買一臺蘋果筆記本。如果你不愿意購買蘋果電腦，也是可以使用蘋果系統的。大家可以參考我的黑蘋果系列專題博文 https://blog.csdn.net/fungleo/article/details/57572537

其次 Deepin 深度 linux 操作系統

在眾多的 linux 操作系統之中，原先深深折服我的是 archlinux 操作系統。其滾動更新的特性，可以讓我最先體驗到最新的軟件以及系統核心。其靈活的系統配置，可以讓我打造全世界獨一無二的系統環境。但是人過三十，懶得折騰。驀然回首，發現 Deepin 就在那燈火闌珊處。

這款操作系統最牛逼的特性就是，基本不用啥配置，裝上就能用。輸入法，瀏覽器，辦公軟件……深度致力打造一個開箱即用的系統環境。

對于我這個顏值控來說，最最最重要的是，深度操作系統非常非常的漂亮。

而對于大量 windows 用戶來說，切換 mac 系統最頭疼的事情是快捷鍵的不一致。而深度這點做得非常優秀，其大量的快捷鍵直接兼容 windows，因此，你基本可以零疼痛的切換操作系統。

深度核心開發者老王已經離開深度開發團隊。對于此事，我一直沒有發表看法。在這里小小的說兩句，這是一個好事。一個操作系統的發展，應該由大量的開發者順應用戶的需求進行開發，而不是一個英雄。英雄落幕固然可嘆，但大樹底下不長草卻也是真正的道理。希望深度借此機會，繼續深耕操作系統開發，為我們帶來更好的 linux 系統。

前端工程師如何使用深度作為開發系統，請參考我的系列博文 《Deepin Linux & 前端工程師》 https://blog.csdn.net/column/details/17970.html

其他 linux 操作系統

如果你選擇其他操作系統，我相信你一定對你使用的系統有所了解，我就不說啥了。

最后，如果您再 windows 下開發遇到了一些其特有的問題，請盡量自己嘗試解決，因為，本人是絕對幫不了你的。不是別的，真不會……

命令行的重要性

作為一個開發者，很多人并沒有意識到命令行的重要性。在一個前端都需要跑命令的時代，不掌握一些命令行操作，簡直對不起工程師的頭銜。

沒什么特殊的要說的，只是強調，要認識到命令行的重要性，要從心底里不要排斥命令行，甚至擁抱它。

不要畏懼，勇敢嘗試，你就會發現，很多你用鼠標操作了很多年的事情，簡直是太蠢了。

Unix 思想

沒有消息就是最好的消息。

一個工具只干一件事情。

嗯，第一個不說不行。但第二個才是我想說的。一個工具只干一件事情，所以開發項目最重要的是統籌能力，而不是代碼的開發能力。

也就是說，代碼的組織能力的重要性遠遠大于你寫代碼的能力。

什么是 react

前面扯了半天，終于嘮到點正題了。

這個和 jquery 是完全不一樣的概念，jquery 只是一個工具，而 react 是一個前端框架。

最最重要的是 react 只是 react 開發生態的其中一個小項目而已，其負責 UI 視圖的渲染。

在開發的時候，我們會用到很多圍繞 react 的其他工具，他們各司其職，各自完成各自的事情。

嗯。

javaScript es6 語法

你需要對 es6 語法有一個大概的了解，比如 let 取代 var，箭頭函數等。如果對這些一無所知，可能在接下來的學習中會感到比較困難。

阮一峰大哥電子書是一個很好的學習資料，其地址是： http://es6.ruanyifeng.com/ 不需要精通，一定要大概的看一遍，有一個大概的了解即可。

其他你該了解的事情

其他還有很多你該了解的事情，有時間請閱讀我寫的 vue 的前言博文 《vue基礎知識概述》https://blog.csdn.net/fungleo/article/details/77575077

github 這是代碼托管網站，幾乎所有的開源項目以及組件，全部托管在 github。包括我這篇文章。

npm 它是 node 的包管理器

嘮叨這么多，下面我們開車了。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。

總結

以上是生活随笔為你收集整理的React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念的全部內容，希望文章能夠幫你解決所遇到的問題。

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