RESOURCES.md

Resources

Library Documentation

• React Documentation
• Create React App
• Vite: Getting Started
• Vite (Why Vite is so fast)
• CSS Modules
• React Router
• React Leaflet: Installation
• Redux: Style Guide (A must-read for Redux users!)
• Redux Toolkit
• React Redux

React Basics

• Theory Slides
• Adding React URL to an HTML Document
• Resources to use

React Intermediate

• Writing Resilient Components (By Dan Abramov from the React team)
• Things I think about when I write React code (GitHub Repository)
• A (Mostly) Complete Guide to React Rendering Behavior (By Mark Erikson from the redux team)
• A Visual Guide to React Rendering - It Always Re-renders (A multi-part series, check out the other ones)
• A Cartoon Intro to Fiber (YouTube Video)
• What is React Fiber? React.js Deep Dive (YouTube Video)
• The React and React Native Event System Explained
• Under the hood of event listeners in React
• A DIY guide to build your own React
• useSyncExternalStore First Look
• Under the hood of React's hooks system
• Why do React Hooks rely on call order? (By Dan Abramov)
• So you thnk you know everything about React refs
• react-use: Reusable React Hook Library (GitHub Repository)
• react-hookz: React hooks done right (GitHub Repository)

React Advance

• Tao of React - Software Design, Architecture & Best Practices
• The new wave of React state management (Excellent read!)
• A Visual Guide to React Rendering - useMemo
• React as a UI Runtime (By Dan Abramov from the React team)
• You Might Not Need an Effect (Official React docs)
• A Complete Guide to useEffect (By Dan Abramov)
• useEffect sometimes fires before paint
• Making setInterval declarative with React Hooks (By Dan Abramov)
• Redux - Not Dead Yet! (By Mark Erikson from the Redux Team)
• Why React Context is not a 'State Management' Tool (By Mark Erikson)

React Professionals

• React Libraries for 2023
• Styled Components best practices
• A Through Analysis of CSS-in-JS
• Practical React Query
• React Query meets React Router
• Picking the right React component problem
• Bulletproof-react: A simple, scalable, and powerful architecture for building production-ready React applications
• Tailwind CSS: Installation with Vite
• styled-components
• Supabase JavaScript Client Library
• TanStack (React) Query v4
• Recharts
• date-fns

Keep Reviewing - Easily Forgettable

Truthy and Falsy

• In JavaScript, there are two types of values: truthy and falsy.

• Truthy values are values that evaluate to true when used in boolean context while falsy values evalute to false.

• The following values are falsy in JavaScript: false, 0, -0, NaN, null, undefined, and "" (Empty String).

• All other values are truthy.

Short Circuiting

• Short Circuiting is a feature of the logical operators (&&, ||) in JavaScript that allows them to return a value without evaluating the whole expression.
• It works by evaluating an expression from left to right and returning the value of the first operand that determines the final result.
• For example, in the expression false && true, the && operator will return false as soon as it evaluates the first operand, false. This is because the && operator returns true if both the operands are true.

Logical AND (&&)

• In a logical operation involving && (AND), if the first operand is falsy, JavaScript will short-circuit and return the first operand without evaluating the second operand. If the first operand is truthy, JavaScript will return the second operand.

Logical OR (||)

• In a logical operation involving || (OR), if the first operand is truthy, JavaScript will short-circuit and return the first operand. If the first operand is falsy, JavaScript will return the second operand.

NULLISH COALESCING Operator (??)

• The NULLISH COALESCING Operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or, undefined otherwise returns its left-hand side operand.

Some Important Points about React

• React uses JSX and JSX is Declarative (Focuses on the program's goal or end result, without specifying how to get there.) whereas Manual DOM element selections and DOM traversing is Imperative (Focuses on how the program should achieve its goal, by explicitly specifying each step, or instruction, that changes the program's state. Imperative programming is similar to pseudocode).

Credits

These resources are from the Udemy Course The Ultimate React Course 2024: React, Next.js, Redux & More by Jonas Schmedtmann.