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

この連載記事「はじめての React」シリーズでは React が初めての人向けに React のアプリケーションの作成方法を順に説明します。Hello World から始めてインフラジスティックス製品の Ignite UI for React のグリッドやチャートを配置するところまでを目指します。

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

連載目次

1. 開発環境を整える。
2. React のアプリケーションを動かしてみる。
3. "Hello World!" と表示されるように書き換える。
4. Ignite UI for React のグリッドを配置する。（次回以降の記事）
5. Ignite UI for React のチャートを配置する。（次回以降の記事）

1. 開発環境を整える。

• Node.js (8.1.0 以上)、npm パッケージ マネージャー (5.6 以上)
• コードを編集するためのエディター

Node.js (8.1.0以上)、npm パッケージ マネージャー (5.6以上)

Node.js は Javascript の実行環境です。npm パッケージ マネージャーは npm パッケージをダウンロードしてインストールするのに必要なツールです。

プロンプトで、

>node -v
>npm -v

を実行すると、インストールされているバージョンが確認できます。バージョン番号が古い場合や、そもそもコマンドが実行できなかった場合は、Node.js のダウンロード ページから LTS のインストーラーをダウンロードしてインストールしてください。

コードを編集するためのエディター

自分の好みのもので構いません。この記事ではマイクロソフトの Visual Studio Code を使用します。

2. React のアプリケーションを動かしてみる。

create-react-app ツールを使用してアプリケーションのひな形を作成します。このツールはアプリケーションに必要なファイル、フォルダー、ライブラリーを自動生成・設定してくれます。

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

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

必要なパッケージがインストールされ、ブラウザーが自動で起動します。http://localhost:3000 が開き、次のようなページが表示されれば OK です。

3. "Hello World!" と表示されるように書き換える。

HelloWorld コンポーネントを作成する。

src フォルダーの直下に新規ファイルを追加し、ファイル名を HelloWorld.tsx とします。

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

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

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

export default HelloWorld;

HelloWorld コンポーネントを画面に配置する。

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

// 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;

プロンプトを開き、"npm start" コマンドを実行します。ブラウザーに "Hello World!" と表示されていれば OK です。

最後に

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

この記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなくインフラジスティックスまでお問い合わせください。