⚛️ React JS – A Daily Learning Journey 🚀

📅 Day 01

"The beginning is the most important part of the work."

1. React App Setup

   • Traditional setup using create-react-app (CRA)
   • Modern setup using Vite for faster builds
     

2. Project Structure Essentials

   • node_modules — why it's important but excluded from Git
   • .gitignore — managing untracked files like dependencies

---

📅 Day 02

"Don’t just use React — understand how it works."

1. React App Setup Methods

   • Create React App (CRA)
   • Vite Setup
     

2. Core React & Project Structure

   • JSX & Components
   • Virtual DOM - basics overview
   • Fragments
   • Rendering Flow (index.html → JSX)
   • Using CSS in React
     

3. React Behavior & Limitations

   • Single Page Application (SPA)
   • Mounting & Rendering
   • SEO Challenges
   • Server Side Rendering (SSR)
     

4. Tools & Terminology

   • Babel, Webpack, ESBuild
   • react-scripts, ReactDOM, CSR vs SSR

---

📅 Day 03

"To truly understand a tool, build a simpler version of it yourself."

1. custom-react-app

   • Understanding how React works
   • Creating our own render system (customRender)
   • Understanding our custom React element
     

2. vite-react-app

   • How JSX really works (behind the scenes)
   • What does React.createElement() do?
   • What is React.render() or createRoot().render()?
   • Why JSX allows only expressions (not if/else or loops)
     

3. vite-react-app-2

   • Discovering Hooks in React
   • Why were Hooks introduced?
   • What problems do Hooks solve?
   • How does useState work?
   • What makes React more powerful than classical JavaScript?

---

📅 Day 04

"React updates like magic — only where it matters, only when it matters."

1. Virtual DOM

   • What is Virtual DOM?
   • Diffing and Updating the Real DOM
   • Limitations of Virtual DOM
     
     

2. Fiber Architecture

   • Why React Introduced Fiber
   • How Fiber Works (Fiber Tree, Linked List)
   • Benefits Over Virtual DOM
   • Supports Concurrent Features
     
     

3. Reconciliation (Diffing)

   • What is Reconciliation?
   • How React Finds Differences
   • Handling Lists with Keys
   • Fiber’s Role in Reconciliation

---

📅 Day 05

"Learning to write programs stretches your mind, and helps you think better."

1. Tailwind CSS Setup with Vite

   • Integrating Tailwind with React via Vite
   • Docs Link: https://v3.tailwindcss.com/docs/guides/vite
     

2. Understanding Props in React

   • Passing data from parent to child
   • Using props in functional components
   • Sending multiple values via a single prop
     

3. Understanding State Batching in Counter Component

   • Updating state multiple times correctly
   • Differences between direct updates vs. functional updates

---

📅 Day 06

"Every project starts with ‘Hello World’ and ends with ‘Why isn’t this working?!’"

1. Background Changer App
   • A simple React project built with Vite and styled using Tailwind CSS.
   • It lets users change the background color by clicking on color buttons.

---

📅 Day 07

"Build tools that save time and create delight—one line of code at a time."

1. Password Generator Project

   • useState
   • useEffect
   • useRef
   • useCallback
   • Component Structure
     

2. Currency Converter Project

   • useState
   • useEffect
   • useId
   • Custom Hook (Calling & Handling API)
   • Controlled Components
   • Reusable Components
   • Component Structure
   • Folder Structure

---

📅 Day 08

"Routing gives your React app a sense of structure and navigation—without the reloads."

1. React Router DOM

   • Purpose and Benefits of Client-Side Routing
   • Creating a Multi-Page Feel in a Single-Page App
   • Installing react-router-dom
     

2. Creating Routes

   • Approach 1: Route Array with createBrowserRouter
   • Approach 2: JSX-Based Routes with createRoutesFromElements
   • Using <Route> and <RouterProvider>
     
     

3. Nested Routing & Layouts

   • Creating a Layout.jsx Component
   • Using <Outlet> to Render Nested Pages
   • Shared Components like Header & Footer
   • Showing Loading State with useNavigation()
     
     

4. Routing Tools

   • Using <Link> for Basic Navigation
   • Styling Active Links with <NavLink> and Tailwind CSS
   • Creating Dynamic Paths using :params
   • Accessing URL Parameters with useParams()
     
     

5. Data Loading with Loaders

   • Fetching Data Before Page Render
   • Using loader Functions in Routes
   • Accessing Preloaded Data with useLoaderData()

---

📅 Day 09

"Every bug is a step closer to mastery."

1. Context API: Approach 1 (Basics)

   • Share data between components without passing props
   • Setup context files inside src/context
   • Manage state and provide data using a context provider
   • Wrap components in the provider to access shared data
     

2. Context API: Approach 2 (Theme Switcher)

   • Use context to manage light/dark theme globally
   • Create context and custom hook for theme control
   • Use a toggle button to switch themes
   • Apply theme styles using CSS classes (Tailwind CSS)
     

3. Context API: Todo App + LocalStorage

   • Manage todo list data globally with context
   • Organize code with context and components
   • Use localStorage to save todos across sessions
   • Components update and display todos using shared context

---

📅 Day 10

"State is the heartbeat of your app — manage it well, and everything flows."

1. State Management Basics & History

   • Purpose and importance of managing state
   • Why we need state management
   • Flux architecture and one-way data flow
   • Introduction and improvements of Redux
     

2. Redux Ecosystem

   • Redux core concepts
   • React Redux integration (hooks like useDispatch, useSelector)
   • Redux Toolkit for simplified usage
     

3. Core Building Blocks

   • Store, Reducers, and Slices
   • configureStore and createSlice
   • Reducer parameters: state and action
     

4. Supporting Utilities

   • Provider component for store access
   • nanoid for generating unique IDs

---

📅 Day 11

"Now building a full-fledged Blog Website with backend & database support using ReactJS and Appwrite."

1. Starting Mega Project: Blog Website

   • Introduction to Full-Stack Blog Application Development
   • Focus on ReactJS as the Frontend Framework
     

2. Backend-as-a-Service: Appwrite

   • Handling Backend Functionality
   • Database Integration and Management
     

3. Other's Pre-requisites

   • Using TinyMCE for Rich Text Editing in React
   • Implementing html-react-parser to Render Stored HTML Content
   • Using React Hook Form for Efficient Form Management
   • Managing Environment Variables

---

📅 Day 12

"Building smart means building for flexibility and future growth."

1. Creating Vite App & Appwrite Integration

   • Creating vite app & setup tailwind css
   • Creaing appwrite account
   • Creating database and storage bucket
   • AuthService class for signup, login, logout, and user management
     

2. Environment & Configuration Setup

   • Creating .env file for storing secrets (with VITE_ prefix)
   • Setting up config.js to manage environment variables centrally
     

3. Package Installation

   • appwrite, react-router-dom
   • react-redux, @reduxjs/toolkit, react-hook-form
   • @tinymce/tinymce-react, html-react-parser
     

4. Code Architecture Best Practices

   • Concept of Vendor Lock-in
   • Using service classes to isolate backend logic and ensure flexibility

---

📅 Day 13

"Build the foundation well, and scaling becomes effortless."

1. Appwrite Service Class

   • Continued backend integration using Appwrite
   • New file: src/appwrite/utils.js
   • Define and export a Service class instance
   • Initializes Appwrite client with core properties:
     • databases: handles blog post operations
     • bucket: handles file storage
       

2. Post Management (CRUD)

   • Methods:
     • createPost
     • updatePost
     • deletePost
     • getPost
     • getPosts
   • Blog post fields: title, slug, content, featuredImage, status, userId
     

3. File Management

   • Methods:
     • uploadFile
     • deleteFile
     • getFilePreview

---

📅 Day 14

"State management and clean component structure are keys to building scalable apps."

1. Redux Integration

   • Setting up store.js with configureStore
   • Creating authSlice with login and logout reducers
   • Wrapping App with Provider for store access
     

2. Routing Setup

   • Using BrowserRouter to enable routing
   • Navigating with useNavigate
   • Routing-aware components like Link
     

3. Component Architecture & Authentication Logic

   • Reusable components: Header, Footer, Container, Input, Button, LogoutBtn, Logo
   • Barrel export using index.js for simplified imports
   • Login status check on app load using useEffect and authService
   • Conditional rendering based on authentication state
   • Logout functionality with Redux dispatch

---

📅 Day 15

"Build once, reuse everywhere – with secure access and clean structure."

1. UI Components

   • Select: Reusable dropdown with forwardRef and Tailwind
   • PostCard: Blog post preview with image and routing
     

2. Auth Forms & Protected Routes

   • Forms Login & Signup built with react-hook-form
   • Redux for storing user state
   • Navigation with useNavigate()
   • Error handling and redirects
   • AuthLayout: Protects routes based on login status
     

3. Form & State Utilities

   • React Hook Form: Unified input handling (useForm, register)
   • Redux Toolkit: Manages auth state (useDispatch, useSelector)
   • Regex: Validates email structure in forms
     

4. External Services

   • Appwrite: Handles auth and image previews
   • React Router: For all navigation (Link, useNavigate)

---

📅 Day 16

"Focus on writing clean, reusable components to scale your project efficiently."

1. TinyMCE Editor with React Hook Form

   • Integration of TinyMCE as a Rich Text Editor (RTE)
   • Custom toolbar, plugins, and styling
   • Controlled using Controller from react-hook-form
     

2. Post Form to Create and Edit Posts

   • Form setup for both creating and editing blog posts
   • Includes fields like Title, Slug, Content, Image, and Status
   • Uses TinyMCE as the content input
     

3. Important Concepts

   • React Hook Form: useForm, Controller, handleSubmit, watch, setValue
   • Slug Generator: Converts titles to URL-friendly slugs
   • Image Upload with Appwrite: Handles new uploads and updates
   • Post Logic: Conditional create or update using Appwrite services

---

📅 Day 17

"Structure brings clarity. Clarity brings progress."

1. Pages Structure

   • Folder setup under src/pages
   • Created main page components (Login, Signup, Home, etc.)
   • Each page linked via React Router
     
     

2. Page Descriptions

   • Login.jsx – Login form using component
   • Signup.jsx – Signup form with inputs
   • Home.jsx – Displays blog post list
   • AllPosts.jsx – Loads all blog posts
   • EditPost.jsx – Allows editing a post via ID
   • Post.jsx – Shows full post details and actions
     
     

3. React Router Setup

   • Routing defined in main.jsx
   • Used createBrowserRouter from react-router-dom
   • Routes for Home, Login, Signup, AllPosts, EditPost, Post
   • Protected and public routes with AuthLayout
     
     

4. AuthLayout (Protected Routes)

   • Guards routes based on auth state
   • Redirects users accordingly
   • Uses Redux useSelector for checking login
   • Handles access for both logged-in and logged-out users

---

📅 Day 18

"Debugging is twice as hard as writing the code in the first place."

1. Start Running the App

   • First time run the full app after 7 days of code
   • Encountered multiple runtime errors and bugs
     

2. Debug and Fix Major Errors

   • Systematic error tracking and resolution across various files
   • Add <Outlet /> in App.jsx
   • Wrong Import Path in main.jsx
   • TinyMCE API Key Setup in RTE.jsx
   • Image Preview Error:
     • Switched from getFilePreview() to getFileView()
     • Appwrite Storage Permission Settings for public access
       

3. Debug and Fix Minor Errors

   • Resolved various import, folder, and typo issues
   • Refer to GitHub commits history for full list

---

📅 Day 19

"Code is like humor. When you have to explain it, it’s bad."

1. API Fundamentals

   • What is an API
   • Role in frontend-backend communication
     

2. Working with APIs in React

   • Fetch vs Axios comparison
   • Axios GET request with then() & catch()
   • Best practices (useEffect, useState, error handling)
     

3. Handling CORS Issues

   • What is CORS
   • Proxy setup in Vite
   • Backend solutions (cors package, headers)

---

📅 Day 20

"Backend and frontend must work in harmony to deliver seamless experiences."

1. Express Server Setup & Axios

   • Creating a basic Express.js server
   • GET endpoint at /api/products with optional search query
   • Benefits of using Axios for API calls
   • Professional handling of requests, errors, and configurations
     

2. Method 1: Basic API Call using Axios

   • Component: Handle_API_1
   • Basic useEffect pattern for API calls
   • Handles loading, error, and data states directly in component
     

3. Method 2: Using a Custom Hook

   • Component: Handle_API_2
   • Custom hook: useProductsAPIs
   • Cleaner component code and reusable API logic
     

4. Method 3: API Call with Search and Cancel Feature

   • Component: Handle_API_3
   • Dynamic search handling with AbortController
   • Preventing race conditions and cancelled request issues