一個後端程序員的React進擊之路

時間  2019-11-07
標籤 一個 後端 程序員 react 進擊 之路 欄目 快樂工作 简体版
原文   原文鏈接

引言

Web前端

本文討論的前端僅表明Web前端css

前端三座大山

前端基礎無非就是HTML、CSS、JavaScript，但凡是程序員，說對此不瞭解幾乎是不可能的，這樣想一想，看來咱們都具有成爲前端程序員的潛質（偷笑）。html

後端中的前端

Web開發中，難道後端程序員就不會接觸前端內容了嗎，固然不是！Web後端中有個叫作模板引擎的技術 —— 即在服務端將數據渲染到HTML頁面的技術，該技術是Web後端程序員的基本技能之一。前端

例如：Java中的JSP、Thymleaf、FreeMarker；Python中的Mako、JinJia2等。該技術要求後端程序員首先就要掌握HTML、CSS、JavaScript，而後結合其它特有的標籤和語法來工做。vue

障礙

對於後端程序員，想要突破到前端的最大障礙就是佈局Layout，畢竟不是專職作前端的，並且不少公司，即便先後端還沒有分離（使用模板引擎），也要由專職前端先切好Html頁面，再由後端改形成模板引擎須要的形式，步驟很繁瑣，事倍功半，也所以致使後端程序員不多能對佈局Layout或者說CSS進行系統的學習。node

依賴於模棱兩可的知識體系，最終致使大部分後端程序員不肯意去寫頁面，不是由於不懂前端基礎，而是由於大部分時間均可能浪費在佈局Layout上。react

爲何學習前端？

固然，這裏咱們所謂「學習」是指「系統的去學習」。緣由有三：jquery

  • 避免有求於人，好比說本身忽然有了個好的Idea，正要去實現它，想到要浪費大量時間去搞佈局，還不如去啃中間件源碼；或者想要構建本身的博客，苦於佈局，最終仍是入坑到現成的靜態博客構建工具。
  • 大前端來了，前端更像後端，Node.js來了，ES6來了，前端有了本身的打包工具Webpack，有了本身的包管理工具npm\yarn，有了成熟的JavaScript框架react、vue、angular，有了腳手架，有了class、import、export和Lamda（箭頭表達式）。前端的生態更像後端了，因此學習起來能夠更加系統，再也不那麼違和，更容易上手。
  • 提升價值，Web開發——中間件——大數據——機器學習，這好像更像是後端的進擊路線，可是學習前端與它們相比，門檻和所需時間都不值一提，與其每次都爲它所累，不如隨便拿點時間把它幹掉，一勞永逸。

爲何要學習React？

其特色就再也不贅述，至少生態圈和用戶數量表現給咱們的是，Angular將死，React與Vue同臺競技——《React仍是Vue：你該如何選擇？》webpack

至於筆者爲何要學習React？ios

  • 身爲後端，我受夠了模板（有人也所以更喜歡Vue），而Vue剛好是這樣作的，相比React中只須要熟悉JavaScript ES6+Html的JSX寫法，Vue須要你從新學習更多的HTML擴展，相似於下面的v-on:click：
    <button v-on:click="reverseMessage">Reverse Message</button>
複製代碼
  • React-Native，筆者的女友是作Android前端的，爲了之後能輔助到她開發原生APP，天然像React這種同時適用於Web端和原生APP的框架，成爲了最佳選擇

正文

筆者是一個文檔控，但凡是有詳盡的官方文檔，都會對它忠貞不渝，不得不說在學會使用《Google翻譯》以前，真的是學了很多專業單詞啊，，，給出兩個依賴官方文檔的緣由：git

  • 權威性，官方文檔不像技術博客，不摻雜主觀看法；
  • 實時性，尤爲像React這種不斷更新的技術，官方教程之外的我的教程，很快就過期了，由於其中有些技術可能已經被遺棄或替代，因此不建議觀看我的教程，例如：阮一峯阮老師的《React 入門實例教程》（其實剛開始我也看過，，前車可鑑）

爲了更加方便讀者學習，在如下路線中，一樣會給出貼近官方文檔的中文文檔或博客，其實它們也大多數是學習官方文檔後，翻譯或總結獲得！！

1. CSS佈局

最初Html頁面的佈局由Float、Position來實現，再後來出現了display:table表格佈局，可是表格佈局存在性能問題，直到如今咱們擁有了兩種更加方便高效的佈局方式，咱們能夠根據兼容性和頁面複雜程度來選擇： Flex佈局：

Grid佈局：

2. JavaScript ES6

React中JSX語法無非就是HTML+JavaScript雜在一塊兒寫，而ES6是JavaScript的新標準，從很早開始React中的JavaScript就已經開始向ES6靠攏，直到如今（v16.6.3）已經徹底有ES6來寫。

3. Npm/Yarn

包管理工具。就像Java中Maven、Gradle，Python裏的Pip、Conda，能夠直接從倉庫中下載公共的代碼，避免重複造輪子，是大前端時代的必備工具。

Yarn筆者沒用過，不作贅述，Npm是Node環境下的包管理工具，安裝了Node環境就安裝了Npm，使用時要注意版本問題，不定時更新就好

4. 腳手架

所謂腳手架，顧名思義就是一個架子，能夠直接拿來用。在沒有腳手架前，大前端項目就須要咱們本身去創建文件結構，集成某些必要工具，建立必要配置文件，這些都是重複性的但又必不可少的步驟，就像咱們在IDE中新建Android項目，新建SpringBoot項目，這裏能夠理解成新建React項目。

Web端（PC或手機）腳手架—— Create-React-App：

React-Native（原生APP）腳手架—— Expo

5. React教程

6. Redux

隨着 JavaScript 單頁應用開發日趨複雜，JavaScript 須要管理比任什麼時候候都要多的 state （狀態）。考慮一些來自前端開發領域的新需求，如更新調優、服務端渲染、Websocket長鏈接、路由跳轉前請求數據等等。前端開發者正在經受史無前例的複雜性，難道就這麼放棄了嗎？固然不是，咱們可使用Redux來解決。

7. React-Redux

爲了方便使用，Redux 的做者封裝了一個 React 專用的庫 React-Redux。

8. React-Router

React Router 是一個基於 React 之上的強大路由庫，它可讓你嚮應用中快速地添加視圖和數據流，同時保持頁面與 URL 間的同步。若是不知道什麼是路由？能夠谷歌

9. Promise

Promise對象表示異步操做的最終完成（或失敗）及其結果值。

在JavaScript的世界中，全部代碼都是單線程執行的。因爲這個「缺陷」，致使JavaScript的全部網絡操做，瀏覽器事件，都必須是異步執行。異步執行能夠用回調函數實現，可是寫法顯得冗雜，因此引入了Promise —— 古人云：「君子一言既出;駟馬難追」，這種「承諾未來會執行」的對象在JavaScript中稱爲Promise對象。

10. Fetch API

Fetch API提供了一個用於獲取資源的接口（包括整個網絡）。 對於使用過XMLHttpRequest的人來講，這彷佛很熟悉，但新API提供了更強大，更靈活的功能集。不一樣於$.Ajax()、Axios，Fetch是HTML5的API，是標準，是將來的趨勢。

11. React-Native

React Native是一個使用Javascript構建移動端原生應用程序（iOS，Android）的庫。 它與React.js相同，只是不使用Web組件，而是使用原生組件。 若是你學過React.js，很快就能上手React Native，反之亦然。到這裏咱們已經基本掌握了React生態，因此能夠很容易入坑React-Native了

12. Webpack

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(static module bundler)。腳手架已經爲咱們集成並配置了Webpack，但爲了某些高級特性，咱們仍然有必要深刻了解下Webpack。

  • 什麼是Webpack？ WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
  • 爲什要使用WebPack？ 今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法
    • a:模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
    • b:相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能能裝換爲JavaScript文件使瀏覽器能夠識別；
    • c:scss，less等CSS預處理器.........

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是反鎖的，這就爲WebPack類的工具的出現提供了需求。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程