Understandingreact.com | Hagaha shabakada | Slzii.com

Soodejinaya

Slzii.com Raadi

https://understandingreact.com

Understanding React by Tony Alicea

Understanding React by Tony Alicea Enroll Now Understanding React Master React by Going Under-the-Hood by Tony Alicea Over the past decade, I've used a particular technique to teach front-end development to over 350,000 students. It's been enormously successful. Students have gotten jobs, pulled themselves out of poverty, started businesses, and become teachers themselves. Now, I'm bringing that teaching technique to the most popular JavaScript UI library in the world: React. You're about to master React in a way that few others do. By truly understanding it, under-the-hood. React Can't Be Ignored I'm not a React fanboy. I've used, taught, and enjoyed other frameworks like Vue, Angular, Solid, and Qwik. But in today's job market, it can't be ignored. Check out this chart from the latest State of JavaScript survey: See the top line? That's React. React's popularity isn't waning. It's rising. As a web developer, you need to understand React. Don't Imitate, Understand A lot of courses will use terms like "deep dive" and "under-the-hood", but not actually provide deep understanding. I call the technique I use "don't imitate, understand". If you just parrot what the instructor is typing on the screen you might end up with a finished product. But as soon as you're dealing with challenges and problems in a real-world job, you'll realize the parroting didn't teach you all that much. Instead of spending hours imitating me typing, we're going to dive deep together into React's source code to truly, deeply understand it. We'll write plenty of code along the way, including project work. But we won't write a line of code we don't fully break down and understand. JavaScript, Browsers, and Computer Science As we dig into React's internals, we'll discuss the underlying algorithms and data structures you need to know to understand React. We'll stop and spend time analyzing the vocabulary of React, making sure we don't use any terms that aren't clearly explained. We'll approach React like a computer scientist. React is just other people's JavaScript code. So why did they write the code they wrote? Why does React work the way it does? What are the benefits? What are the pitfalls? We'll also look at JavaScript and browser concepts that underpin React's choices and best practices. Things like immutability, object references, and the browser rendering engine. All of this to service using and debugging React well. These topics will take rules that normally would be memorized (like the rules of Hooks, "pure" component functions, and things you can't do in JSX) and instead be able to derive those rules ourselves naturally by understanding how components and Hooks are structured and work inside React. We'll write plenty of code along the way, including project work. But we won't write a line of code that we don't already fully understand. The Fiber Tree A foundation of our understanding of React will be the tree data structure.Understanding React actually means understanding three trees. The DOM, the React Element Tree, and vitally, the Fiber Tree. Understanding core React concepts like JSX, Hooks, reconciliation, and events properly all rely on understanding the Fiber Tree, as well as core data structures like Linked Lists and Queues. In this course we cover them all together. 100s of Animations We won't just look at code. I've put together hundreds of animations so that you can visualize what the React is doing internally and fully understand it. Then, we put that newfound mental model to use as we build your React knowledge piece-by-piece, and work through code examples together. The Curriculum The course contains 16.5 hours of video and is split into 27 modules. I've designed the course to be useful and accessible to developers new to React and will provide a deeper mental model and understanding to devs experienced in React. You'll also get access to 80 zip files containing the code in the lectures so you can compare with your own. And you can always ask questions in the lecture forums, where I answer personally. The course covers a wide range of topics in a logical, progressive order. From JSX to Hooks to State and Context to React Server Components and so much more. There's another thing I show you here that other courses don't. Rather than adding

elements everywhere, I show you how to think through marking up your React components with semantic, accessible HTML that improves your code's readability, maintainability, and SEO. Here's the full curriculum (select a module for more details): Introduction Introduction Setup A Basic React App The React Source Code The DOM and Declarative Programming The DOM and Declarative Programming HTML and Trees HTML, The Browser, and the DOM DOM Manipulation Conceptual Aside: Imperative vs. Declarative Programming The DOM and Imperative Programming The DOM and Declarative Programming React Elements React Elements Conceptual Aside: Recursion Conceptual Aside: POJOs Creating React Elements React Element Trees Conceptual Aside: DOM Element References React Elements and DOM Elements React DOM Updates Components Components Components and Reusability Conceptual Aside: Pure Functions Props Template Logic Element Properties JSX JSX Conceptual Aside: Markup and Tree Creation Shorthand Conceptual Aside: Transformation React Elements and JSX JSX and Thinking In Elements Conceptual Aside: HTML Authoring Fragment and HTML Authoring Fiber and Reconciliation Fiber and Reconciliation Root Creation and render Conceptual Aside: Trees and Linked Lists Fiber, Fiber Nodes, and Fiber Trees Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem Work-In-Progress Nodes Reconciliation and Work Execution Contexts and Pausing Work Execution Contexts Conceptual Aside: Execution Contexts and the Event Loop Fiber and Custom Execution Contexts Units of Work and The Work Loop Conceptual Aside: Equality Beginning, Completing, Bailing Out and Pausing Work Lanes and Priority React DOM and Rendering React DOM and Rendering Committing Work and The Renderer Mounting, Updating, and Unmounting Events Events DOM Events React Event Objects Synthetic Event Properties and Methods State State Conceptual Aside: State Machines Conceptual Aside: Pure Functions (again) UI: A Function of State Conceptual Aside: Reducers Actions and State Hooks, State, and Reducers Hooks and State Fibers, Hooks, and State Conceptual Aside: Queues Update Queues State and Re-renders useReducer (Part 1) useReducer (Part 2) useState (Part 1) useState (Part 2) Rules of Hooks useState (Part 3) Conceptual Aside: Shallow Equality and Object.is Conceptual Aside: Shallow Equality and Object.is Immutable State Adding Your Own Side Effects: useEffect Adding Your Own Side Effects: useEffect Conceptual Aside: Pure Functions and Side Effects Adding Your Own Effects Dependencies A Game of Ping Pong Unmounting and Effects Fetching Data...or not Conceptual Aside: Stale Closures useEffect and Stale Closures What Not to Do useRef and forwardRef useRef and forwardRef useRef useRef and the DOM forwardRef Custom Hooks Custom Hooks Extracting Custom Hooks Component Design Component Design Real World Complexity and Loops Lifting State Up &&, 0, and Ternary Operators Children useContext useContext Prop Drilling Context Context with Caution useId and Key useId and Key useId Key memo, useMemo, and useCallback memo, useMemo, and useCallback Conceptual Aside: Memoization memo useMemo useCallback React Forget useContext and Reducer useContext and Reducer useContext + Reducer 3rd Party State Management 3rd Party State Management Toolchains Toolchains Conceptual Aside: Toolchains Conceptual Aside: ES Modules Create React App Vite Frameworks Strict Mode Strict Mode Adding Strict Mode Extra Re-render Extra Effect Re-run Forms Forms Reorganizing Our App Uncontrolled Inputs Controlled Inputs form textarea, select, and More 3rd Party Form Help Future Form Features React Dev Tools React Dev Tools Using Dev Tools useDebugValue CSS and Components CSS and Components CSS and React Toolchains and CSS CSS Modules and more Class Project Class Project Spelling Bee HTML Authoring Getting the Data Header Honeycomb Shuffle Words and Letters Word List Score Highlighted Letter Final Thoughts Things to Try Meta-Frameworks Meta-Frameworks NextJS Remix Suspense Suspense Suspense and Frameworks Suspense and Remix React Server Components React Server Components Server Components Client Components and 'use client' RSC Payload Composing Client and Server Components Conclusion Conclusion Thank you (and your feedback)! What Others Are Saying ★★★★★ I highly recommend this course! Even for devs who have worked in React for years. Tony’s way of digging through the source code under the hood has completely changed my mental model. Incredibly valuable. - Heather M. This is the best React course I have taken and I have taken a few to be honest. You have overdelivered on this Tony. - Eyitayo O. Thank you Tony, for spending the time to approach React from a deeper perspective. - Nicolas G. I have clear picture now how React is working under the hood. And also the last project was fun. - Matija R. Remarkable course. - Nilkamal S. Magnificent! - Miroslav M. As a self-taught developer who transitioned from education to tech, his teaching style resonates with my teacher training – exploring the “why” instead of just the “how”, gradual build up of concepts, simple explanation of technical jargons, etc. The feeling of true understanding is a deep satisfaction that hacky tricks will not achieve. - Shelly C. Watch The First 6 Hours For Free I'm confident you will find this technique to be game-changing. I've seen it happen for students for a decade. It's how I've learned things during my 25 years of web dev. I'm so confident it will help you, that I put the first 6 hours of the course for free on my YouTube channel. Feel free to watch here. There's enough free training here, that even if you don't enroll in the full course you'll learn something about React that you didn't know before. About Me Hi, I'm Tony Alicea. I've been an application developer, database architect, UX designer, and tech educator for over 25 years.Over 350,000 students have enrolled in my courses on Udemy, Pluralsight, and Teachable (where this course is hosted). I've been a speaker at conferences like React Summit, the biggest React conference in the world. You can read more about me and my courses on my site. Join 1,202 Students and Gain Deep Understanding An accurate mental model will forever benefit your dev career. Understanding React $149 Lifetime Access Tax/VAT Included Buy Now INCLUDES ✓ 16.5 hours of deep dive video ✓ 158 lectures ✓ All source code ✓ Certificate of completion ✓ Questions answered by me personally ✓ Free future updates FAQs Do you offer team discounts? Yes! To request a discount for multiple seats for your team contact support@tonyalicea.dev. Do you offer Purchasing Power Parity (PPP) or student discounts? Yes, I believe in PPP and student discounts. You can fill out a request form here. PPP coupons are sent out every couple of weeks. Is this a subscription? No. This is a one time purchase for lifetime access to the course and all future updates. Links Tony's Site Course Site X/Twitter © 2024-present. Anthony P. Alicea. All rights reserved.

1729446601

https://understandingreact.com