React js in 3.5 hours | Full beginners tutorial

Mike Dane

I’m starting a Coding RPG/Bootcamp! – https://simulator.dev​

Learn React js in 3.5 hours with this full tutorial for beginners!
Donate – https://www.mikedane.com/contribute/
Twitter – https://twitter.com/mike_dane

Table of Contents:
0:00 – Introduction
9:02 – What is the DOM?
25:00 – React vs ReactDOM
30:10 – Setting up React
38:47 – Babel & JSX
48:35 – JSX Interpolation
51:59 – React Components
56:34 – Create React App
1:08:52 – Structuring React components
1:13:42 – Building the CountButton component
1:21:09 – useState hook & React state management
1:33:50 – React functional component lifecycle
1:36:37 – Reusing components
1:38:20 – Props
1:44:59 – Props vs State
1:46:04 – Styling & style props
1:55:10 – External style sheets
2:03:45 – Building a search bar
2:07:02 – Handling inputs in React
2:10:23 – onUpdate input event
2:19:00 – Building a clear input button
2:23:00 – Conditional rendering
2:29:14 – Rendering a list of items & the map function
2:34:39 – The “key” prop
2:37:33 – Using the filter function to filter our list
2:42:01 – Making the SearchBar more reusable
2:48:25 – useEffect hook
2:58:08 – Simulating loading data with useEffect
3:04:51 – Adding a loading indicator
3:10:17 – Loading data from an external API
3:18:50 – The “children” prop
3:24:55 – Closing remarks & outro

Links:
Vs Code – https://code.visualstudio.com/
React Script Tags – https://reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags
Babel Playground – https://babeljs.io/repl
Babel script tag – https://babeljs.io/setup#installation (click on “In the browser” and scroll down to “usage” section)
Create React App – https://github.com/facebook/create-react-app#creating-an-app
Mac Terminal Tutorial – https://macpaw.com/how-to/use-terminal-on-mac
Windows Terminal Tutorial – https://techtipvault.com/windows/command-prompt-windows-10-cmd-guide/
Fake Store API – https://fakestoreapi.com/docs