| 学習時間 | 10時間 |
|---|---|
| 難易度 | 初級 |
| 質問投稿 | 可 |
Webの基礎を学びながらReact Hooksでポートフォリオサイトを作ろう
Webフロントエンドを始めるならココから！Web技術の基礎から、JavaSciprtの文法を学び、Reactでアプリケーション開発を経験できます。Github APIを利用して、自身のポートフォリオを可視化する動的Webサイトを構築します。Netlifyを使ったデプロイまで学習します。
ReactやVue.jsの学習の前に、必要なフロントエンドの知識を抑えていますか？
私はTechpitで以前『RailsとReactでUberEats風SPAアプリケーションをつくってみよう！』の教材を執筆しました。
https://www.techpit.jp/courses/138
しかし、その教材のレビューや周りの購入者さんの声を聞くと、「元々サーバーサイドの技術は勉強していて購入したけれど、JavaScriptやフロントエンドの学習をそこまでしていなく難しく感じた」という声がありました。
Reactの学習以前に必要なJavaScriptやWebの知識が不足している方が一定数いらっしゃり、Reactの学習が大変そうに見えました。
一方で、いち早くReactやVue.jsを学習したい気持ちがあり、前回執筆したUberEatsの教材を手に取っていただいた向上心は共感できます。
そこで、前回のUber Eatsの教材のいただいた声から、本教材ではReactやVue.jsの学習の前に、最低抑えてほしいフロントエンドの基礎をまとめました。
例えば 「URL, HTTP通信」 を取り上げましたが、RESTの概要を理解し、正しくURLを設計することはアプリケーションをつくるうえで重要なはじめの第一歩です。その画面が扱うリソースはなにか？またそれを全体から見た時に、どのように表現するか？を考えるうえで、URLとはなにか、RESTfulとはなにか、を知る必要があります。
また、バックエンドとの通信を必要とするアプリケーションではHTTP通信の理解も必須です。今回はaxiosというライブラリを使ってAPIとの通信を行いますが、その部分の実装においてもHTTPリクエストがどのように行われるのか？を知っておくと、理解がしやすいと思います。
ReactやVueなどを使うと、JavaScriptの基礎文法をあまり知らなくてもいいと思われる方がひょっとしたらいらっしゃるかもしれませんが、そんなことはありません。
例えば配列の検索ひとつとっても、どの書き方(mapやforEachなど)が適切か？また綺麗に書けるか？そして、パフォーマンスはどうか？など考えることがあります。そのためには、言語の基礎文法を知っておくことはもちろん、それぞれをどのようにReactで使うべきか？を考えておくことをおすすめします。
さらに本教材ではReactの基礎でもつまずかないようにReactの基礎も収録しています。
React編では、ポートフォリオサイト作成を通じて、ただ作るだけではなく、コンポーネント(Functional Component)やaxiosを使ったHTTP通信、useEffect、useState、useReducer、カスタムフックスなどを解説します。
ReactやVue.jsをすぐに学習したいけれど、JavaScriptやWebの基礎をまだキャッチアップされていない方やReactの基礎をキャッチアップしたい方はぜひ手にとってみてください。
学習内容
-
Webについて
- Webとは何か
- Webサイトが表示されるまでの流れ
- URL, HTTP通信
-
JavaScriptについて
- 基礎文法のおさらい
- 変数
- データ型
- 制御構文
- 関数
- map, forEach
- Promise, then...catch
- 基礎文法のおさらい
-
Reactについて
- コンポーネント(Functional Component)について
- axiosを使ったHTTP通信
- useEffect
- useState
- useReducer
- カスタムフックス
-
その他
- Github APIを使った開発
- Netlifyでのデプロイ、ホスティング
- リファクタリング
本教材の対象者
- HTML、CSSを学び、JavaScriptを勉強中の方
- Reactを勉強中だけど、自分で何を、どう作ったらいいのか迷っている方
- サーバーサイドは書けるので、フロントエンドを次は触ってみたいという方
学ばないこと
- HTML、CSSの基礎
本教材の対応バージョン
- React ^17.0.2
本教材で質問対応可能なOSや環境
- Mac OS