【Bootcamp 3】 高収入エンジニアへの道｜フロントエンド編

初めての React アプリを作ろう

この章では、初めての React アプリを開発します。ここからはコーディングがメインで、Bootcamp の中でも楽しい部分になります。この章の最後には、React を使用したアプリの開発手順を理解し、React を使ったシンプルなアプリを作れるようになります。前回までの章をまだ読んでいない方は、順番に読むことをオススメします。

目次
・Bootcamp 0 - 時代遅れのプログラミング講座
・Bootcamp 1 - なぜ React なのか？
・Bootcamp 2 - React Component の世界に触れる
・Bootcamp 3 - 初めての React アプリを作ろう　→　今ここです
・Bootcamp 4 - React でウェブサイトを作る（前半）
・Bootcamp 5 - React でウェブサイトを作る（後半）
・Bootcamp 6 - ウェブサイトを公開しよう
・Bootcamp X - 最後に

こちらのマガジンから全てのノートが閲覧できます。

【Bootcamp】高収入エンジニアへの道｜フロントエンド編｜ace｜note

ゴールの確認

これから皆さんにとって初めての React アプリを作っていきます。まずは、この章でのゴールを確認しておきましょう。

この章では、「ALL BLACKS」という簡単な React アプリを作成します。このアプリの名前はラグビーニュージランド代表のニックネームが由来です。次のように、パネルをクリックして、全て黒になったらゲームクリアというシンプルなアプリになります。

React App

以下の GitHub からソースコードも確認できます。

kace-study/react-all-blacks

このアプリを作っていく過程で学べるスキルは以下になります。

・React を使ったアプリケーションの基本的な開発手順
・複数の React Component の組み合わせた方
・Props、State、Lifecycle の少し踏み込んだ理解

Create React App

それでは今回作るアプリのプロジェクトを作りましょう。前回の章で学んだ create-react-app を使います。react-bootcamp フォルダ以下で次のコマンドを入力してください。

$ create-react-app react-all-blacks