DEV Community

Cliff Likovo
Cliff Likovo

Posted on

React Concepts Every React Developer Should know.

  1. 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 Depth

  2. Components: 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

  3. 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

  4. 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

  5. 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

  6. 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

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

  8. 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

  9. 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 Boateng

  10. Styling: 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

  11. 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

  12. React Router: React Router enables routing and navigation in React applications. Official Documentation, React Router Tutorial by Tyler McGinnis

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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)

Collapse
 
brense profile image
Rense Bakker

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.

Collapse
 
uniquemw profile image
Cliff Likovo

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?

Collapse
 
brense profile image
Rense Bakker

You run as far as you can.

Collapse
 
philbarbosa profile image
Phillip Barbosa

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.