My Netflix clone React App - Day1 - Progress - 10%
Idea
I want to create a clone of Netflix app, at least minimum possibilities.
Getting Started with React App Development
The first step is to invoke the following command:
npx create-react-app netflix-clone
This creates a basic react app, prepares the development environment, by setting up folders like: public, src, and setting up files like: package.json, index.html within public folder, index.js within src folder and various other important files.
Initial Dependencies for our App
- React
- ReactDOM
If you want below screen to appear:
Then you need to basically update 3 files,
- index.js within src folder
- index.html within public folder
- Add a style.css, for controlling font
Within index.js file, you will have the following code:
import React from 'react';
import ReactDOM from 'react-dom';
class Main extends React.Component{
render(){
return(<h1>Hello World</h1>);
}
}
// we need to ask ReactDOM to render the above component within 'root' div of index.html
ReactDOM.render(<Main/>, document.getElementById('root'));
Code Commentary
- Main - It is a class component. It is extending React.Component. The render() function, whatever is inside this, gets displayed ultimately from this component.
- ReactDOM is responsible for rendering our Main component, within root div of index.html
Within index.html file, you need to have a div with id=’root’, within the body, with following code:
<html>
<head>
<link rel="stylesheet", href="style.css">
</head>
<body>
<div id='root'></div>
</body>
</html>
Within style.css file, you need to have a css markup for styling components within body:
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
Getting content for the movies
<a href="https://developers.themoviedb.org/3/getting-started/introduction">TheMovieDB</a>
Creating a Production Grade Build
When we are in development mode, the build occurs with the following command:
npm start
But, when we want to release into production, the code needs to be optimized, this is done with the following command:
npm run build
Features going to be dealt with:
- React Hooks - for state management
- Fetch API - for retrieving data
CSS-Aside
CSS has a concept called Box Model where in we treat every HTML element like a box.
There are 4 things within each box of HTML element:
- Content
- Padding
- Border
- Margin
Content is what we actually see, for example: text or image.
( Best place to learn about CSS-BOX is https://www.w3schools.com/css/css_boxmodel.asp )
Around the Content, there is a Padding, this is something like a small area created around the Content.
Then comes Border, Border is again something like a small area around Content & Padding.
Then comes Margin, Margin is like an area created outside the Border.
For example:
div{
width: 200px;
height: 200px;
padding: 20px;
border: 15px solid green;
margin: 20px;
}
Current Status of the web app - 10%
- Added h1 tags, with borders, which simulates boxes, containing movie content.
- Built app
- Deploying with Surge
Check out my app ( incomplete ) at https://shiny-plastic.surge.sh/
Github Project
https://github.com/inspire99/netflix-clone