Build and Deploy a YouTube Clone Application


React

Updated Jul 22nd, 2022

JS Mastery

Published 8/4/19

Create-react-app

Install axios and @material-ui/core (v4.3)

Deletes src folder content and create index.ja and App.ns files

Create youtube.js component 12m

Get API key from console.developers.google.com

Use baseURL inside of axios.create() as well as params property (later moved the params to the actual API call).

Import components from Material Ui

Inline CSS styling, (mentions it’s not a great idea).

Leverage m-ui grid component

Create SearchBar.js and VideoList.js and VideoDetail.js components and import into App.js

Used class-based components. A lot of the “this” keyword.

In the search bar component

he used paper and text fields from material UI / core

Paper comp got an elevation prop

Create a handle change function hooked up to an unchange prop, event.target.value and save this into state

In a handleSubmit fn he’s going to fire off and axios request

Heads and on form submit in app.js

Needs to transfer the state from search bar JS to app.js

Prevent the defaults on the form submit cuz in react you never want to refresh an application

In app.js in the handle submit he uses an async function to make call to API

In the video detail component

he uses the paper and typography component from material UI.

He also returns an iframe component which maybe built into React?

He sets a constant variable of video source equal to a template literal with some dynamic values in the URL.

Video List Component

He imports grid from material UI core

He sets the video list component to a functional component.

Creates a constant list of videos and sets it to videos.map the loop through the videos grabbed from the API request

Video item component

He imports grid paper and typography

Inside of the grid component is a paper component and he has an image tag with the dynamic source value

You want to have the video play when clicked in the video list And he does this by adding an on video select prop to the video list constant named list of videos.

componentDidMount

I don’t think this is really a thing anymore