Angular 入門

ホーム > React の環境設定 > React 版の Hello, world!

React 版の Hello, world!

ここでは React の最初のアプリケーションを作成してみましょう。

React は軽量のフレームワークなので、利用する方法はいくつかありますが、 ここでは create-react-app パッケージを利用します。

まだ設定していない場合は「React の開発環境」を参考にインストールしてください。

次のコマンドで myapp1 という React アプリケーションを作成します。

$ create-react-app myapp1

このコマンドで myapp1 ディレクトリ以下にアプリケーションテンプレートが配置されます。

さっそく、実行してみましょう!

ディレクトリを移動して start します。

$ cd myapp1
$ npm start

これによって、次のようにブラウザから確認できるようになります。

上記のコマンドでは、次のようなファイル及びディレクトリ階層が作成されます。

コマンドのバージョンなどによって詳細は変わると思いますので、README.md に目を通すと良いと思います。

ざっと説明すると、ページテンプレートは public/index.html が ページテンプレートです。

スクリプトの開始点は src/index.js です。

この index.js では、テンプレート内の id が root の DOM 要素に App という React コンポーネントを設定しています。

Appsrc/App.js で定義されており、 そこに上のスクリーンショットにみられる Welcome to React の文字が確認できます。

詳細についての説明は省きますが、このように React が動作していることがわかります。

デプロイ準備

ここで仮にこれでアプリケーションが完成だとして、先にどのようにアプリケーションを展開するのかみてみましょう。

次のコマンドを実行すると、アプリケーションが最適化され、build サブディレクトリ以下にデプロイ用のファイルが作成されます。

$ npm run build

これを実行するには、次のコマンドです。

$ npm install -g serve
$ serve -s build

これでデフォルトでポート 5000 番でリクエスト待ちになります。

ギリギリまで削ぎ落としてみる

さて、それではもっと見通しが良くなるように、余分なコードを削除して React の学習をやりやすい環境を作りましょう。

src ディレクトリから *.css、logo.svg、App.test.js、registerServiceWorker.js を削除します。

src/index.js を次のようにシンプルにします。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

さらに src/App.js を次のようにします。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>Hello, world!</h1>
    );
  }
}

export default App;

さらに public ディレクトリから manifest.json を削除して、index.html の中で manifest.json を参照している行を削除してもいいと思います。

これで、やっとかなりシンプルな Hello, world になったはずです。

これをスタート地点にして、React の学習を進めていきましょう!

ホーム > React の環境設定 > React 版の Hello, world!