ReactJSのHello worldで解説_基礎知識

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

コード例の投稿を続ける前に、特に言及しなければなりません: 最近、AngularJS でコードを書いているので、初心者にとって ReactJS を学ぶのは少し難しいでしょう。今では、それらが役に立っていることを認めなければなりません。作業に関しては大きな違いがあります。それらの主な違いを比較する別のブログ記事を作成します。

ただし、大まかに言うと、私が ReactJS を学習する際に少し「急な」学習パスを選択した理由をいくつか示します。

• コンポーネント指向: ReactJS はコンポーネント指向です。つまり、UI 要素をコンポーネントとして扱う必要があります。興味深いことに、コンポーネントは構成可能です。これは、コンポーネントが 1 つ以上の内部コンポーネントを持つことができることを意味します。以下のコードはこれを示しています
• JSX 構文: 興味深い JSX (XML のような) 構文を使用してコードを記述します。 JSX トランスレーター (プリコンパイラー) は、この構文構造を明示的な JavaScript に変換するために使用されます

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

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

• コンポーネント
• イベントエージェント
• JSX 構文

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

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

です。

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

です。

デザインは次のとおりです。さらに、以下の概念を表すコードを見つけてください。

SayHello: コンポーザブル コンポーネント

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

1. getInitialState
2. ハンドル名送信
3. 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 つのメソッドがあります:

1. handleChange: onChange イベントをキャプチャするために使用されます
2. 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 id="Hello-this-props-data">Hello, {this.props.data}</h3>
  </div>
  );
  }
 });

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