ReactJS の Hello world によって開始されました

この記事では、ユーザー インターフェイスを構築するために Facebook エンジニアによって開発された Javascript ライブラリである React.js のコード例と高レベルの概念を説明します。これらの概念については、次の記事で詳しく説明します。 ReactJS の専門家であり、これらのコードを改善する必要があると感じている場合は、提案を私に書いてください。適時にこの記事/コードを更新します

いくつかのコード例を公開し続ける前に、特別に言及しなければなりません。最近私は AngularJS でコードを書いているので、初心者にとって ReactJS を学ぶのは少し難しいでしょう。UI 作業を支援する上で両者の間には大きな違いがあることを認めなければなりません。このブログ投稿では、それらの主な違いを比較します

ただし、大まかに言えば、私が ReactJS を学習する際に少し「急勾配の」学習パスを選択した理由は次のとおりです。

コンポーネント指向: ReactJS はコンポーネント指向です。つまり、UI 要素をコンポーネントとして考える必要があります。興味深いことに、コンポーネントは構成可能です。これは、コンポーネントが 1 つ以上の内部コンポーネントを持つことができることを意味します。以下のコードは、この

JSX 構文を示しています。興味深い JSX (XML のような) 構文を使用してコードを記述します。 JSX トランスレーター (プリコンパイラー) は、この構文構造を明示的な JavaScript に変換するために使用されます

イベント プロキシ モデル: イベント委任モデルに従ってイベントをキャプチャします

コードに示されている重要な概念をいくつか示します:

コンポーネント

イベントエージェント

JSX 構文

以下は、コンポーネントが実装した内容の簡単な説明です

- ユーザーがユーザー名を入力できる入力ボックス要素。次の記事で説明するように、この入力ボックスは実際には「UserName」コンポーネント

- 「Hello, userName」を表示するために使用される div レイヤー要素です。この div レイヤーが実際には「HelloText」コンポーネントであることについては、次の記事で説明します

それがどのように設計されているかは次のとおりです。さらに、以下の概念を表すコードを見つけてください。

SayHello: コンポーズ可能なコンポーネント

SayHello は、2 つのコンポーネントを含む親コンポーネントです。この親コンポーネントは 2 つの内部コンポーネントで構成されています。 1 つのコンポーネントは UserName で、ユーザーに名前を入力する機能を提供するために使用され、もう 1 つのコンポーネントは HelloText で、Hello, world などのテキストを表示するために使用されます。この親コンポーネントは、次の 3 つの異なる API を定義します:

getInitialState

handleNameSubmit

render (これは必須のインターフェイスです。コンポーネントは、応答としてコンポーネントをレンダリングする方法を React に指示するために render を定義する必要があります)

/
 // 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 コンポーネントには、次の 2 つのメソッドがあります:

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 コンポーネントにはメソッドが 1 つだけありますコンポーネントをレンダリングするための

render：包含了展示HelloText组件内容的代码
  
var HelloText = React.createClass({
  render: function() {
  return (
  <div>
   <h3>Hello, {this.props.data}</h3>
  </div>
  );
  }
 });

完全なコードを入手したい場合は、github hello-reactjs ページにコードを投稿しました。お気軽にコメントやご提案をお寄せください。

ReactJS の Hello world に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。