Vid1: Explaining components and the tree structure of components

vid3: creating a new app + structure of the app folder + starting the app +
explaining babel and jsx
vid4: render yur first hello world message
vid5: change the configuration of the project (package.json) using "eject"
vid9: let/var/const
vid10: objects and methods
vid11: the "this" keyword
vid12: binding the "this" keyword (changing its behaviour)
vid13: the arrow functions ()=>{}
vid14: arrow fucntions and the this keyword
vid15: the array.map() (for rendering list of items) + template litterals
vid16: object destructuring (extracting the properties of an object into variables)
vid17: the spread operator (to concatenat arrays or objects)
vid18: classes + constructor
vid19: inheritance + using the super() call for constructors
vid20: modules (splitting the code into multiple files) + import + export
vid21: Default and named exports
------
vid23: installing and configurating bootstrap
vid24: creating the components folder and writing the class component and render a
react component to the browser
vid25: rendering two or more elements (using div or react.fragment)
vid26: renderng dynamic data (using "state") + adding functions inside the
component class
vid27: adding attributes to the jsx elements (the html tags) + className + style
vid28: Rendering classes dynamically (dynamic values for bootstrap classes for
example) + refractoring methods
vid29: rendering lists (using the map method + setting the key attribute)
vid30: Conditionally rendering content (if.. else) (2 techniques) => (the 2nd
technique is the truthy and falsy)
vid31: handling events (onClick, onKeyDown, ...) => do not call the function using
the paranthesis
vid32: binding evenet hsndlers to "this" => using the bind to solve the denied
access to "this" on strict mode (using the constructor)
vid33: updating the state (using setState)
vid34: what happens behind the scenes when the state is updated
vid35: passing event arguments (using an inline method)
vid36: setting up the vidly project (with bootstrap and fontawesome)
vid37-41: exercices to build a list of movies (important)
vid43: using a component inside another component
vid44: passing data between components (USING PROPS)
vid45: passing children (children= html tags inside other html tags)
vid46: introducing the react dev tools (to debug react apps)
vid47: prop vs state (important)
vid48: Raising and handling events (Ex: Deleting a component inside another
component)
vid49: updating the state + chaning the way of writing props to easily modify it
vid50: explaianing the "single source of truth" principle
vid51: removing the local state (controlled component)
vid52: multiple components in sync + Passing data between components that are not
parent-child to each other
vid53: lifting state up (to the parent component)
vid54: stateless functional components (component that does no treating on data and
have no state (it takes all data via props)) => converting it to a function
vid55: Destructing arguments (for cleaner and simpler code)
vid56: explaining the lifecycle hooks (do something to a component in a certain
moment of its lifecycle)
vid57: the mounting phase ("constructor" to initialize properties of the class (ex:
the state), render, "componentDidMount" to make ajax calls to the server)
(IMPORTANT)
vid58: the updating phase (render, "componentDidUpdate" called after a component is
updated => new state or new props)
vid59: the unmount phase ("componentWillUnmount" when a component is going to be
removed from the dom)
vid60->64: excercies and solutions (important)
vid67: pagination component interface (how to think of it)
vid68: displaying pages
vid69: handling page change
vid70: paginating the data
vid71: type checking in pagination (check if the type of information is as we want
it to be)(PropTypes)
vid73: filtering component interface (how to think of it)
vid74: displaying the items of the list group (the filters)
vid75: setting the default props
vid76: handling filter selection
vid 77: Implement the filtering and get the corresponding data
vid78: adding "all genres" (important)
vid79: Extracting the movies table in a component(Super important for clean code
must rewatch) => to give same abstraction to the elements of the component
vid80: raising the sort event (sorting start from here)
vid81: implementing sorting
vid82: moving the responsibility of sorting to the child component to make it
independent and easily reusable
vid83: extracting table header (reusable table header component for better
practises)
vid84: extracting table body (reusable table body component for better practises)
vid85: Rendering the cell content of tables (Super important)
vid86 (suite): fixing the unique keys issue
vid87: adding the sort icon
vid88: extracting the table component (to make it reusable)
vid89: extracting methods
vid90: extracting arguments of functions
--------
vid94: adding routing (react-router-dom)
vid95: the switch component (+ the "exact" attribute) (super important)
vid96: starting to use single page applications (using the link component)
vid97: the route props (props added automatically to the components by the Route
component)
vid98: adding props to components when using the route component (using
render={...})
vid99: passing and reading route parameters (ex: product id) (must pay attention to
the order of Route components in the code)
vid100: optional route parameters (using '?')
vid101: Query string (url?query) => query stringparams are in the location object
vid102: redirects (ex: when trying to access an invalid route)
vid103: programmatic navigation (ex: redirect after submitting a form) (using the
history object)
vid104: nested routing (ex: two nav bars)
vid105->109: exercice (super important) + introducing the NavLink
-----
vid112: Buiding bootstrap form + a cool trick in vscode at 3:00
vid113: Handling form submission
vid114: get the values of the input fields (using Refs)
vid115: proper way to work with input fields and get their values (controlled
elements) (sync the input fields with the state of the component) (look at vid116
for multiple inputs)
vid116: (following vid115): handling multiple inputs properly (ex: username +
password) (super important)
vid117: Common errors (ex: undefined input..) (comeback take a look)
vid118: extracting reusable inputs (Super useful and must rewatch) (even bettre to
understand communication between components)
vid119: validating the form (and dealing with input errors)
vid120: building a basic validation function (returns username/password is required
if they are not filled)
vid121: displaying validation errors
vid122: validating a field on change (while typing) (+ showing errors)
vid123: implement validation rules (Using Joi library) (super important)
vid124: mapping the errors from Joi to the errors object in the state (here is the
sauce)
vid125: validating a field using Joi (on change)
vid126: disabling the submit button (unless the form is valid)
vid127: reviewing the code to decide which parts will be used to build a reusable
form component
vid128: extracting a reusable form and using it
vid129: extracting reusable helper rendering methods (for a reusable form
rendering) (rendering the inputs and the submit button) + using the "...rest"
operator
vid130->135: exercices (must redo esp.132+134)
-----------------
vid137: introducing the JSON Placeholder (to get fake backends to train on)
vid138: explaining the HTTP clients (FetchAPI, jQuery AJAX, Axios) + installing
axios
vid139: Using axios to GET data + explaining promises, await, async (super
important)
vid140: creating data (using axios)(post request) + explaining the difference
between methods in class (like componentDidMount) and properties that are set to
functions
vid141: explaining the lifecycle of a request (important to rewatch) (explaining
the network tab in the chrome dev tools)
vid142: updating data (PUT/PATCH)
vid143: deleting data
vid144: optimistic (update the ui then call the server.. if the call fails we
reverse back to the old state of the ui) vs pessimistic (not sure if the call to
the server s gonna succeed or not) updates (IMPORTANT)
vid145: expected (aka. client errors, ex: not found, ...) and unexpected (ex:
network down, server down, ...) errors
vid146: axios interceptors (to handle errors everywhere without repeting the code)
+ promise reject (to go to the catch block) (REWATCH)
vid147: extracting reusable http service (into a JS file to make t portable)
(important)
vid148: extracting a config module (reusable inside the app) (it has the "api end
point" in it)
vid149: displaying a toast notification (better than the alert)(better UI)
vid150: logging errors (saving them somewhere where we can access them) (using
SENTRY.io => logging as a service provider) => installing raven-js...
vid151: extracting a logging service (make it reusable & easy to be modified)
(important and useful)
vid154: installing mongodb on windows
vid155: setting up the backend and getting data from GITHUB (important)
vid156: disabling authentication & using postman to communicate with the db
(sending get and post requests)
vid157166->: exercices with solution (super important)
---------
vid168: registering a new user (sign up) (explaining how the authentication should
behave) (when new user OK, when already exists, return the error)
vid169: Submitting the registration form (creating a user service that is
responsible of communicating with the "users" end point) + posting a new user (sign
up)
vid170: Registration (dealing with the scenario when the user already exist in the
db) (handling registration errors)
vid171: Log in (explanation how the client and the server should communicate to
create a user)
vid172: submitting the login form
vid173: handling the login errors