Build a Mini Netflix with React
What is React?
React is a JavaScript library created by Facebook for building fast and interactive user interfaces for efficient user interfaces and single page applications. With React, we can build reusable UI components in our app.
Install create-react-app
Facebook has a command line tool, create-react-app that can scaffold a progressive web app out of the box in less than a minute. If you don’t have it installed, please install and run the command below in your terminal:
npm install -g create-react-appThis will install the create-react-app command line tool, which will make it easy to initialize our app with React.
Setup React
Run the below command via the command line to create a new react project named mininetflix
create-react-app mininetflixNavigate to the mininetflix directory using the below command
cd mininetflixNow let’s add a CSS framework i.e bootstrap to style our app. Simply open the project and edit the public/index.html file and put the following snippet inside the <head> section just before the <title>.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />Install Dependencies
Let’s set up the dependencies below using npm, simply run the command npm i <package name> mentioned below.
npm install accepts an array of packages separated by space, which will create installation processes with the sequence of packages. Use the below command to install all the required packages for our project.
npm i auth0-js react-router react-router-dom history jwt-decode axios- auth0-js: Used for authentication
- react-router, react-router-dom: Used for routing within our app
- history: to manage browser history
- jwt-decode: Used for decoding the JSON Web Token (JWT) in the app
- axios: Used for making HTTP requests from the browser
Read more: https://tudip.com/blog-post/build-a-mini-netflix-with-react/
