はじめての React - ① Hello World

インフラジスティックス・ジャパン、テクニカル コンサルティング チームの oquiron です。

この連載記事「はじめての React」シリーズでは <a href="https://ja.reactjs.org/" target="_blank" rel="noreferrer noopener">React</a> が初めての人向けに React のアプリケーションの作成方法を順に説明します。Hello World から始めてインフラジスティックス製品の <a href="https://jp.infragistics.com/products/ignite-ui-react" target="_blank" rel="noreferrer noopener">Ignite UI for React</a> のグリッドやチャートを配置するところまでを目指します。

この記事では、Hello World を表示させるところまで進めていきます。

<h1>連載目次</h1>
<ol>
<li><a href="#Index1">開発環境を整える。</a></li>
<li><a href="#Index2">React のアプリケーションを動かしてみる。</a></li>
<li><a href="#Index3">"Hello World!" と表示されるように書き換える。</a></li>
<li>Ignite UI for React のグリッドを配置する。（次回以降の記事）</li>
<li>Ignite UI for React のチャートを配置する。（次回以降の記事）</li>
</ol>
<h2 id="Index1">1. 開発環境を整える。</h2>
<ul>
<li><a href="https://nodejs.org/ja/download/" target="_blank" rel="noreferrer noopener">Node.js</a> (8.1.0 以上)、npm パッケージ マネージャー (5.6 以上)</li>
<li>コードを編集するためのエディター</li>
</ul>
<h3>Node.js (8.1.0以上)、npm パッケージ マネージャー (5.6以上)</h3>
<a href="https://nodejs.org/ja/" target="_blank" rel="noreferrer noopener">Node.js</a> は Javascript の実行環境です。npm パッケージ マネージャーは npm パッケージをダウンロードしてインストールするのに必要なツールです。

プロンプトで、

```DOS
>node -v
>npm -v
```

を実行すると、インストールされているバージョンが確認できます。バージョン番号が古い場合や、そもそもコマンドが実行できなかった場合は、Node.js の<a href="https://nodejs.org/ja/download/" target="_blank" rel="noreferrer noopener">ダウンロード ページ</a>から LTS のインストーラーをダウンロードしてインストールしてください。

<h3>コードを編集するためのエディター</h3>
自分の好みのもので構いません。この記事ではマイクロソフトの <a href="https://code.visualstudio.com/" target="_blank" rel="noreferrer noopener">Visual Studio Code</a> を使用します。

<h2 id="Index2">2. React のアプリケーションを動かしてみる。</h2>
create-react-app ツールを使用してアプリケーションのひな形を作成します。このツールはアプリケーションに必要なファイル、フォルダー、ライブラリーを自動生成・設定してくれます。

プロンプトで以下のコマンドを順に実行します。

```DOS
> npx create-react-app my-app --template typescript
> cd my-app
> npm start
```

必要なパッケージがインストールされ、ブラウザーが自動で起動します。http://localhost:3000 が開き、次のようなページが表示されれば OK です。
![26006613685912339_ReactNewApplicationTemplate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/13bf8fdc-067f-2df9-1629-e8dbfa2b87c8.png)

<h2 id="Index3">3. "Hello World!" と表示されるように書き換える。</h2>
<h3>HelloWorld コンポーネントを作成する。</h3>
src フォルダーの直下に新規ファイルを追加し、ファイル名を HelloWorld.tsx とします。
![26006613685912339_HelloWorldComponent_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/d1eee017-47d0-c6d4-2ca0-22025b0a2cb7.png)
![26006613685912339_HelloWorldComponent_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/6e649edf-0a5e-7f71-7126-c8494c973c9c.png)
![26006613685912339_HelloWorldComponent_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/73ec19ea-d281-9b83-b107-671724834e0e.png)

新規追加した src/HelloWorld.tsx を開き、以下のコードを貼り付け、保存します。

```Javascript
// src/HelloWorld.tsx
import React from 'react';

const HelloWorld = () => {
  return (
    <p>Hello World!</p>
  );
};

export default HelloWorld;
```

![26006613685912339_HelloWorldComponent_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/acd81beb-cf8e-d1a3-46d5-3de282bde0a3.png)

<h3>HelloWorld コンポーネントを画面に配置する。</h3>
src/App.tsx を開き、
①HelloWorld コンポーネントをインポートし、
②HelloWorld コンポーネントを画面に配置します。

```Javascript
// src/App.tsx
import React from 'react';
import logo from './logo.svg'; // 任意: このimportは不要なので削除してもOKです。
import HelloWorld from './HelloWorld';  // HelloWorld コンポーネントをインポートする。
import './App.css';

function App() {
  return (
    <div className="App">
      <HelloWorld /> {/* ②HelloWorldコンポーネントを画面上に配置する。 */}
    </div>
  );
}

export default App;
```

![26006613685912339_HelloWorldComponent_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/3645dc47-3bbd-3f6c-5368-fa16291c1a2d.png)

プロンプトを開き、"npm start" コマンドを実行します。ブラウザーに "Hello World!" と表示されていれば OK です。
![26006613685912339_HelloWorldComponent_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/995fe7ea-eafa-0d39-82de-08d5447707ad.png)

<h2>最後に</h2>
以上、React のひな形から Hello World が表示されるまでを見てきました。次回は、インフラジスティックス製品である Ignite UI for React のグリッドを表示させます。

この記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなく<a href="https://jp.infragistics.com/about-us/contact-us" target="_blank" rel="noreferrer noopener">インフラジスティックス</a>までお問い合わせください。