Reactjs 快速入門介紹

jopen 9年前發布 | 27K 次閱讀前端技術 ReactJs

React.js介紹

根據他們自己的定義, React.js 是非死book 推出的一個用來構建用戶界面的 JavaScript 庫。
我第一次讀到 React 的時候, 它作為前端 JavaScript 的一個好方案馬上打動了我.
用 React 做了些小項目以后, 我的結論是它到底是一個很強大的框架.
這篇文章里, 我要描述怎樣盡可能快運行起 React.

JSX:?React 的語法

React 使用的是特殊的 JavaScript 語法, 叫做 JSX.
主要的目標是提供一個能表示 React 內部的 DOM 的符合直覺的語法糖,
這套內部的 DOM 被 React components 所使用, 是構建 React 應用的城磚.
React 關于 JSX 的官方教程上其他的用法也很好懂.

你的應用里使用 JSX 有多重方法, 但最終 JSX 代碼會被編譯到平常的 JavaScript.
第一種, 也是最簡單的一種辦法, 是引入 React 的JSXTransformer.js文件,
這個文件提供了將標記了 JSX 的 JavaScript 代碼編譯到普通 JavaScript 的方法.

我更喜歡第二種, 就是預先編譯好 JSX 代碼.
這個通過 React 的 JSX 命令行工具做起來最簡單:

$ npm install -g react-tools
$ cd project/
$ jsx --watch src/ build/

這樣以后, 使用 JSX 只要在你的 HTML 文件中引用build/whatever.js就好了.

開始運行

搞清楚你想用哪一種處理 JSX 的方案以后, 運行 React 就很平常了.
直接下載 react.js(或者指向 cdn), 再引用對應文件到 HTML 文檔的頭部:

<html>
    <head>
        <script src="react.js"></script>
        ...
    </head>
    <body>
        ...
        <script src="mine.js"></script>
    </body>
</html>

React 不依賴第三方的類庫(比如 jQuery), 所以不用去擔心.
只是, 要注意在文檔內容加載完成的位置引用你自己的代碼文件.

Components: React 的城磚

React 當中, components 是構建應用核心的城磚.
component 是各自獨立的, 模塊化, 在應用當中是動態的 HTML 的表示.
component 經常會是其他 React component 的子模塊.
這在下面的文本當中更明確:

/** @jsx React.DOM */
var Thing = React.createClass({
  render: function() {
    return (


<p>{this.props.name}</p>


    );
  }
});

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


<h1>My Things:</h1>

,
      <Thing name="Hello World!" />
    );
  }
});

React.renderComponent(
  <ThingList />,
  document.querySelector('body')
);

這個例子里,renderComponent把一個 component 渲染到給定的 DOM 節點, 啟動應用.

如果這是你第一次接觸 React, 其他一些東西會讓你感到非常奇怪.

這是把 HTML.. 寫在 JavaScript 里了?

不完全是. 你看到的是 JSX 的樣子, 這幾行看著像 HTML, 實際上不代表 DOM 節點.
實際上, 他們只是語法糖, 表示 React 內部的 DOM, 其中也包含了你前面定義的那些.
花括號里的代碼在語法當中被"轉義"了.
來看一下預編譯后的ThingListclass:

var ThingList = React.createClass({displayName: 'ThingList',
  render: function() {
    return (
      React.DOM.h1(null, "My Things:"),
      Thing( {name:"Hello World!"} )
    );
  }
});

如果這個版本對你來說更有意義, 那可以說達到預期了.
我剛用 React 的時候, 我非常看不慣 HTML 式的語法.
然而當你的應用一步步變得復雜起來, 你會開始很奇妙地贊賞 JSX 語法了. 比如:

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


<div className="complexThing">
        <Thing name="thing one" />
        <Thing name="thing two" />
      </div>

,
      <a href="back.html">Go Back</a>
    );
  }
});

// 對比下面, 非 JSX 的版本:

var ComplexThing = React.createClass({displayName: 'ComplexThing',
  render: function() {
    return (
      React.DOM.div( {className:"complexThing"}, 
        Thing( {name:"thing one"} ),
        Thing( {name:"thing two"} )
      ),
      React.DOM.a( {href:"back.html"}, "Go Back")
    );
  }
});

Components 和 State

我前面的例子你可能已經注意到陌生的內容了this.props.name.
props是哪里來的? 用來做什么?

每個 React component 都接收傳入的屬性, 定義在特定 component 實例上的不可變信息.
你可以把this.props想象成被傳入函數當中的參數.
但是, 因為他們是不可變的, component 被渲染后這些屬性就不能被改變了.
然后 state 根據需要被引入了.

出了上邊不可變的屬性, React 還有個私有屬性this.state.
當 state 被更新, component 就自動刷新渲染.

/** @jsx React.DOM */
var StatefulThing = React.createClass({
  updateName: function(event) {
    event.preventDefault();
    this.state.name = "Taylor";
  },
  setInitialState: function() {
    return (
      {name: "World"}
    );
  },
  render: function() {
    return (
      <a href="#" onClick={this.updateName}>
        My name is {this.state.name}
      </a>
    );
  }
});

React 用駝峰命名法來綁定事件 handler, 用這個函數來處理 event.

有一點注意一下, 目前我們看到所有的例子都沒有對你的應用的其他部分做什么設定.
React 僅僅是一個前端開發框架. 跟 Backbone.js 那樣的框架不同,
React 希望你自己處理跟服務器獲取和發送數據的工作.
這使得 React 作為一個前端的解決方案很好部署, 因為它僅僅要求你給它傳入數據.
React 會自己完成其他工作.

希望這篇文章能讓你了解到 React 是如何工作的.
如果你想學更多, 我推薦 React 官方的教程, 里面關于 React 的功能做了更廣泛的說明.

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1426036711935.html

前端技術 ReactJs