2. Reactアプリの作成 - Kite0301/react-my-app GitHub Wiki

先ほどインストールした「create-react-app」を使うと、必要なファイル郡を一気に作成してくれます。
任意のディレクトリで、以下のコマンドを実行してください。

$ create-react-app my-app

my-app というディレクトリが作成され、それ以下にいくつかファイルが作成されたと思います。

src ディレクトリ以下のファイルは一旦不要ですので、すべて消します。

$ cd my-app
$ rm -f src/*

Reactのコードを書いていくためのファイルを index.js という名前で、src ディレクトリ直下に作成してください。

作成した index.js 内に、以下のコードを書いてください。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('root')
);

ターミナルで以下のコマンドを実行してください。

$ npm start

以下のような画面が表示されればOKです。

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/

ブラウザで「 http://localhost:3000/ 」にアクセスすると、「Hello World」が表示されているかと思います。

なお、ターミナルで npm start を実行したままにしておくことで、コードを変更するたびに自動でその変更を反映してくれます。

解説

ひとまず無事React開発を開始することができました。
ここまでに書いたコードの簡単な解説です。

import React from 'react';
import ReactDOM from 'react-dom';

追加したJSのコードの最初の2行で、Reactでの開発で必要なものを読み込んでいます。

ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('root')
);

残りの4行の部分は、「rootというid名をもったHTML要素の中で<h1>Hello World</h1>を表示する」という意味のコードです。

では、「rootというid名をもったHTML要素」はそもそもどこにあるのでしょうか？
それは my-app/public/index.html の29行目にすでに用意されています。

ブラウザで実際に表示されているHTMLはこの index.html であり、それにJSで要素を上書きしている、というイメージです。

⚠️ **GitHub.com Fallback** ⚠️