React Concepts Every React Developer Should know.
Tags: react, javascript, frontend, webdev
Published: 2023-05-24 21:22:34


1. JSX: JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. [Official Documentation](https://react.dev/learn/writing-markup-with-jsx), [JSX in React – Explained with Examples by Yogesh Chavan](https://www.freecodecamp.org/news/jsx-in-react-introduction/),
[JSX In Depth](https://legacy.reactjs.org/docs/jsx-in-depth.html)

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](https://react.dev/learn/your-first-component), [React Components Explained by Manoj Singh Negi](https://codeburst.io/react-components-explained-96718311f20b)

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](https://reactjs.org/docs/components-and-props.html), [React Props Guide by Tania Rascia](https://www.taniarascia.com/getting-started-with-react/), [How Props Work in React – A Beginner's Guide by Oyedele Temitope](https://www.freecodecamp.org/news/beginners-guide-to-props-in-react/)

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](https://reactjs.org/docs/state-and-lifecycle.html), [React State and Lifecycle by Tania Rascia](https://www.taniarascia.com/getting-started-with-react/), [How to Manage State in React by Jack Herrington](https://www.freecodecamp.org/news/how-to-manage-state-in-react/)

5. Lifecycle Methods: Lifecycle methods are called at different stages of a component's lifecycle, allowing you to hook into certain events. [Official Documentation](https://reactjs.org/docs/state-and-lifecycle.html),[React Lifecycle methods with examples by Manish Mandal](https://medium.com/how-to-react/react-life-cycle-methods-with-examples-2bdb7465332b), [React Lifecycle Methods by Wojciech Baranowski](https://massivepixel.io/blog/react-lifecycle-methods/)

6. Hooks: Hooks allow you to use state and other React features in functional components. [Official Documentation](https://reactjs.org/docs/hooks-intro.html), [React Hooks Guide by Tania Rascia](https://www.taniarascia.com/crud-app-in-react-with-hooks/), [React Hooks by Example: useState and useEffect by Dave Ceddia](https://daveceddia.com/react-hooks/)

7. Conditional Rendering: Conditional rendering allows you to render different components or elements based on conditions. [Official Documentation](https://reactjs.org/docs/conditional-rendering.html), [React Conditional Rendering: A Comprehensive Guide by Robin Wieruch](https://www.robinwieruch.de/conditional-rendering-react)

8. Lists and Keys: Lists and keys are used when rendering dynamic lists of elements, ensuring efficient updates. [Official Documentation](https://reactjs.org/docs/lists-and-keys.html), [React Lists and Keys Explained by Robin Wieruch](https://www.robinwieruch.de/react-list-key),[Why do I need Keys in React Lists? by Adhithi Ravichandran](https://adhithiravi.medium.com/why-do-i-need-keys-in-react-lists-dbb522188bbb)

9. Forms and Controlled Components: Controlled components handle form inputs by keeping form data in component state. [Official Documentation](https://reactjs.org/docs/forms.html), [Difference Between Controlled and Uncontrolled Components by Deniz Colak](https://www.altogic.com/blog/difference-between-controlled-and-uncontrolled-component#:~:text=%E2%80%8B,the%20state%20of%20the%20component.), 
 [How to Build Forms in React by Dickson Boateng](https://www.freecodecamp.org/news/how-to-build-forms-in-react/)

10. Styling: Various methods can be used to style React components, including CSS classes, inline styles, and libraries like styled-components. [Official Documentation](https://reactjs.org/docs/faq-styling.html), [Styling in React: 5 ways to style React apps by Neo Ighodaro](https://blog.logrocket.com/styling-react-5-ways-style-react-apps/)

11. Context API: Context API allows you to share data across the component tree without manually passing props. [Official Documentation](https://reactjs.org/docs/context.html), [React Context Explained by Dave Ceddia](https://daveceddia.com/context-api-vs-redux/), [Understanding React Context by Robin Wieruch](https://www.robinwieruch.de/react-context), [How to Use the React Context API in Your Projects by Dickson Boateng](https://www.freecodecamp.org/news/context-api-in-react/)

12. React Router: React Router enables routing and navigation in React applications. [Official Documentation](https://reactrouter.com/), [React Router Tutorial by Tyler McGinnis](https://tylermcginnis.com/react-router-tutorial/)

13. Virtual DOM: The Virtual DOM is a lightweight representation of the actual DOM, optimizing updates for better performance. [Official Documentation](https://reactjs.org/docs/faq-internals.html), [What is the virtual DOM in React? by Ibadehin Mojeed](https://blog.logrocket.com/virtual-dom-react/#:~:text=React%20uses%20the%20virtual%20DOM,to%20write%20more%20predictable%20code.)

14. React Fiber: React Fiber is a reconciliation algorithm that powers the rendering process in React, enabling better performance and asynchronous rendering. [Official Documentation](https://reactjs.org/docs/concurrent-mode-intro.html), [A Cartoon Intro to Fiber by Lin Clark](https://www.youtube.com/watch?v=ZCuYPiUIONs), [React reconciliation: how it works and why should we care by NADIA MAKAREVICH](https://www.developerway.com/posts/reconciliation-in-react)

15. Higher-Order Components (HOC): HOCs are functions that take a component and return an enhanced component, enabling code reuse and composition. [Official Documentation](https://reactjs.org/docs/higher-order-components.html), [React Higher-Order Components: A Comprehensive Guide by Robin Wieruch](https://www.robinwieruch.de/react-higher-order-components), [Understanding React higher-order components by Hussain Arif](https://blog.logrocket.com/understanding-react-higher-order-components/)

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](https://reactjs.org/docs/render-props.html), [Understanding React Render Props by Robin Wieruch](https://www.robinwieruch.de/react-render-props), [React Reference Guide: Render props by Ovie Okeh](https://blog.logrocket.com/react-reference-guide-render-props/)

17. Error Boundaries: Error boundaries are components that catch JavaScript errors during rendering and display fallback UI. [Official Documentation](https://reactjs.org/docs/error-boundaries.html), [Use react-error-boundary to handle errors in React](https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react by Kent C. Dodds)

18. React Hooks (Advanced Usage): Advanced usage of React hooks includes custom hooks, useCallback, useMemo, and more. [Official Documentation](https://reactjs.org/docs/hooks-custom.html), [Understanding useMemo and useCallback by Joshua Comeau](https://www.joshwcomeau.com/react/usememo-and-usecallback/), [useEffect vs useLayoutEffect by Kent C. Dodds](https://kentcdodds.com/blog/useeffect-vs-uselayouteffect), [How to Build Your Own React Hooks: A Step-by-Step Guide by Reed Barger](https://www.freecodecamp.org/news/how-to-create-react-hooks/), [useRef Explained by Sam Dent](https://medium.com/swlh/useref-explained-76c1151658e8)

**NOTE:** If I missed any concept please add it in the comments, including links to articles or blogs explaining the concept.