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

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

この章は、この Bootcamp の最終成果物である「Kace Gallery」というウェブサイト開発の後半部分になります。前回の章で作成したウェブサイトのテンプレートに画面遷移や画像検索などの機能を実装します。また、WebAPI を使用して写真データを取得して画面に表示させます。この章の最後には、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 でのデータ取得方法

前回のおさらい

前回の章で、「Kace Gallery」のテンプレートを開発しました。（ホームページとギャラリーページです。）

実装手順
STEP1：テンプレートを作る　→　DONE！
STEP2：ヘッダーからウェブページに遷移させる
STEP3：Home から Gallery に遷移させる
STEP4：Gallery でキーワード検索をできるようにする
STEP5：Photo をクリックしたら対象のページに遷移する

今回はそのテンプレートをもとに、必要な機能を順番に実装していきましょう。

STEP2：ヘッダーからウェブページに遷移させる

それでは、ヘッダーのリンクをクリックすると特定のウェブページに遷移できるようにしていきます。