Foundations of ReactJS

The foundations of ReactJS: the basics and rules of JSX, state management with useState, and the roadmap for the rest of the React series.

JSX is a syntax extension for JavaScript to write HTML-like markup inside a JavaScript file.
Return a single root element - Can only return one single root element from JSX. Since in JavaScript you can only return 1 value, and JSX is returned from the function, hence it can only return one single root.
Close all Tags - Tags must be closed !
camelCase ~~all~~ most of the things! - Since JSX becomes JavaScript Objects, and the attributes will become the keys, the rules of the keys apply to the attributes. And it cannot use reserved keywords like class hence we use className andstroke-width as strokeWidth
Curly Braces in JSX - In JSX you can use curly braces to a window of JavaScript into the markup. It can be only used in two places.
- As inner text of a tag <h1>{heading}<h1/>
- As value of tag attributes <h1 style={{backgroundColor: 'black'}}>This is Heading<h1/>

State is component's memory
useState is a hook, which allows React to remember the state between the renders
state should be only mutated using setters, and state mutation triggers re-renders.
More about useState in depth -> 03. Component Lifecycle and Hooks

Lifting State Up
- Sharing state between parent-child components
Prop Drilling
- Passing props deeply through nested components
Context API
- Global state management without prop drilling
- useContext and Context.Provider
State Management Libraries
- Redux (for larger applications)
- Zustand or Recoil (simpler alternatives)

React Router Basics
- Setting up routes using react-router-dom
- Nested routes
- Redirects, useNavigate
Dynamic Routing
- Route parameters, query strings
- Programmatically navigating

React Reconciliation
- How React updates the DOM (Virtual DOM)
- Key prop and rendering optimization
React Fiber
- The architecture behind React's rendering (optional deep dive)
Error Boundaries
- Catching JavaScript errors in components
Suspense and React.lazy
- Code-splitting and lazy loading components
Portals
- Rendering components outside of the DOM hierarchy

React Memo
- Memoizing components to prevent unnecessary re-renders
useCallback, useMemo
- Memoizing functions and values
- When to use useMemo vs useCallback
Virtualization
- Using libraries like react-window or react-virtualized for large lists
Code Splitting
- Dynamic imports and lazy loading components

TypeScript with React
- Defining props and state types
- Type inference, generics, and utility types
CSS-in-JS
- Styled Components, Emotion, or Tailwind CSS
Testing
- Unit Testing with Jest and React Testing Library
- End-to-End Testing with Cypress
State Management Tools
- Redux Toolkit (modern approach)
- Middleware (Redux Thunk or Redux Saga)

Next.js
- Introduction to Next.js framework
- SSR (Server-Side Rendering) and SSG (Static Site Generation)
- Incremental Static Regeneration (ISR)
- API routes and serverless functions in Next.js

GraphQL Basics
- Writing queries, mutations, and subscriptions
Apollo Client
- Using Apollo Client to fetch data in React
- Caching, pagination, and optimistic updates

Authentication
- Implementing JWT or OAuth authentication
WebSockets and Real-time Updates
- Integrating WebSockets for real-time features
Progressive Web Apps (PWAs)
- Service workers and offline capabilities
React Native (optional)
- Building mobile apps with React Native

Build Tools & Bundling
- Webpack, Vite, or Parcel
CI/CD
- Setting up Continuous Integration with GitHub Actions, Travis CI, etc.
Deploying React Apps
- Deploying on platforms like Vercel, Netlify, or AWS S3

RELATED