Index for react resources

React is a powerful JavaScript library not a framework.This page serves as an index for all React-related posts on this blog and provides links to another react resources.

Index

1. React UI
2. Reactivity
3. State management
4. Escape hatches
5. Tools and plugins

Documentations

Start your React journey with these essential concepts:

• Read more from React Official Documentation

Courses

This is just my take on React based on the well-written article below:

• FreeCodeCamp - Learn ReactJS – Complete Roadmap

Roadmap

• Introduction to React
  • What is React?
  • Why React?
  • React vs Other Frameworks
• Setting Up the Development Environment
• Understanding JSX
  • What is JSX?
  • Embedding Expressions in JSX
  • JSX is an Expression Too
• Components and Props
  • Function and Class Components
  • Rendering a Component
  • Props
• State and Lifecycle
  • Adding Local State to a Class
  • Adding Lifecycle Methods to a Class
  • Converting a Function to a Class
• Handling Events
  • Handling Events with JSX
  • Passing Arguments to Event Handlers
• Conditional Rendering
  • Element Variables
  • Inline If with Logical && Operator
  • Inline If-Else with Conditional Operator
• Lists and Keys
  • Rendering Multiple Components
  • Basic List Component
  • Keys
• Forms
  • Controlled Components
  • Handling Multiple Inputs
  • Controlled Input Null Value
• Lifting State Up
  • Lifting State Up
  • Why Lift State Up?
• Composition vs Inheritance
  • Containment
  • Specialization
  • So What About Inheritance?
• Thinking in React
  • Step 1: Break The UI Into A Component Hierarchy
  • Step 2: Build A Static Version in React
  • Step 3: Identify The Minimal (but complete) Representation Of UI State
  • Step 4: Identify Where Your State Should Live
  • Step 5: Add Inverse Data Flow
• React Router
  • Setting Up React Router
  • Nested Routes
  • Dynamic Routing
• React Context API
  • Creating Context
  • Using Context
  • Context Best Practices
• React Hooks
  • useState
  • useEffect
  • Custom Hooks
• React Performance Optimization
  • Memoization
  • Code Splitting
  • Lazy Loading
• React Testing
  • Testing Components
  • Testing Hooks
  • End-to-End Testing
• React with TypeScript
  • Setting Up TypeScript
  • TypeScript with Props
  • TypeScript with Hooks

Additional Topics from React Roadmap

• React Architecture
  • Component-Based Architecture
  • Single-Page Application (SPA)
• State Management
  • Redux
  • MobX
  • Recoil
• Styling in React
  • CSS Modules
  • Styled Components
  • Emotion
• Server-Side Rendering (SSR)
  • Next.js
  • Gatsby
• Static Site Generation (SSG)
  • Next.js
  • Gatsby
• GraphQL
  • Apollo Client
  • Relay
• React Native
  • Setting Up React Native
  • Building Mobile Apps

More

• Download notion checklist
• React repo