Works by

Ren's blog

アプリケーションバックエンド中心に書いていきます

【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!」と表示されていることがわかります。

f:id:rennnosukesann:20180520015255p:plain

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')
);