如果你還在為前端的布局和JS頭疼，你應該看看這篇連載文章
新手如此入門React，我覺得你應該從下面幾點開始入手學習，今天給大家分享的是第一期，后續(xù)還會不斷的更新和實戰(zhàn)的分享。
一，了解React
1.聲明式(React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應用的每一個狀態(tài)設計簡潔的視圖，當數(shù)據(jù)改變時 React 能有效地更新并正確地渲染組件。以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調(diào)試)
2.組件化(創(chuàng)建擁有各自狀態(tài)的組件，再由這些組件構成更加復雜的 UI。組件邏輯使用 JavaScript 編寫而非模版，因此你可以輕松地在應用中傳遞數(shù)據(jù)并使得狀態(tài)與 DOM 分離。
3.高效(React通過和DOM的模擬，很大限度的減少與DOM的交互)
4.JSX(javascript的拓展語言，建議在React開發(fā)中使用JSX)
5.靈活(React可以和已知的庫或者是框架完美的配合)
6.單向響應的數(shù)據(jù)流(React 實現(xiàn)了單向響應的數(shù)據(jù)流，從而減少了重復代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單的原因)
無論你現(xiàn)在正在使用什么技術棧，你都可以隨時引入 React 來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。React 還可以使用 Node 進行服務器渲染，或使用 React Native 開發(fā)原生移動應用。
二，第一個React實例
頁面如下
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>Hello React!</title>
- <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
- <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
- <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
- </head>
- <body>
- <div id="example"></div>
- <script type="text/babel">
- ReactDOM.render(
- <h1>Hello, world!</h1>,
- document.getElementById('example')
- );
- </script>
- </body>
- </html>
說明：
html的頁面引入三個庫，
- react.min.js(React的核心庫)
- react-dom.min.js(提供與DOM相關的功能)
- babel.min.js (ES6代碼轉換為ES5代碼，還支持JSX)
三，React的元素操作
元素在React應用中最小的單位，主要作用就是為了描述屏幕上輸出的內(nèi)容。
- const = element = <h1>n你好，hello world</h1>
不過我們在引入React的時候都是如下操作，
- <div id="example"></div>
定義一個跟節(jié)點，div的所有內(nèi)容都將屬于 example的 React DOM來管理，我們也把這個稱為“根”DOM節(jié)點。
下一步就是將React的元素， const渲染到DOM節(jié)點中，方法如下：
- const element = <h1>Hello, world!</h1>;
- ReactDOM.render(
- element,# 元素
- document.getElementById('example') # 節(jié)點
- );
說明：采用的方法為：ReactDOM.render()，此方法的兩個重要點就是 元素和節(jié)點。
這個時候我們就會產(chǎn)生一個問題，我們需要在同一個節(jié)點顯示多個元素該怎么辦?
其實在React的特性中，元素都是不可改變的，但是我們可以通過更新的方式來達到我們需要實現(xiàn)的目的，比如重新創(chuàng)建一個元素再渲染到同一個節(jié)點，這樣元素的內(nèi)容就更新了。
- const element = (
- <div>
- <h1>Hello, world!</h1>
- <h2>我是前端工程師小A.</h2>
- </div>
- );
- ReactDOM.render(
- element,
- document.getElementById('example')
- );
- }
空口無憑，我們可以通過一個實際例子來總結React的第一章學習
- <!DoCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>Hello React!</title>
- <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
- <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
- <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
- </head>
- <body>
- <div id="example"></div>
- <script type="text/babel">
- function tick() {
- const element = (
- <div>
- <h1>Hello, world!</h1>
- <h2>現(xiàn)在是 {new Date().toLocaleTimeString()}.</h2>
- </div>
- );
- ReactDOM.render(
- element,
- document.getElementById('example')
- );
- }
- setInterval(tick, 1000);
- </script>
- </body>
- </html>
- </html>
怎么樣?是不是感覺React很簡單，當然通過一個簡單的hello world 還真的看不出什么東西，但是我們可以明顯的感覺到React更加的注重js的編寫，所有可以用js實現(xiàn)的就不用再去“麻煩”html，高效的DOM就是最好的一個例子。
