Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more.
Code:
React Front To Back 2022 Course:
???? Support The Channel!
Timestamps:
0:00 – Intro & Slides
12:37 – Create a React app
14:52 – Files & folders
18:54 – App component & JSX
22:39 – Expressions in JSX
23:49 – Creating a component
27:18 – Component Props
28:50 – PropTypes
30:42 – Styling
34:17 – Button Component
37:46 – Events
40:18 – Tasks Component
41:03 – Create a list with .map()
43:07 – State & useState Hook
44:55 – Global state
46:52 – Task Component
49:30 – Icons with react-icons
51:41 – Delete task & prop drilling
55:50 – Optional message if no tasks
56:58 – Toggle reminder & conditional styling
1:03:13 – Add Task Form
1:06:16 – Form input state (controlled components)
1:09:18 – Add task submit
1:14:36 – showAddTask state
1:15:58 – Button toggle
1:19:33 – Build for production
1:21:51 – JSON Server
1:25:53 – useEffect Hook & Fetch tasks from server
1:30:13 – Delete task from server
1:31:51 – Add task to server
1:35:15 – Toggle reminder on server
1:39:15 – Routing, footer & about
Learn React JS – Full Course for Beginners – Tutorial 2019
React.js is a JavaScript library for building dynamic web applications. Upon completion of this course, you’ll know everything you need in order to build web applications in React. You can also try the interactive version of the course here:
This comprehensive introduction to React was created by Bob Ziroll (@bobziroll). Bob is the Director of Education at V School, an award-winning school of technology education.
????Tutorial Hell link mentioned in video:
????Virtual DOM video mentioned:
Check top comment to see what code you have to add to get React working locally.
⭐️Course Contents ⭐️
⌨️ (0:00:00) Course Introduction & Philosophy
⌨️ (0:05:22) What we’ll be building
⌨️ (0:06:24) Why React?
⌨️ (0:09:25) ReactDOM & JSX
⌨️ (0:16:19) ReactDOM & JSX Practice
⌨️ (0:20:34) Functional Components
⌨️ (0:24:32) Functional Components Practice
⌨️ (0:29:41) Move Components into Separate Files
⌨️ (0:35:07) Parent/Child Components
⌨️ (0:43:14) Parent/Child Component Practice
⌨️ (0:48:12) Todo App – Phase 1
⌨️ (0:50:50) Styling React with CSS Classes
⌨️ (0:55:56) Some Caveats
⌨️ (0:58:12) JSX to JavaScript and Back
⌨️ (1:02:11) Inline Styles with the Style Property
⌨️ (1:09:21) Todo App – Phase 2
⌨️ (1:12:42) Props Part 1 – Understanding the Concept
⌨️ (1:14:56) Props Part 2 – Reusable Components
⌨️ (1:17:29) Props in React
⌨️ (1:29:39) Props and Styling Practice
⌨️ (1:40:25) Mapping Components
⌨️ (1:48:27) Mapping Components Practice
⌨️ (1:53:44) Todo App – Phase 3
⌨️ (1:58:16) Class-based Components
⌨️ (2:03:32) Class-based Components Practice
⌨️ (2:07:11) State
⌨️ (2:12:08) State Practice
⌨️ (2:15:45) State Practice 2
⌨️ (2:19:59) Todo App – Phase 4
⌨️ (2:22:05) Handling Events in React
⌨️ (2:25:52) Todo App – Phase 5
⌨️ (2:27:11) Changing State
⌨️ (2:39:29) Todo App – Phase 6
⌨️ (2:47:14) Lifecycle Methods Part 1
⌨️ (2:56:45) Lifecycle Methods Part 2
⌨️ (3:00:07) Conditional Rendering
⌨️ (3:11:26) Conditional Rendering Part 2
⌨️ (3:14:21) Conditional rendering Practice
⌨️ (3:23:00) Todo App – Phase 7
⌨️ (3:25:34) Fetching data from an API
⌨️ (3:36:34) Forms Part 1
⌨️ (3:48:55) Forms Part 2
⌨️ (4:00:11) Forms Practice
⌨️ (4:24:29) Container/Component Architecture
⌨️ (4:35:53) Meme Generator Capstone Project
⌨️ (4:56:11) Writing Modern React Apps
⌨️ (5:02:17) Project Ideas for Practicing
⌨️ (5:03:06) Conclusion
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
#Learn #React #Full #Beginners #Tutorial
learn react native
react,react full course,react tutorial,react.js,tutorial,angular,react tutorial for beginners,javascript,es6,reactJS,crash course,react crash course,learn react,react components,jsx,react js tutorial,react course,learn react js
