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

React でウェブサイトを作る（前半）

この章は、この Bootcamp の最終成果物である「Kace Gallery」というウェブサイト開発の前半部分になります。今まで学んだ知識やスキルを全て使って、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

ゴールの確認

さて、これから最終成果物であるウェブサイトを作っていくことになりますが、まずは全体のゴールを確認しておきましょう。

この章と次の章では、「Kace Gallery」という写真やプロジェクトの一覧を表示・検索できるモダンなウェブサイトを作ります。

Kace Gallery

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

kace-study/react-photo-gallery

このウェブサイトを作っていく過程で学べるスキルは以下になります。

・React を使用したモダンなウェブサイト開発手法
・React を使用した画面遷移や検索機能開発
・Reactstrap による Bootstrap ライクな開発
・Pixabay API による WebAPI でのデータ取得方法

Create React App

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

$ create-react-app react-photo-gallery