【注意！】
2024年4月末にこちらの本の内容を大幅リニューアルしました！

<a href="https://note.com/terry10/n/nf0674af97617" target="_blank" rel="nofollow noopener noreferrer">https://note.com/terry10/n/nf0674af97617</a>

※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です

多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。

こちらのツイートで無料配布について告知しています！
↓
<a href="https://x.com/teriteri_code/status/1783358352447414464" target="_blank" rel="nofollow noopener noreferrer">https://x.com/teriteri_code/status/1783358352447414464</a>

--- 

React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。

学べる事
- ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用
- React Hooksによるstate管理
- TypeScriptで外部APIを扱い、非同期通信でデータを取得
- movie-trailerにyoutubeを組み込む
- Firebaseでデプロイ

React、TypeScriptを使うこんな人に読んでほしい
- 入門書やチュートリアルをやった後に、実際に何か作ってみたいという人
- 普段仕事で基礎的なことはやっているけど、自分で1から何かを作ってみたい人

※技術ブログではReactを中心にプログラミングの知識などを解説したり、チュートリアルを作ったりしています。興味ある方は是非。
技術ブログ：<a href="https://terrblog.com/" target="_blank" rel="nofollow noopener noreferrer">https://terrblog.com/</a>


【注意！】
2024年4月末にこちらの本の内容を大幅リニューアルしました！

https://note.com/terry10/n/nf0674af97617

※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です

多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。

こちらのツイートで無料配布について告知しています！
↓
https://x.com/teriteri_code/status/1783358352447414464

--- 

React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。

学べる事
- ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用
- React Hooksによるstate管理
- TypeScriptで外部APIを扱い、非同期通信でデータを取得
- movie-trailerにyoutubeを組み込む
- Firebaseでデプロイ

React、TypeScriptを使うこんな人に読んでほしい
- 入門書やチュートリアルをやった後に、実際に何か作ってみたいという人
- 普段仕事で基礎的なことはやっているけど、自分で1から何かを作ってみたい人

※技術ブログではReactを中心にプログラミングの知識などを解説したり、チュートリアルを作ったりしています。興味ある方は是非。
技術ブログ：https://terrblog.com/


【React+TypeScript】Netflixのクローンを作るチュートリアル

プロジェクトの概要

APIKeyの取得しpostmanからAPIを送る

Reactの環境構築とAPI取得の下準備

Rowコンポーネントの作成

Bannerコンポーネントの作成

Navコンポーネントの追加

映画の画像クリックでトレイラーを表示する

firebaseでデプロイ

まとめ

firebase

react

typescript

てりー