這篇文章提供了程式碼實例和在React.js（一個Facebook工程師開發的被用於構建用戶界面的Javascript庫）中高水平的概念.這些概念會被詳細的發表在下面的文章裡.在此，我必須提示如果你是ReactJS專家並且感覺這些代碼需要改善，請您把建議寫信給我，我會及時適當的更新這篇文章/代碼.
在我繼續發表一些程式碼實例之前，我必須特別的提出：初學ReactJS會有一點困難，因為最近我一直在AngularJS上寫程式碼.到目前為止，我需要承認他們之間在幫助我們做UI工作時有很大的不同.我將發表另一篇博文對比他們之間的主要差異.
然而，在較高的水平上，以下是一些原因關於我為何在學習 ReactJS 時使用了略有些「陡峭」的學習路線：
- 以元件為導向的：ReactJS是面向元件的，也意味著，需要你將UI元素視為元件。有趣的是，組件是可組合的。這意味著一個組件可以具有一個或多個內部組件。下面的程式碼示範了這一點
- JSX Syntax：它使用了一個有趣的JSX（XML式的）語法來寫程式碼。 JSX轉換器（一個預編譯器）用來將此語法結構轉換為明顯的JavaScript
事件代理模型：它遵循了事件委託模型，以捕捉事件
以下是一些顯示在程式碼中的關鍵概念：
以下是組件已實現內容的簡要描述
- 輸入框元素，使用者可輸入其使用者名稱。在下面的文章中會提到，這個輸入框實際上是「UserName」元件
- div層元素，用來展示「Hello, userName」。在下面的文章中會提到，這個div層實際上是「HelloText」元件
以下是其如何設計的。此外，請找出能代表下面概念的程式碼。
SayHello: 可組合的元件
SayHello是一個父元件，包含兩個元件。這個父組件是由兩個內部組件所構成。其中一個元件是UserName，用來提供使用者輸入姓名的功能，另一個元件是HelloText，用來展示文本，例如Hello,world。這個父元件定義了下列三個不同的API：
- getInitialState
- handleNameSubmit
- render（這是一個必需的接口，一個元件需要定義render來告訴React回應如何渲染元件）
/
// This is the parent component comprising of two inner components
// One of the component is UserName which is used to allow user to enter their name
// Other component is HelloText which displays the text such as Hello, World
//
var SayHello = React.createClass({
// This is used to set the state, "data" which is
// accessed later in HelloText component to display the updated state
//
getInitialState: function() {
return {data: 'World'}
},
// It is recommended to capture events happening with any children
// at the parent level and set the new state that updates the children appropriately
handleNameSubmit: function(name) {
this.setState({data: name});
},
// Render method which is comprised of two components such as UserName and HelloText
//
render: function() {
return(
<div>
<UserName onNameSubmit={this.handleNameSubmit}/>
<HelloText data={this.state.data}/>
</div>
);
}
});
登入後複製
UserName元件
UserName元件有下列兩種方法：
- handleChange：用來捕捉onChange事件
- render：用於渲染元件
var UserName = React.createClass({
handleChange: function() {
var username = this.refs.username.getDOMNode().value.trim();
this.props.onNameSubmit({username: username });
this.refs.username.getDOMNode().value = '';
return false;
},
render: function() {
return(
<form role="form" onChange={this.handleChange}>
<div className="input-group input-group-lg">
<input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/>
</div>
</form>
);
}
});
登入後複製
HelloText組件
HelloText元件僅有一個方法用於渲染元件
render：包含了展示HelloText组件内容的代码
var HelloText = React.createClass({
render: function() {
return (
<div>
<h3>Hello, {this.props.data}</h3>
</div>
);
}
});
登入後複製
如果你希望得到全部的程式碼，我已經將程式碼掛在 github hello-reactjs page。請各位自由評論或給予建議。
