如果你還在為前端的布局和JS頭疼,你應該看看這篇連載文章

2020-12-22 51CTO

新手如此入門React，我覺得你應該從下面幾點開始入手學習，今天給大家分享的是第一期，後續還會不斷的更新和實戰的分享。

一，了解React

1.聲明式(React 使創建交互式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的視圖，當數據改變時 React 能有效地更新並正確地渲染組件。以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調試)

2.組件化(創建擁有各自狀態的組件，再由這些組件構成更加複雜的 UI。組件邏輯使用 JavaScript 編寫而非模版，因此你可以輕鬆地在應用中傳遞數據並使得狀態與 DOM 分離。

3.高效(React通過和DOM的模擬，很大限度的減少與DOM的交互)

4.JSX(javascript的拓展語言，建議在React開發中使用JSX)

5.靈活(React可以和已知的庫或者是框架完美的配合)

6.單向響應的數據流(React 實現了單向響應的數據流，從而減少了重複代碼，這也是它為什麼比傳統數據綁定更簡單的原因)

無論你現在正在使用什麼技術棧，你都可以隨時引入 React 來開發新特性，而不需要重寫現有代碼。React 還可以使用 Node 進行伺服器渲染，或使用 React Native 開發原生移動應用。

二，第一個React實例

頁面如下

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8" /> 
  5. <title>Hello React!</title> 
  6. <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> 
  7. <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> 
  8. <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> 
  9. </head> 
  10. <body> 
  11.   
  12. <div id="example"></div> 
  13. <script type="text/babel"> 
  14. ReactDOM.render( 
  15.     <h1>Hello, world!</h1>, 
  16.     document.getElementById('example') 
  17. ); 
  18. </script> 
  19.   
  20. </body> 
  21. </html> 

說明：

html的頁面引入三個庫，

  1. react.min.js(React的核心庫)
  2. react-dom.min.js(提供與DOM相關的功能)
  3. babel.min.js (ES6代碼轉換為ES5代碼，還支持JSX)

三，React的元素操作

元素在React應用中最小的單位，主要作用就是為了描述屏幕上輸出的內容。

  1. const = element = <h1>n你好，hello world</h1>  

不過我們在引入React的時候都是如下操作，

  1. <div id="example"></div>  

定義一個跟節點，div的所有內容都將屬於 example的 React DOM來管理，我們也把這個稱為「根」DOM節點。

下一步就是將React的元素， const渲染到DOM節點中，方法如下：

  1. const element = <h1>Hello, world!</h1>; 
  2. ReactDOM.render( 
  3.     element,# 元素 
  4.     document.getElementById('example') # 節點 
  5. ); 

說明：採用的方法為：ReactDOM.render()，此方法的兩個重要點就是 元素和節點。

這個時候我們就會產生一個問題，我們需要在同一個節點顯示多個元素該怎麼辦?

其實在React的特性中，元素都是不可改變的，但是我們可以通過更新的方式來達到我們需要實現的目的，比如重新創建一個元素再渲染到同一個節點，這樣元素的內容就更新了。

  1.   const element = ( 
  2.     <div> 
  3.       <h1>Hello, world!</h1> 
  4.       <h2>我是前端工程師小A.</h2> 
  5.     </div> 
  6.   ); 
  7.   ReactDOM.render( 
  8.     element, 
  9.     document.getElementById('example') 
  10.   ); 
  11. } 

空口無憑，我們可以通過一個實際例子來總結React的第一章學習

  1. <!DoCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8" /> 
  5. <title>Hello React!</title> 
  6. <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> 
  7. <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> 
  8. <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> 
  9. </head> 
  10. <body> 
  11. <div id="example"></div> 
  12. <script type="text/babel"> 
  13. function tick() { 
  14.   const element = ( 
  15.     <div> 
  16.       <h1>Hello, world!</h1> 
  17.       <h2>現在是 {new Date().toLocaleTimeString()}.</h2> 
  18.     </div> 
  19.   ); 
  20.   ReactDOM.render( 
  21.     element, 
  22.     document.getElementById('example') 
  23.   ); 
  24. } 
  25. setInterval(tick, 1000); 
  26. </script> 
  27. </body> 
  28. </html> 
  29. </html> 

怎麼樣?是不是感覺React很簡單，當然通過一個簡單的hello world 還真的看不出什麼東西，但是我們可以明顯的感覺到React更加的注重js的編寫，所有可以用js實現的就不用再去「麻煩」html，高效的DOM就是最好的一個例子。

【編輯推薦】

【責任編輯：

華軒

TEL：（010）68476606】

點讚 0

相關焦點

  • 26自學轉行前端(寫給和1年前一樣迷茫的我的你)
    說句實話，一開始就是被薪資高這三個字吸引了，連前端是什麼都搞不清楚狀態，就這麼糊裡糊塗的開始了，靠著一點c語言基礎，學起了javaSE，看看概念做做小例子，無比暢快，相見恨晚，後來才知道java和js完全不是一個概念。
  • 前端高效開發必備的 js 庫梳理
    作者： 徐小夕 來源：趣談前端之前有很多人問學好前端需要學習哪些 js 庫, 主流框架應該學 vue 還是 react ? 針對這些問題, 筆者來說說自己的看法和學習總結。首先我覺得在學習任何知識之前必須要有一個明確的學習目標, 知道自己為什麼要學它, 而不是看網上說的一股腦的給你灌輸各種知識, 讓你學習各種庫, 從而不斷的製造大家的焦慮感。前端由於入行門檻低, 更新換代很快, 每年都會有大量新的框架和庫出現, 也有大量庫被淘汰(比如 JQuery, 但是學習它的設計思想很有必要).
  • 基於Node.js 的爬蟲丨前端開發者
    前端開發者丨Node.js基於nodejs 的爬蟲 API接口項目,包括前端開發日報、知乎日報、前端top框架排行、妹紙福利、搞笑視頻、各類視頻新聞資訊 熱點詳情接口數據 https://ecitlm.github.io/Node-SpliderApi/#/原文地址：https://gitee.com/ecitlm/splider
  • 三年經驗的前端,如何理解JS三座大山
    本文轉載自【微信公眾號：前端人，ID:FrontendPeople】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言本篇文章比較適合 3 年以上的前端工作者，JS 三座大山分別指：原型與原型鏈，作用域及閉包，異步和單線程。
  • 你應該知道的前端小知識
    1.JS為什麼單線程一個簡單的原因就是，js在設計之初只是進行一些簡單的表單校驗，這完全不需要多線程，單線程完全可以勝任這項工作。即便後來前端發展迅速，承載的能力越來越多，也沒有發展到非多線程不可的程度。
  • Vue.js布局
    以開發單頁面為例，開發過程中為遇到，不同的頁面需要使用不同的頁面布局情況，下面我們將探索Vue.js中處理布局的多種方式。構建Vue Router驅動的Vue應用程式.（基本結構如下），它能很好的工作。（但假設有一個結帳流程，您不想顯示導航。或者您可能有帶側邊欄的產品頁面和沒有側邊欄的其他頁面等等）面對這種多樣性要求，我們要怎麼做來滿足業務需求的同時，保持代碼的可維護、易擴展呢？
  • 從0到1實現前端異常監控《第二篇》
    本文轉載自【微信公眾號： 前端人 ，ID：FrontendPeople】上一篇文章簡單的認識了前端常見的一些異常，及其各自出現場景，這是前端監控的第二篇文章，主要講述大致大致需要使用那些技術,下一篇講完成一個實際的sdk為什麼要做前端監控
  • Web前端是什麼意思?朗沃Web前端包含哪些內容
    朗沃Web前端包含哪簡而言之Web前端就是實現客戶端（手機和電腦）上看到的頁面和一些交互效果（比如點擊、查看詳情、查看更多）等，從事WEB網頁開發、HTML5頁面開發。2、Web前端開發具體要做什麼前端開發最主要的是掌握三種基本能力，HTML、CSS，JavaScript。
  • CSS進階:提高你前端水平的 4 個技巧
    隨著 Node.js 、react-native 等技術的不斷出現，和網際網路行業的創業的層出不窮，了解些前端知識，成為全棧攻城師，快速的產出原型，展示你的創意，對程式設計師，尤其是在創業的程式設計師來說，越來越重要，下面我們就跟隨著名國外開發者網站上的熱推文章《Leveling up in CSS》，從提升你的CSS技巧開始。
  • 北大青鳥整理:一名web前端工程師需要必備哪些技術和工具?
    最近，有小夥伴私信留言讓我總結一下：「一個合格的web前端需要會什麼技術？」我想了半天，合格的web前端當然符合企業的用人要求啊！那麼一名web前端工程師需要必備哪些技術和工具？想要成為一個高薪高職的Web前端工程師並不容易，你不僅需要掌握專業的技能點，還要具備較多的項目經驗。優秀的Web前端工程師需要掌握哪些技術工具嗎？接下來就給大家一一介紹。
  • 5款最火的Node.js框架,你都用過嗎?
    Node.js已經誕生10年，在這10年裡，它因後端簡化並發編程而被關注，因作為前端輔助開發工具而流行。今天，小編就給大家介紹5款最火的Node.js框架，來看看你有沒有用過吧。它的特點有：為構建語義正確的RESTful web服務進行了優化，可供大規模生產使用；對內省和性能進行了優化；它與HTTP動作、循環請求和響應直接協調工作；為DTrace提供自動支持；提供了到Web和客戶端組件的雙向通信，可以幫助廣播和存儲數據；可以立即系統地處理錯誤等。
  • 盤點7個強大的Node.js框架
    Node.js是由Ryan Dahl於2009年創建的，它是一個開源的跨平臺運行時環境，用於開發伺服器端和網絡應用程式，這篇文章的重點是Node.js框架，小編會給大家簡要盤點7個強大的Node框架，希望對大家有幫助。
  • 你還在粉底刷和美妝蛋之間糾結嗎?看完這篇文章你應該懂了
    你還在粉底刷和美妝蛋之間糾結嗎？看完這篇文章你應該懂了說起化妝這件事，試問誰不想擁有完美無瑕的底妝呢？清透自然的底妝，看起來舒服又高級，拍照無需開美顏，給人感覺就像自己原生好皮膚，很給形象加分。其實這種問題真的別在糾結了，沒有哪個勝過誰；怎麼選的話先要考慮兩點：1：底妝質地如果你的底妝產品比較稀薄，流動性強，那麼適合用刷子，出來的妝容會很服帖；如果流動性差，上臉很容易幹掉，那麼最好選擇打溼的美妝蛋，用它拍開會更均勻
  • 從前端性能優化引申出來的5道經典面試題
    但是當我們說到用戶體驗的時候，僅僅是這樣還達不到效果，所以有的前端團隊認為，首屏時間應該是從頁面加載到用戶可以進行正常的頁面操作時間，那麼我們就依照後者來進行說明js css 加載順序說渲染優化之前，我們還需要說一個小插曲，就是比較經典的一道問題"瀏覽器地址欄輸入url發生了什麼"，理解了這個我們才可以更清楚js,css
  • 你都去哪裡看技術文章?
    因為前陣子跟朋友們一起弄了一個以 web / mobile development 為主題的 weekly，每個禮拜在考慮要放哪些內容的時候，突然覺得：「你都去哪裡看技術文章？」或許也會是個有價值而且實用的主題，所以乾脆就來跟大家分享一下，我覺得不錯的每日資訊來源。
  • 《前端會客廳》對話winter和尤雨溪,深度探尋Vue3設計思想(上)
    本文作者：開課吧大聖前端會客廳是我和winter設計的一檔技術節目，每期會邀請一個嘉賓，暢聊前端技術。編譯還是用了rollup；不過生產環境其實也儘可能的利用es6的import，當你做懶加載分包的時候 ，如果瀏覽器不支持，動態的import是被polyfill的。熱加載 基本都是100ms以內 相比於大項目webpack2S左右的體驗，差距是很大的。
  • 如果你想投稿,請看看這篇文章
    刊登文章以讀者投稿的真實故事為主，在投稿原文的基礎上，阿鹿會酌情做一些改編和藝術加工，以保證文章最終質量。一年多以來，阿鹿收到了數以百千計的稿件。阿鹿深知，每個人的故事，對當事人來說，都有很重要的意義。但迫於無奈，為了保證公眾號質量，只能優中選優。
  • 讓你見識一下什麼叫最完整、最系統的前端學習路線
    根據開發者生態系統 2018 的調查數據，排名前三的程式語言分別是：Java (72%)、JavaScript (41%)、Python (36%) js是前端的核心，不會js更別說會前端，從2012年至今，「Web前端工程師」的需求持續走高，薪酬也是水漲船高，所以，有不少人立志要成為前端開發工程師。
  • 從0到1,搭建前端異常監控系統 下
    從0到1，Vue + Webpack + Node.js + Egg.js + Jest搭建前端異常監控系統（下）作者名：然叔上一篇我們主要談到的JS錯誤如何收集。這篇我們說說異常如何上報和分析。可以把你需要上報的錯誤數據放在querystring字符串中，利用這種方式就可以將錯誤上報到伺服器了。Ajax上報實際上我們也可以用ajax的方式上報錯誤，這和我們再業務程序中並沒有什麼區別。在這裡就不贅述。
  • 如果你有一隻吉娃娃,那麼不妨看看這篇文章,或許會收穫許多
    吉娃娃體型嬌小，需要的生活空間很小，是很適合家庭飼養的寵物之一，很多人都喜歡養吉娃娃，如果你有一隻吉娃娃的話，那麼你應該看看這篇文章，或許對你會有很多的收穫！3、要定期做好清潔護理工作雖然吉娃娃大多數時間都是在家裡活動，但是清潔工作還是要做的，這是因為它們的毛很容易沾染到一些髒的東西，如果不注意很容易得皮膚病。耳朵亦應經常清潔，還有，吉娃娃的指甲長的很快，且較為尖細，定期給它修剪指甲。