Reactの基本的な仕組みを理解しよう (4/4)
作成:2017-04-01 09:17
更新:2017-04-01 09:17
更新:2017-04-01 09:17
■App.jsとAppコンポーネント
アプリケーションの表示部分は、「コンポーネント」によって行われます。このソース・コードがどうなっているか見てみましょう。
デフォルトでは、App.jsというスクリプトファイルが用意されており、ここにAppというコンポーネントのコードが記述されています。その内容を下に掲載しておきます。コードの内容を整理していきましょう。
・import文について
まず最初に、import文でいくつかのモジュールがインポートされています。最初に、import React, { Component } from 'react'; という文がありますが、これがReactのコンポーネント関係のオブジェクトをロードしている部分です。その後の2文は、logo.svgとApp.cssをロードするためのものです。
・Appクラスについて
ここでは、Appクラスというものが定義されています。JavaScriptでも、実はクラスを作成することができます。ES6と呼ばれるエディションからクラスの定義が可能になっています。(ReactがES6であることを思い出して下さい)。ここでは、Appクラスを以下のように定義しています。
Componentクラスを継承してAppクラスを作成しているのがわかるでしょう。このComponentというのが、コンポーネントのベースとなるクラスなのです。これを継承することで、コンポーネントとして機能するようになります。
・renderメソッドについて
このAppクラスの中には、renderというメソッドが1つだけ用意されています。これは以下のように書かれています。
returnで返している値が、そのままレンダリングの内容として扱われます。ここでは、returnしている値が以下のような形になっています。
HTMLのタグが書かれていますね。そう、「JSX」というやつです。ここで返されたタグがそのままAppコンポーネントの表示内容として出力されるのです。
――これで、Reactアプリケーションの基本的な内容がわかってきました。「コンポーネントを定義し、それを組み込んでレンダリングする」というのが、Reactで行っていることの全てなのです。
デフォルトでは、App.jsというスクリプトファイルが用意されており、ここにAppというコンポーネントのコードが記述されています。その内容を下に掲載しておきます。コードの内容を整理していきましょう。
・import文について
まず最初に、import文でいくつかのモジュールがインポートされています。最初に、import React, { Component } from 'react'; という文がありますが、これがReactのコンポーネント関係のオブジェクトをロードしている部分です。その後の2文は、logo.svgとApp.cssをロードするためのものです。
・Appクラスについて
ここでは、Appクラスというものが定義されています。JavaScriptでも、実はクラスを作成することができます。ES6と呼ばれるエディションからクラスの定義が可能になっています。(ReactがES6であることを思い出して下さい)。ここでは、Appクラスを以下のように定義しています。
class App extends Component {……}
Componentクラスを継承してAppクラスを作成しているのがわかるでしょう。このComponentというのが、コンポーネントのベースとなるクラスなのです。これを継承することで、コンポーネントとして機能するようになります。
・renderメソッドについて
このAppクラスの中には、renderというメソッドが1つだけ用意されています。これは以下のように書かれています。
render() {
return ……;
}
returnで返している値が、そのままレンダリングの内容として扱われます。ここでは、returnしている値が以下のような形になっています。
return (<div className="App">……略……</div);
HTMLのタグが書かれていますね。そう、「JSX」というやつです。ここで返されたタグがそのままAppコンポーネントの表示内容として出力されるのです。
――これで、Reactアプリケーションの基本的な内容がわかってきました。「コンポーネントを定義し、それを組み込んでレンダリングする」というのが、Reactで行っていることの全てなのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } export default App;
※関連コンテンツ