[react] Netflix clone

🍎 きどうはんのう

buildsフォルダ内>netflix-buid-youtubeフォルダ内で実行します.

npx create-react-app netflix-build-youtube --template redux

CRA(create-areact-app)とテンプレート指定でコピーを開始できます.

react-reduxプロジェクト起動.
李徳思は何ですか.
冗長性は、応答で最も一般的なステータス管理ライブラリの1つです.
冗長性により、構成部品のステータス更新ロジックを異なるファイルに分離して効率的に管理できます.
反応器で最もよく使われるライブラリであり、反応器だけで使用されるライブラリではありません.

私はまだ李徳思をよく知らない.李徳思はこれからもよく勉強しなければならない.

🍎 Firebaseの起動

Firebaseは、Webおよびモバイル開発に必要な機能を提供するBASである.
簡単に言えば、バックエンド開発により、サーバを個別に設計し、実装するのではなく、フロントエンド開発に集中できるサービスです.使用すると、ハブに配布されるようにurlが作成されていることがわかります.まず司会の概念と考えればいい

firebaseも初めての利用で、さらに勉強が必要です.

sudo npm install -g firebase-tools

全境npmを使用してFirebaseをインストールしました.

消防基地内に事業を追加した.

その項目は後で配布する.

srcフォルダで作業を開始します.

🍎 firebase.js

firebase.jsファイルを作成し、구성コピー後のfirebaseをクリックします.jsに貼り付けます.

🍎 index.js / index.css

何も触らない.

index.cssから選択者全体に、css効果を与えるだけです.

🍎 App.js / App.css

実際に画面に表示される内容等はここで定義する.

作成

HomeScreen素子を画面に表示します.

🍎 HomeScreen.js / HomeScreen.css

🍎 Nav.js / Nav.css

navにはマークとアバター部分が入っています.

画面を100 px程度にスクロールして状態がtrue${show && 'nav__black'}->この部分でclassをアクティブにし、nav black色を生成します.

🍎 axios.js / Requests.js

// axios를 설치해준다.
npm install axios

axiosでサーバと通信して資料を受信する.

tmdbウェブサイトのapiを使用してサーバと通信し、資料を取得します.

・API docsでapi urlを確認し記入すればよい.

🍎 Banner.js / Banner.css

async、awaitで非同期通信を行います.

毎回

リフレッシュが実行されるfetchData()netflix jsonファイルをインポートしてmovieを置き換えます.

banner titleは映画タイトル、名前、オリジナル名の一つとして表現される.

buttonは2つ存在する.

説明生成truncate関数、150文字以上が省略記号として表示されます.

🍎 Row.js / Row.css

rowはこれらの部分を生成している.

moviesが初期値です.

非同期通信でムービー編成を受信する.

🍎 配備Firebase

firebase login -> firebase init -> 

使用

spacebar科enterオプションを選択します.

npm run build  -> firebase deploy

これで配置でき、修正が必要な場合は再構築・配置する.

導入urlに入ると配備が見えてきます.