JSX: JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. Official Documentation, JSX in React – Explained with Examples by Yogesh Chavan,
JSX In DepthComponents: Components are reusable and self-contained pieces of code that encapsulate the logic and UI of a part of your application. Official Documentation, React Components Explained by Manoj Singh Negi
Props: Props are inputs to a React component that allow data to be passed from a parent component to a child component. Official Documentation, React Props Guide by Tania Rascia, How Props Work in React – A Beginner's Guide by Oyedele Temitope
State: State represents the internal data of a component that can change over time. It is managed using hooks or class-based state. Official Documentation, React State and Lifecycle by Tania Rascia, How to Manage State in React by Jack Herrington
Lifecycle Methods: Lifecycle methods are called at different stages of a component's lifecycle, allowing you to hook into certain events. Official Documentation,React Lifecycle methods with examples by Manish Mandal, React Lifecycle Methods by Wojciech Baranowski
Hooks: Hooks allow you to use state and other React features in functional components. Official Documentation, React Hooks Guide by Tania Rascia, React Hooks by Example: useState and useEffect by Dave Ceddia
Conditional Rendering: Conditional rendering allows you to render different components or elements based on conditions. Official Documentation, React Conditional Rendering: A Comprehensive Guide by Robin Wieruch
Lists and Keys: Lists and keys are used when rendering dynamic lists of elements, ensuring efficient updates. Official Documentation, React Lists and Keys Explained by Robin Wieruch,Why do I need Keys in React Lists? by Adhithi Ravichandran
Forms and Controlled Components: Controlled components handle form inputs by keeping form data in component state. Official Documentation, Difference Between Controlled and Uncontrolled Components by Deniz Colak,
How to Build Forms in React by Dickson BoatengStyling: Various methods can be used to style React components, including CSS classes, inline styles, and libraries like styled-components. Official Documentation, Styling in React: 5 ways to style React apps by Neo Ighodaro
Context API: Context API allows you to share data across the component tree without manually passing props. Official Documentation, React Context Explained by Dave Ceddia, Understanding React Context by Robin Wieruch, How to Use the React Context API in Your Projects by Dickson Boateng
React Router: React Router enables routing and navigation in React applications. Official Documentation, React Router Tutorial by Tyler McGinnis
Virtual DOM: The Virtual DOM is a lightweight representation of the actual DOM, optimizing updates for better performance. Official Documentation, What is the virtual DOM in React? by Ibadehin Mojeed
React Fiber: React Fiber is a reconciliation algorithm that powers the rendering process in React, enabling better performance and asynchronous rendering. Official Documentation, A Cartoon Intro to Fiber by Lin Clark, React reconciliation: how it works and why should we care by NADIA MAKAREVICH
Higher-Order Components (HOC): HOCs are functions that take a component and return an enhanced component, enabling code reuse and composition. Official Documentation, React Higher-Order Components: A Comprehensive Guide by Robin Wieruch, Understanding React higher-order components by Hussain Arif
Render Props: Render props is a technique where a component receives a function as a prop, allowing dynamic rendering and data sharing. Official Documentation, Understanding React Render Props by Robin Wieruch, React Reference Guide: Render props by Ovie Okeh
Error Boundaries: Error boundaries are components that catch JavaScript errors during rendering and display fallback UI. Official Documentation, Use react-error-boundary to handle errors in React
React Hooks (Advanced Usage): Advanced usage of React hooks includes custom hooks, useCallback, useMemo, and more. Official Documentation, Understanding useMemo and useCallback by Joshua Comeau, useEffect vs useLayoutEffect by Kent C. Dodds, How to Build Your Own React Hooks: A Step-by-Step Guide by Reed Barger, useRef Explained by Sam Dent
NOTE: If I missed any concept please add it in the comments, including links to articles or blogs explaining the concept.
Top comments (4)
I would argue that react devs should actually make an effort to completely forget about lifecycle methods. They're deprecated and thinking in terms of lifecycle methods, while doing React hooks, leads to nasty bugs.
I disagree with you just because something is deprecated it doesn't mean you shouldn't learn it, what if you encounter an old codebase?
You run as far as you can.
React composition (detailed here) is an important React concept for UI devs grasp. While you've mentioned it in the section for HOC, it's better to list it separately.