【React】React+JSXを用いてUIコンポーネントを作成する①
前回の記事でJSXについて書いたので、今回は簡単なUIコンポーネント作成の流れをメモします。
前準備
create-react-app
をインストールし、Reactプロジェクトを作成します(アプリの立ち上げも行っておきます)。
$ brew install node $ npm install -g create-react-app $ mkdir YourReactProject; cd YourReactProjectDir $ create-react-app my-app $ cd my-app $ npm start
UIコンポーネントの雛形を作成
まずは簡単のため、既存のindex.js
を改変します。
src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; // HTML const renderHTML = <div> Hello, React! </div>; // 出力 ReactDOM.render( renderHTML, document.getElementById('root') );
上記のコードを保存し実行結果のページを開くと、「Hello, React!」と表示されていることがわかります。
1,2行目のimport
では、react``react-dom
をインポートしています。react-dom
はHTMLを出力するのに必要です。
import React from 'react'; import ReactDOM from 'react-dom';
次に出力するHTMLをJSXの記法に従い記述しています。後ほどこのrenderHTML
を変更して出力するUIを編集していきます。
// HTML const renderHTML = <div> Hello, React! </div>;
最後にHTMLの出力です。ReactDOM.render
メソッドは、第一引数に取るReact要素を第二引数に指定したDOMの子要素とします。
ReactDOM.render( renderHTML, document.getElementById('root') );