ReactJS 快速入門

時間 2019-11-09

標籤 reactjs 快速入門简体版

原文原文鏈接

React 是近期很是熱門的一個前端開發框架。這篇文章將介紹如何使用 React 來建立用戶界面，但願可以起到拋磚引玉的效果。html

相對於其餘框架來講，React 提供了很是少的 API，如同 Gulp，越是少許的 API 同時意味着越多的可能性。正如那句名言所說：前端

Less is more.react

可是，精簡的 API 不是意味着沒有必定的學習成本，咱們仍是須要對此框架進行必定的理解。閒話很少說，讓咱們進入正題。首先，讓咱們來了解下 React 中使用到的一些術語。git

React 術語

React Elementsgithub

表明 HTML 元素的 JavaScript 對象。這些 JavaScript 對象最後被編譯成對應的 HTML 元素。gulp
Components瀏覽器

封裝 React Elements，包含一個或者多個 React Elements。 Components 用於建立能夠複用的 UI 模塊，例如分頁，側欄導航等。app
JSX框架

JSX 是 React 定義的一種 JavaScript 語法擴展，相似於 XML 。 JSX 是可選的，咱們徹底可使用 JavaScript 來編寫 React 應用，不過 JSX 提供了一套更爲簡便的方式來寫 React 應用。函數
Virtual DOM

Virtual DOM 是一個模擬 DOM 樹的 JavaScript 對象。 React 使用 Virtual DOM 來渲染 UI，同時監聽 Virtual DOM 上數據的變化並自動遷移這些變化到 UI 上。

DEMO 環境準備

首先，在 React Download 頁面下載 Starter Kit，解壓到某個地方。

進入到解壓後的 build 目錄，新建一個 index.html 文件，而且引用 react.js 和 JSXTransformer.js 後就能夠開始編寫 React 應用了。須要注意若是使用 JSX，那麼 script 標籤的 type 應該更改成 text/jsx。

<html>
  <head>
    <meta charset="utf-8" >
    <title>demo</title>
  </head>

  <body>

    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx" src="app.js"></script>
  </body>
</html>

第一個 React Element

建立一個 Element 只需調用 React.createElement 方法，並傳入元素信息便可。例如：

var div = React.createElement('div', null, "Hello React");

// 使用 JSX
var div = 

<div>Hello React</div>

建立以後就能夠調用 React.render 方法渲染到頁面上：

React.render(div, document.body);

第一個 React Component

React Component 抽象出相同 UI 組件的結構和邏輯。經過調用 React.createClass 方法來建立一個 Component，並傳入一個帶有 render 方法的對象類型的參數。

var HelloMessage = React.createClass({
  render: function () {
    return 

<div>Hello {this.props.name}</div>

;
  }
});

React.render(<HelloMessage name="iissnan" />, document.body);

咱們看到 React.createClass 接收了一個對象，並將這個方法返回賦值給 HelloMessage，最後調用 React.render 方法將這個新建的 Component 渲染到頁面上。從這個例子看來，一個 Component 與 Element 並沒有太大的差異。事實上， Component 已經準備好了，咱們能夠增添一些結構和功能來擴展這個 Component 。

Props

在上一個例子中，能夠看到有一個特殊的引用： this.props.name。這個引用稱之爲 Props，能夠將他想象成 Component 的設置選項。

在使用上， Props 相似於 HTML 中的屬性：

React.render(<HelloMessage name="foo" />, document.body);

在 Component 內部，經過 this.props.name 來引用這個 Props：

var HelloMessage = React.createClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  }
});

須要注意的是， Props 僅用來定製 Component，這些數據不該該被改動。若是涉及到須要作改動的數據，得考慮使用 state。

Stateful Component

State 數據表明 Component 的狀態，用於維護 Component 內部的狀態。當 State 發生改變以後， React 將會從新渲染 UI 。調用與 Props 相似， State 數據經過 this.state 訪問：

var Greeting = React.createClass({
  getInitialState: function () {
    return { greeted: false };
  },
  greet: function () {
    this.setState({
      greeted: true
    });
  },
  render: function () {
    var response = this.state.greeted ? 'Hi' : '';

    return (
      <div>
        <div>Hello {this.props.name}</div>
        <span>{response}</span>
        <button onClick={this.greet}>Hi</button>
      </div>
    );
  }
});

React.render(<Greeting name="foo" />, document.body);

這個例子中加了幾個函數，咱們一一來看下。首先是 getInitialState ，這個方法在 Component 初始化的時候被調用，返回 Component 初始時的狀態數據。例子中，咱們設置了 Component 初始時的 greeted 爲 false。
而後是 greet 方法，這個方法被調用以後將修改狀態數據 greeted 爲 true。

當 State 發生改變後， React 將 Component 渲染到 Virtual DOM，新的 Virtual DOM 與舊版本的進行比對，檢查出改變的部分並更新瀏覽器的 DOM。在這個例子中，當按鈕被點擊後， greeted狀態數據發生了變化，UI 跟隨着更新。

組合

結合 Props 和 State，咱們就可使用 Component 來建立完整的應用。

var Greeting = React.createClass({
  getInitialState: function () {
    return { greeted: false };
  },
  greet: function () {
    this.setState({
      greeted: true
    });
  },
  render: function () {
    var response = this.state.greeted ? 'Hi' : '';

    return (
      <div>
        <div>Hello {this.props.name}</div>
        <span>{response}</span>
        <button onClick={this.greet}>Hi</button>
      </div>
    );
  }
});

var users = ["foo", "bar", "baz"];

var GreetingApp = React.createClass({
  render: function () {
    var greetings = this.props.users.map(function (user) {
      return <Greeting name={user} />;
    });

    return <div>{greetings}</div>;
  }
});

React.render(<GreetingApp users={users} />, document.body);

原始出處： IIssNan's Notes - ReactJS 快速入門

1. ReactJS入門之ReactJS簡介
2. ES6快速入門 ES6 快速入門
3. ReactNative快速入門筆記
4. 快速入門
5. 快速學習ReactJS-簡介
6. ReactJS入門指南
7. ReactJS入門教程
8. ReactJS入門基礎
9. ReactJs入門教程
10. 【ES6+ReactJs】第3章：ReactJS入門(2)
更多相關文章...
• SQL 快速參考 - SQL 教程
• Eclipse 快速修復 - Eclipse 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。