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
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
Comments