April / May 2020
🔨 All React in Depth from scratch, with Redux, React Router DOM, Firebase, Paypal (Sand Box), React Player, themoviedb. From Udemy 'Maitriser React de A à Z - Créer son propre NETFLIX'.
Demo on Heroku.
- Decompose and prioritize main components
App
---Header
---Home page:
------Header Img
------Searchbar
------Posters List
---------Poster
------------Item
---------------Header
---------------HeaderDetails
---------------Stars
---------------Container
---------------Actor List
------------------Actor List
------Load Button / see more
- Decompose and prioritize Player Components
App
---Header
---MoviePlayer
------VideoPlayer
------MvPlayerList
---------MvPlayerListItem
- Decompose routing
App
---Header
---Details
------HeaderDetails
---------Container
---------Stars
------ActorList
---------Actors
- Decompose Redux
- State and Lifecycle of Components
- Higher-order components (HOC)
Function that takes a component as parameter and that return another component
- When to use states
- Does the data come(s) from a parent component with props?
- Does it stays unchanged during process?
- Can it be calculated using another state or props from the component?
=> 3xNO -> usually use states
=> identify in which component(s) the states have to 'live'
- Why use React.Fragment
<React.Fragment></React.Fragment> or <></>: used if we do not begin with
html or if we use invalid DOM in JSX:
"Fragments let you group a list of children without adding extra nodes to the DOM."
- Inverted data flow
Send data From children component to parent (ex: SearchBar, LoadingButton).
- React Router (Route, Link, Switch)
When you need to navigate through a React application with multiple views, you’ll need a router to manage the URLs. React Router takes care of that, keeping your application UI and the URL in sync.
- Redux
A Predictable State Container for JS Apps.
See my watch about Redux
Playground to test the following exemple
Exemple
//Initial state
const initialState = {
"name": "Vincent",
"age": 42
}
//REDUCER (state, action)
//Pure: always return a new state
//We use one reducer, but we can use several reducers if needed
const reducer = (state = initialState, action) => {
//If an action is dispatched
if(action.type === "INCREMENT_AGE"){
return {
"name": state.name,
"age": state.age + action.payload //payload = data emited
}
}
if(action.type === "CHANGE_NAME"){
return {
"name": action.payload,
"age": state.age
}
}
//Return the new state to the store
return state;
}
//STORE
//There is only one store
const store = Redux.createStore(reducer);
//Value of global state
store.getState()
// => {"name":"Vincent","age":42}
//ACTION CREATORS
//Functions that take arguments and return an action.
//Action 1 (it will display the state again)
const action1 = {
type: "INCREMENT_AGE", //type is mandatory
payload: 3 //properties can have any name
}
// => {"name":"Vincent","age":42}
//Dispatch action1 to reducer
store.dispatch(action1);
// => "type":"INCREMENT_AGE","payload":3}
//New state
//Value of new state in the store
store.getState();
// => {"name":"Vincent","age":45}
//Action 2 (it will display the state again)
const action2 = {
type: "CHANGE_NAME",
payload: "Daniel"
}
// => {"name":"Vincent","age":45}
//Dispatch action2 to reducer
store.dispatch(action2)
// => {"type":"CHANGE_NAME","payload":"Daniel"}
//New state
//Value of new state in the store
store.getState();
// => {"name":"Daniel","age":45}
- Redux: Connect
Higher-order component, connect components to Redux.
connect (A, B)(Component)
- A: function mapStateToProps, is used for selecting the part of the data from the store that the connected component needs.
- B: function mapDispatchToProps, is used for dispatching actions to the store.
Clone,
Then:
npm install
npm start
Open the app using http://localhost:3000/
Build test:
npm install -g serve
serve -s build
Open the app using http://localhost:5000/
Warning: you have to rename _config.js by config.js and provide your own key for API TMDB
See demo on GitHub page.
-
npm i react-icons --save -
npm i bootstrap --save -
npm i axios --save -
npm i react-cookie-consent -
npm i react-router-dom -
npm i redux -
npm i react-redux -
npm i react-player -
Provides utility functions for common programming tasks using the functional programming paradigm.
npm i lodash -
npm i firebase -
npm i react-firebaseui -
npm i bootstrap -
npm i reactstrap -
npm i react-paypal-express-checkout
- Udemy: Maitriser React de A à Z - Créer son propre NETFLIX
- Formation React - Maitriser le framework
- GitHub: udemy-react-netflix
- React.Component
- React Lifecycle Methods diagram
- ReactJS Higher Order Components Tutorial
- React Developer Tools Chrome
- React Developer Tools Firefox
- Redux Developer Tools Chrome
- Redux Developer Tools Firefox
- VSC: Reactjs code snippets
- Using index.js for Fun and Public Interfaces
- ReactJS Inverse Data Flow in ES6
- API TMDB (The Movie DataBase)
- Template literals (Template strings)
- React-router: How to manually invoke Link?
- 10 Lodash functions everyone should know
- Reactstrap
- Developer tools and resources to integrate PayPal Commerce Platform
- Sandbox Paypal
- How to Deploy Your React App to Heroku
- Heroku Buildpack for Node.js
- Deployment
- Heroku Configuration and Config Vars
- Using environment variables in a React application
- Causes of Heroku H10-App Crashed Error And How To Solve Them
- Deploy a React Chat App to Heroku