はじめての React - ① Hello World - インフラジスティックス・ジャパン株式会社Blog

こんにちは！インフラジスティックス・ジャパン、テクニカルコンサルティングチームの石橋です。

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

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

連載目次

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

1. 開発環境を整える。

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

Node.js (8.1.0以上)

Node.js は Javascript の実行環境です。プロンプトで node -v コマンドを実行することでインストールされているバージョンが確認できます。たとえば下の例では "v14.15.3" と表示されているので、14.15.3 がインストールされているのがわかります。

f:id:tekoriko:20210202135823p:plain

React を実行するには Node.js のバージョンが 8.1.0 以上である必要があります。バージョン番号がこれより古い場合、もしくは、node -v コマンドが実行できなかった場合は、Node.js のダウンロードページから LTS のインストーラーをダウンロードしてインストールしてください。

npm パッケージマネージャー (5.6以上)

npm パッケージマネージャーは npm パッケージをダウンロードしてインストールするのに必要なツールです。通常、Node.js をインストールすると npm パッケージマネージャーも一緒にインストールされます。

こちらも、プロンプトで npm -v コマンドを実行することでインストールされているバージョンが確認できます。

f:id:tekoriko:20210202140821p:plain

"6.14.9" と表示されているので、6.14.9 がインストールされているのがわかります。

React を利用するには、npm パッケージマネージャーのバージョンが 5.6 以上である必要があります。バージョン番号がこれより古い場合、もしくは、npm -v コマンドが実行できなかった場合は、Node.js のダウンロードページから LTS のインストーラーをダウンロードしてインストールしてください。

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

コードを編集するためのエディターが必要です。自分の好みのもので構いません。このブログではマイクロソフトの Visual Studio Code を使用したいと思います。

開発環境が整ったら、次はサンプルアプリケーションの作成と実行です。

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

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

プロンプトを開き、任意のフォルダー (このブログでは、C:\ReactSamples フォルダーを使用します) に移動し、以下のコマンドを順に実行してください。

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

f:id:tekoriko:20210204141311p:plain

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

f:id:tekoriko:20210202150354p:plain

これで新規アプリケーションのひな形の取得と実行が確認できました。次からはこのひな形を書き換えていきます。

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

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

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

f:id:tekoriko:20210204141756p:plain

f:id:tekoriko:20210204141956p:plain

f:id:tekoriko:20210204142248p:plain

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

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

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

export default HelloWorld;

f:id:tekoriko:20210204142709p:plain

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

src/App.tsx を開き、

①HelloWorld コンポーネントをインポートし、
②HelloWorld コンポーネントを画面に配置します。

// src/App.tsx
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;

f:id:tekoriko:20210204143330p:plain