日本一在线中文字幕天堂,www一片黄,亚洲网站在线看

新手如此入門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實例

頁面如下

<!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應用中最小的單位，主要作用就是為了描述屏幕上輸出的內容。

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

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

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

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

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

const element = <h1>Hello, world!</h1>;

ReactDOM.render(

element,# 元素

document.getElementById('example') # 節點

);

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

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

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

  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>現在是 {new Date().toLocaleTimeString()}.</h2>

    </div>

  );

  ReactDOM.render(

    element,

    document.getElementById('example')

  );

}

setInterval(tick, 1000);

</script>

</body>

</html>

</html>