手を動かしながら学ぶReact入門 1. Create React App

WebフレームワークであるReactについて、実際に手を動かしながら学んでいきたいと思います。

1.　Create React Appでプロジェクトの雛形を作成　←　ここ
2.　Reactについて学ぶ
3.　三目並べを関数コンポーネントで実装する

そもそもReactって？

ユーザーインターフェース構築のためのJavaScriptライブラリ
https://ja.reactjs.org/

と記載がある通り、JavaScriptでユーザーインターフェースを構築するためのライブラリです。
コンポーネントと呼ばれる単位で要素を作り、それを組み上げてUIを構築していきます。

Create React Appでプロジェクトの雛形を作成

まずはCreate React AppでReactシングルページアプリケーションの雛形を作りましょう。

create-react-appの取得

yarnでcreate-react-appをインストールします。

$ yarn global add create-react-app

私の環境（Windows）ではyarnでインストールしましたが、command not found: create-react-appと怒られてしまいました。
どうやらパスが通っていなかったようで、C:\Users\<ユーザー名>\AppData\Local\Yarn\binを環境変数のPATHに追加することでcreate-react-appコマンドが打てるようになりました。

create-react-appの実行

create-react-appでプロジェクトを作成します。

$ create-react-app プロジェクト名

プロジェクト名のところは適当に変更してください。今回はプロジェクト名をreact-exampleとして実行します。
すると、下記のようなフォルダ構成が出来上がります。

初めてのReactアプリケーションの実行

yarn startでReactアプリケーションを実行できます。

$ yarn start

これを実行すると、デフォルトブラウザが立ち上がり下記のような画面が表示されます。

どうやら、localhost:3000でサーバーが立ち上がっていますね。
最終的なReactアプリケーション自体はサーバーを含みませんが、yarn startを行うとソースコードに変更がある度に動的に画面を更新してくれるサーバーを立ち上げます。そこにアクセスしているわけですね。

Reactアプリケーションのビルド

Webサーバーで静的ホスティングするためには、yarn buildコマンドを実行して、作成されたbuildフォルダの中身をWebサーバーに配置します。

$ yarn build

下記のようなフォルダができます。

Hello World

まずは余分なものを取り払って、Hello Worldだけを表示するようにしてみましょう。
CSS（App.css）とテスト用ファイル（App.test.js）は今回利用しないため、削除します。

App.jsをバッサリと削って、Hello Worldだけ表示するようにします。

App.js

-import logo from './logo.svg';
-import './App.css';
-
-
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <h1>Hello World</h1>
   );
 }

すっきりしましたね！
これをベースにReactの要素に触れていきたいと思います。

次：Reactについて学ぶ