Title
7 |Body goes here.
8 |
4 |
8 | );
9 | };
10 |
11 | export default ErrorMessage;
12 |
--------------------------------------------------------------------------------
/day-01/container-presenter-pattern/src/App.jsx:
--------------------------------------------------------------------------------
1 | // import UserProfile from "./messy-way/components/UserProfile";
2 |
3 | import "./App.css";
4 | import UserProfileContainer from "./with-pattern/components/profile/UserProfileContainer";
5 | function App() {
6 | return (
7 | {title}
5 |{message}
6 | 7 |
8 |
10 | );
11 | }
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/day-07/provider-pattern/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/day-10/pub-sub-pattern/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/day-10/pub-sub-pattern/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 | // ⬅️ Import the listener (runs immediately)
6 | import "./lib/listener.js";
7 |
8 | ReactDOM.createRoot(document.getElementById('root')).render(
9 |
7 |
10 | );
11 | }
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/day-02/controlled-uncontrolled-comp-pattern/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/day-12/slot-pattern/src/named-slots/CardWithSlotDemo.jsx:
--------------------------------------------------------------------------------
1 | import CardWithSlots from "./CardWithSlots";
2 |
3 | const CardWithSlotDemo = () => {
4 | return (
5 | Biography and details...
} 8 | footer={} 9 | /> 10 | ); 11 | }; 12 | 13 | export default CardWithSlotDemo; 14 | -------------------------------------------------------------------------------- /day-11/performance-patterns/src/performance/lazy-loading/Light.jsx: -------------------------------------------------------------------------------- 1 | export default function Light() { 2 | console.log("[Light] rendered"); 3 | return ( 4 |
5 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/derived/Cart.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const Cart = ({ items }) => {
4 | const [total, setTotal] = useState(0);
5 |
6 | useEffect(() => {
7 | const sum = items.reduce((acc, item) => acc + item.price, 0);
8 | setTotal(sum);
9 | }, [items]);
10 |
11 | return Light Component
6 |7 | This component is small and always included in the initial 8 | bundle. 9 |
10 |Total: {total}
; 12 | }; 13 | 14 | export default Cart; 15 | -------------------------------------------------------------------------------- /day-06/custom-pattern-hooks/src/App.jsx: -------------------------------------------------------------------------------- 1 | import ThemeSwitcher from "./components/ThemeSwitcher"; 2 | import MoviesList from "./components/MovieList"; 3 | import AuthPanel from "./components/AuthPanel"; 4 | 5 | function App() { 6 | return ( 7 |
8 |
12 | );
13 | }
14 |
15 | export default App;
16 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/utils/index.js:
--------------------------------------------------------------------------------
1 | function getUsers() {
2 | const usernames = [];
3 | const count = 1000;
4 |
5 | for (let i = 0; i < count; i++) {
6 | const firstName = "Tapas";
7 | const lastName = "Adhikary";
8 |
9 | const username = `${firstName}${lastName}`;
10 | usernames.push(username);
11 | }
12 |
13 | return usernames;
14 | }
15 |
16 | export { getUsers };
17 |
--------------------------------------------------------------------------------
/day-05/hoc-pattern/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
10 |
13 | );
14 | }
15 |
16 | export default Counter;
--------------------------------------------------------------------------------
/day-12/slot-pattern/src/App.jsx:
--------------------------------------------------------------------------------
1 | import DefaultSlotDemo from "./default-slot/DefaultSlotDemo";
2 | import SlotsMapLayoutDemo from "./named-slot-map/SlotsMapLayoutDemo";
3 | import CardWithSlotDemo from "./named-slots/CardWithSlotDemo";
4 | function App() {
5 | return (
6 | Count: {count}
11 | 12 |
7 |
11 | );
12 | }
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/day-06/custom-pattern-hooks/src/hooks/useAuth.js:
--------------------------------------------------------------------------------
1 | import {useState} from "react";
2 | import { doLogin } from "../actions";
3 |
4 | function useAuth() {
5 | const [user, setUser] = useState(null);
6 |
7 | const login = async (username, password) => {
8 | // fake API call
9 | const loggedIn = await doLogin(username, password)
10 | loggedIn && setUser({ name: username });
11 | };
12 |
13 | const logout = () => setUser(null);
14 |
15 | return { user, login, logout, isAuthenticated: !!user };
16 | }
17 |
18 | export {useAuth}
--------------------------------------------------------------------------------
/day-12/slot-pattern/src/named-slot-map/SlotsMapLayout.jsx:
--------------------------------------------------------------------------------
1 | export default function SlotsMapLayout({ slots = {} }) {
2 | return (
3 |
4 |
5 |
6 | {slots.header}
7 | {slots.content}
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/day-12/slot-pattern/src/named-slot-map/SlotsMapLayoutDemo.jsx:
--------------------------------------------------------------------------------
1 | import Article from "./Article";
2 | import SlotsMapLayout from "./SlotsMapLayout";
3 | const SlotsMapLayoutDemo = () => {
4 | return (
5 |
8 |
12 | );
13 | }
14 |
15 | export default MovieAnalytics
16 |
--------------------------------------------------------------------------------
/day-04/render-props-pattern/src/with-pattern/MouseTracker.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | function MouseTracker({ render }) {
3 | const [pos, setPos] = useState({ x: 0, y: 0 });
4 |
5 | function handleMouseMove(e) {
6 | setPos({ x: e.clientX, y: e.clientY });
7 | }
8 |
9 | return (
10 | 📊 Movie Analytics
9 |Total Movies: {totalMovies}
10 |Average Rating: {averageRating.toFixed(1)}
11 |
14 | {render(pos)}
15 |
16 | );
17 | }
18 |
19 | export default MouseTracker;
20 |
--------------------------------------------------------------------------------
/day-05/hoc-pattern/src/movies/MovieList.jsx:
--------------------------------------------------------------------------------
1 | function MovieList({ data }) {
2 | return (
3 |
4 |
13 | );
14 | }
15 |
16 | export default MovieList;
17 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/rerenders/RenderTrackerDemo.jsx:
--------------------------------------------------------------------------------
1 | import {useState} from 'react'
2 | import RenderTracker from './RenderTracker';
3 |
4 | const RenderTrackerDemo = () => {
5 | const [value, setValue] = useState("");
6 |
7 | return (
8 | 🎞️ Movie List
5 |-
6 | {data.map((movie) => (
7 |
- 8 | {movie.title} ({movie.year}) 9 | 10 | ))} 11 |
9 |
16 | );
17 | }
18 |
19 | export default RenderTrackerDemo
--------------------------------------------------------------------------------
/day-07/provider-pattern/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.jsx";
4 | import "./index.css";
5 | import BrandProvider from "./provider/BrandProvider.jsx";
6 | import ThemeProvider from "./provider/ThemeProvider.jsx";
7 | ReactDOM.createRoot(document.getElementById("root")).render(
8 |
4 |
13 | );
14 | }
15 |
16 | export default Modal;
17 |
--------------------------------------------------------------------------------
/day-04/render-props-pattern/src/messy/CarTracker.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | const CarTracker = () => {
4 | const [pos, setPos] = useState({ x: 0, y: 0 });
5 |
6 | function handleMouseMove(e) {
7 | setPos({ x: e.clientX, y: e.clientY });
8 | }
9 | return (
10 |
5 |
12 | {title}
6 |{body}
7 |
8 | {secondaryAction}
9 | {primaryAction}
10 |
11 |
14 |
18 | );
19 | };
20 |
21 | export default CarTracker;
22 |
--------------------------------------------------------------------------------
/day-05/hoc-pattern/src/movies/MovieWithHOC.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { withDataFetching } from "./hoc/withDataFetching";
3 | import MovieList from "./MovieList";
4 | import MovieAnalytics from "./MovieAnalytics";
5 |
6 |
7 |
8 | // Wrap both components with the same HOC
9 | const MovieListWithData = withDataFetching(MovieList);
10 | const MovieAnalyticsWithData = withDataFetching(MovieAnalytics);
11 |
12 | export default function MovieWithHOC() {
13 | return (
14 | 15 | 🚗 Car is at ({pos.x}, {pos.y}) 16 |
17 |
15 |
18 | );
19 | }
--------------------------------------------------------------------------------
/day-04/render-props-pattern/src/messy/BikeTracker.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | const BikeTracker = () => {
4 | const [pos, setPos] = useState({ x: 0, y: 0 });
5 |
6 | function handleMouseMove(e) {
7 | setPos({ x: e.clientX, y: e.clientY });
8 | }
9 |
10 | return (
11 |
15 |
19 | );
20 | };
21 |
22 | export default BikeTracker;
23 |
--------------------------------------------------------------------------------
/day-05/hoc-pattern/src/index.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 |
3 | /*
4 | The default border color has changed to `currentColor` in Tailwind CSS v4,
5 | so we've added these compatibility styles to make sure everything still
6 | looks the same as it did with Tailwind CSS v3.
7 |
8 | If we ever want to remove these styles, we need to add an explicit border
9 | color utility to any element that depends on these defaults.
10 | */
11 | @layer base {
12 | *,
13 | ::after,
14 | ::before,
15 | ::backdrop,
16 | ::file-selector-button {
17 | border-color: var(--color-gray-200, currentColor);
18 | }
19 | }
--------------------------------------------------------------------------------
/day-04/render-props-pattern/src/with-pattern/using-children/MouseTrackerWithChildren.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | function MouseTrackerWithChildren({ children }) {
4 | const [pos, setPos] = useState({ x: 0, y: 0 });
5 |
6 | function handleMouseMove(e) {
7 | setPos({ x: e.clientX, y: e.clientY });
8 | }
9 |
10 | return (
11 | 16 | 🏍️ Bike is at ({pos.x}, {pos.y}) 17 |
18 |
15 | {children(pos)}
16 |
17 | );
18 | }
19 |
20 | export default MouseTrackerWithChildren;
21 |
--------------------------------------------------------------------------------
/day-12/slot-pattern/src/compound/CardCompoundDemo.jsx:
--------------------------------------------------------------------------------
1 | import CardCompound from "./CardCompound";
2 |
3 | const CardCompoundDemo = () => {
4 | return (
5 | Title
8 |Content...
11 |{count}
12 | 13 |
9 | setValue(e.target.value)}
13 | />
14 |
16 | );
17 | };
18 |
19 | export default MemoizedProfileTracker;
20 |
--------------------------------------------------------------------------------
/day-07/provider-pattern/src/provider/BrandProvider.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { BrandContext } from "../context";
3 | import PropTypes from 'prop-types';
4 |
5 | const BrandProvider = ({ children }) => {
6 | const [brand, setBrand] = useState(null);
7 |
8 | useEffect(() => {
9 | // FAKE an API Call
10 | const data = {"name": "tapaScript", "color": "#765G45"}
11 | setBrand(data);
12 | }, []);
13 |
14 | return (
15 |
15 | {children}
16 |
17 | );
18 | }
19 |
20 | /*
21 | Usage:
22 | Title
24 |Body goes here.
25 |Sorted Users
16 | {sorted.map((user, index) => ( 17 |{user}
18 | ))}
19 |
20 | );
21 | }
22 |
23 | export default Users;
24 |
--------------------------------------------------------------------------------
/day-03/compound-components-patterns/src/with-pattern/accordion/Accordion.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | function Accordion({ children }) {
4 | return {children}
;
5 | }
6 |
7 | function AccordionItem({ title, children }) {
8 | const [isOpen, setIsOpen] = useState(false);
9 |
10 | return (
11 |
12 |
15 | {isOpen &&
17 | );
18 | }
19 |
20 | // Attach subcomponents
21 | Accordion.Item = AccordionItem;
22 |
23 | export default Accordion;
--------------------------------------------------------------------------------
/day-10/pub-sub-pattern/src/components/subscriber/CartBadge.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { useState } from "react";
3 | import { useEvent } from "../../hooks/useEvent";
4 |
5 | export default function CartBadge() {
6 | const [items, setItems] = useState([]);
7 |
8 | useEvent("cart:add", (data) => {
9 | console.log(data)
10 | setItems([...items, data]);
11 | });
12 |
13 | return ({children}
}
16 |
14 |
);
22 | }
--------------------------------------------------------------------------------
/day-08/optimistic-pattern/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | "react/prop-types": "off",
17 | 'react-refresh/only-export-components': [
18 | 'warn',
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/day-10/pub-sub-pattern/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | "react/prop-types": "off",
17 | 'react-refresh/only-export-components': [
18 | 'warn',
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/day-04/render-props-pattern/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | 'react/prop-types': 'off',
17 | 'react-refresh/only-export-components': [
18 | 'warn',
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/day-09/state-reducer-pattern/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | "react/prop-types": "off",
17 | 'react-refresh/only-export-components': [
18 | 'warn',
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | "react/prop-types": "off",
17 | 'react-refresh/only-export-components': [
18 | 'warn',
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/day-01/container-presenter-pattern/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | 'react/prop-types': 'off',
17 | 'react-refresh/only-export-components': [
18 | 'warn',
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/day-03/compound-components-patterns/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | 'react/prop-types': 'off',
17 | 'react-refresh/only-export-components': [
18 | 'warn',
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/day-01/container-presenter-pattern/src/with-pattern/components/post/PostsList.jsx:
--------------------------------------------------------------------------------
1 | const PostsList = ({ posts }) => {
2 | return (
3 | Subscriber
15 |🛒 {items.length}
16 |-
17 | {items.map(item => (
18 |
- {item.name} 19 | ))} 20 |
4 |
19 | );
20 | };
21 |
22 | export default PostsList;
23 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/lazy-loading/NonLazyLoader.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import Light from "./Light";
3 | import Heavy from "./Heavy";
4 |
5 |
6 | const NonLazyLoader = () => {
7 | const [show, setShow] = useState(false);
8 |
9 | return (
10 | Recent Posts ({posts.length})
5 | {posts.length === 0 ? ( 6 |No posts yet.
7 | ) : ( 8 | posts.map((post) => ( 9 |
10 |
16 | ))
17 | )}
18 | {post.title}
11 |{post.content.substring(0, 150)}...
12 | 13 | {new Date(post.createdAt).toLocaleDateString()} 14 | 15 |
11 |
22 | );
23 | }
24 |
25 | export default NonLazyLoader
--------------------------------------------------------------------------------
/day-09/state-reducer-pattern/src/App.jsx:
--------------------------------------------------------------------------------
1 | import FormFields from "./components/FormFields";
2 | import Toggle from "./components/Toggle";
3 | import { FormProvider } from "./provider/FormProvider";
4 | import { customFormReducer } from "./reducers/form-reducer";
5 | import { customToggleReducer } from "./reducers/toggle-reducer";
6 | function App() {
7 | return (
8 | Non-Lazy Demo
12 |Heavy component is bundled with the app (non-lazy).
13 | 14 |
9 | console.log(v)}
12 | />
13 |
14 |
16 |
17 | );
18 | }
19 |
20 | export default App;
21 |
--------------------------------------------------------------------------------
/day-05/hoc-pattern/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | "eslint:recommended",
6 | "plugin:react/recommended",
7 | "plugin:react/jsx-runtime",
8 | "plugin:react-hooks/recommended",
9 | ],
10 | ignorePatterns: ["dist", ".eslintrc.cjs"],
11 | parserOptions: { ecmaVersion: "latest", sourceType: "module" },
12 | settings: { react: { version: "18.2" } },
13 | plugins: ["react-refresh"],
14 | rules: {
15 | "react/jsx-no-target-blank": "off",
16 | "react/prop-types": "off",
17 | "react-refresh/only-export-components": [
18 | "warn",
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/day-12/slot-pattern/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | "eslint:recommended",
6 | "plugin:react/recommended",
7 | "plugin:react/jsx-runtime",
8 | "plugin:react-hooks/recommended",
9 | ],
10 | ignorePatterns: ["dist", ".eslintrc.cjs"],
11 | parserOptions: { ecmaVersion: "latest", sourceType: "module" },
12 | settings: { react: { version: "18.2" } },
13 | plugins: ["react-refresh"],
14 | rules: {
15 | "react/jsx-no-target-blank": "off",
16 | "react/prop-types": "off",
17 | "react-refresh/only-export-components": [
18 | "warn",
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/day-06/task.md:
--------------------------------------------------------------------------------
1 | # Day 06 - Your Task
2 |
3 | You’ve learned what Hooks are, how to write Custom Hooks, and how they make your components reusable and clean.
4 | Now it’s your turn to design and build 3 useful hooks like anyone can use in real-world apps.
5 |
6 | Create the following custom hooks from scratch, without relying on external libraries:
7 |
8 | - useLocalStorage(key, initialValue): Sync a React state with localStorage.
9 | - useClipboard(): Copy text to clipboard and show feedback.
10 | - useClickOutside(ref, callback): Detect clicks outside a given element.
11 |
12 | ## Criteria
13 |
14 | Each hook must:
15 |
16 | - Be reusable and follow the Rules of Hooks.
17 | - Include error handling or edge cases.
18 | - Be demonstrated in a small component that shows how to use it.
19 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/memoization/use-callback/ChildDemo.jsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from "react";
2 | import Child from "./Child";
3 | const ChildDemo = () => {
4 | const [count, setCount] = useState(0);
5 |
6 | const handleClick = useCallback(() => {
7 | console.log("Child Clicked!");
8 | }, []);
9 |
10 | console.log("App Rendered");
11 |
12 | return (
13 |
14 |
21 | );
22 | };
23 |
24 | export default ChildDemo;
25 |
--------------------------------------------------------------------------------
/day-12/task.md:
--------------------------------------------------------------------------------
1 | # Day 12 - Your Task
2 |
3 | ## Toolbar with responsive collapsing slots
4 |
5 | - Build a Toolbar component with three named slots: start, center, end.
6 | - On smaller screens, center content should move into an overflow menu (implement simple collapse behavior).
7 | - Deliverable: Toolbar.jsx, demo page showing responsiveness and slot usage.
8 |
9 | Learning: slot handling and responsive composition.
10 |
11 | ## Toast/Notification System with slot-based template
12 |
13 | - Implement a Toast system where each toast accepts slots: icon, message, action.
14 | - Provide an API to register toast templates and show toasts with different slot content.
15 | - Deliverable: toast manager , example templates (success, error, info).
16 |
17 | Learning: dynamic slot templates and programmatic rendering.
18 |
--------------------------------------------------------------------------------
/day-05/hoc-pattern/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-09/state-reducer-pattern/src/components/Toggle.jsx:
--------------------------------------------------------------------------------
1 | import { useReducer } from "react";
2 | import { toggleReducer } from "../reducers/toggle-reducer";
3 |
4 | export default function Toggle({ reducer = toggleReducer, onToggle }) {
5 | const [state, dispatch] = useReducer(reducer, { on: false, clicks: 0 });
6 | const { on, clicks } = state;
7 |
8 | function handleToggle() {
9 | dispatch({ type: "toggle" });
10 | onToggle?.(!on);
11 | }
12 |
13 | return (
14 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/day-12/slot-pattern/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-07/provider-pattern/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-10/pub-sub-pattern/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-04/render-props-pattern/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-06/custom-pattern-hooks/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-08/optimistic-pattern/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-09/state-reducer-pattern/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/throttling/ScrollTracker.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useThrottle } from "./hooks/useThrottle";
3 |
4 | export default function ScrollTracker() {
5 | const [scrollY, setScrollY] = useState(0);
6 | const throttledY = useThrottle(scrollY, 3000);
7 |
8 | useEffect(() => {
9 | const handleScroll = () => {
10 | setScrollY(window.scrollY);
11 | };
12 |
13 | window.addEventListener("scroll", handleScroll);
14 | return () => window.removeEventListener("scroll", handleScroll);
15 | }, []);
16 |
17 | return (
18 | Count: {count}
15 |
16 |
17 |
18 |
20 |
19 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/throttling/hooks/useThrottle.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 |
3 | export function useThrottle(value, delay = 300) {
4 | const [throttledValue, setThrottledValue] = useState(value);
5 | const lastExecuted = useRef(Date.now());
6 |
7 | useEffect(() => {
8 | const handler = setTimeout(() => {
9 | const now = Date.now();
10 |
11 | if (now - lastExecuted.current >= delay) {
12 | console.log("Do DOM Manipulation");
13 | setThrottledValue(value);
14 | lastExecuted.current = now;
15 | }
16 | }, delay - (Date.now() - lastExecuted.current));
17 |
18 | return () => clearTimeout(handler);
19 | }, [value, delay]);
20 |
21 | return throttledValue;
22 | }
23 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/virtualization/VirtualList.jsx:
--------------------------------------------------------------------------------
1 | import { FixedSizeList as List } from "react-window";
2 | import { Item } from "./Item";
3 |
4 | export default function VirtualList({
5 | users,
6 | height = 600,
7 | itemHeight = 80,
8 | width = "100%",
9 | }) {
10 | return (
11 | Scroll Position (Throttled)
20 |{throttledY}
21 |-
19 | {({ index, style, data }) => (
20 |
- 21 | )} 22 |
Loading movies...
; 9 | if (error) returnError: {error}
; 10 | 11 | return ( 12 |
13 |
22 | );
23 | }
24 |
25 | export default MoviesList;
26 |
--------------------------------------------------------------------------------
/day-06/custom-pattern-hooks/src/hooks/useFetch.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 |
3 | export function useFetch(url) {
4 | const [data, setData] = useState(null);
5 | const [error, setError] = useState(null);
6 | const [loading, setLoading] = useState(false);
7 |
8 | useEffect(() => {
9 | if (!url) return;
10 |
11 | const fetchData = async () => {
12 | setLoading(true);
13 | try {
14 | const response = await fetch(url);
15 | if (!response.ok) throw new Error("Network response was not ok");
16 | const result = await response.json();
17 | setData(result);
18 | } catch (err) {
19 | setError(err.message);
20 | } finally {
21 | setLoading(false);
22 | }
23 | };
24 |
25 | fetchData();
26 | }, [url]);
27 |
28 | return { data, error, loading };
29 | }
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/PartOne.jsx:
--------------------------------------------------------------------------------
1 | import RenderTrackerDemo from "./performance/rerenders/RenderTrackerDemo";
2 |
3 | import MemoizedProfileTracker from "./performance/memoization/memo/MemoizedProfileTracker";
4 |
5 | import ChildDemo from "./performance/memoization/use-callback/ChildDemo";
6 |
7 | import UsersSortingDemo from "./performance/memoization/use-memo/UsersSortingDemo";
8 |
9 | import SearchBox from "./performance/debouncing/SearchBox";
10 |
11 | import ScrollTracker from "./performance/throttling/ScrollTracker";
12 |
13 | const PartOne = () => {
14 | return (
15 | <>
16 | 🎬 Movies
14 |-
15 | {data?.movies.map((movie) => (
16 |
- 17 | {movie.title} — {movie.director} 18 | 19 | ))} 20 |
8 |
15 | );
16 | }
17 |
18 | function ModalHeader({ children }) {
19 | return
9 | {children}
10 |
13 |
14 | {children}
;
20 | }
21 |
22 | function ModalBody({ children }) {
23 | return {children}
;
24 | }
25 |
26 | function ModalFooter({ children }) {
27 | return {children}
;
28 | }
29 |
30 | // Attach subcomponents
31 | Modal.Header = ModalHeader;
32 | Modal.Body = ModalBody;
33 | Modal.Footer = ModalFooter;
34 |
35 | export default Modal;
36 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/PartTwo.jsx:
--------------------------------------------------------------------------------
1 | import Dashboard from "./performance/component-isolation/Dashboard";
2 | import IsolatedDashboard from "./performance/component-isolation/IsolatedDashboard";
3 | import DeferredDemo from "./performance/deffered/DeferredDemo";
4 | import LazyLoader from "./performance/lazy-loading/LazyLoader";
5 | import NonLazyLoader from "./performance/lazy-loading/NonLazyLoader";
6 | import TransitionDemo from "./performance/transition/TransitionDemo";
7 | import VirtualizationDemo from "./performance/virtualization/VirtualizationDemo";
8 | const PartTwo = () => {
9 | return (
10 | <>
11 |
19 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/virtualization/Item.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 |
3 | export const Item = memo(function Item({ index, style, data }) {
4 | const user = data[index];
5 |
6 | console.log("Render row:", index);
7 |
8 | return (
9 | Search User
20 | setQuery(e.target.value)} 26 | /> 27 |
21 |
25 | );
26 | });
27 |
--------------------------------------------------------------------------------
/day-02/controlled-uncontrolled-comp-pattern/src/App.jsx:
--------------------------------------------------------------------------------
1 | import Counter from "./state-ref/components/Counter";
2 | import AutoFocusInput from "./state-ref/components/AutoFocusInput";
3 | import CounterWithRef from "./state-ref/components/CounterWithRef";
4 |
5 | import FeedbackForm from "./messy/FeedbackForm";
6 |
7 | import ControlledFeedbackForm from "./controlled/ControlledFeedbackForm";
8 |
9 | import UncontrolledFeedbackForm from "./uncontrolled/UncontrolledFeedbackForm";
10 |
11 | import UncontrolledFormNoRef from "./uncontrolled/UncontrolledFormNoRef";
12 |
13 | function App() {
14 | return (
15 | {user.name}
22 | {user.email}
23 | {user.bio}
24 |
16 |
28 | );
29 | }
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/day-05/hoc-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.0",
14 | "react-dom": "^19.2.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-10/pub-sub-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.0",
14 | "react-dom": "^19.2.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-12/slot-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.1",
14 | "react-dom": "^19.2.1",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-04/render-props-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.0",
14 | "react-dom": "^19.2.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-06/custom-pattern-hooks/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.0",
14 | "react-dom": "^19.2.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-07/provider-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.0",
14 | "react-dom": "^19.2.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-08/optimistic-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.0",
14 | "react-dom": "^19.2.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-09/state-reducer-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.0",
14 | "react-dom": "^19.2.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-03/compound-components-patterns/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.1.0",
14 | "react-dom": "^19.1.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-02/controlled-uncontrolled-comp-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.1.0",
14 | "react-dom": "^19.1.0",
15 | "react-error-boundary": "^4.0.13"
16 | },
17 | "devDependencies": {
18 | "@tailwindcss/postcss": "^4.0.0",
19 | "@types/react": "npm:types-react@rc",
20 | "@types/react-dom": "npm:types-react-dom@rc",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "eslint": "^8.57.0",
23 | "eslint-plugin-react": "^7.34.1",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.6",
26 | "postcss": "^8.4.38",
27 | "tailwindcss": "^4.0.0",
28 | "vite": "^5.2.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/virtualization/NonVirtualList.jsx:
--------------------------------------------------------------------------------
1 | export default function NonVirtualList({ users }) {
2 | return (
3 |
10 | {users.map((user) => (
11 | // We reuse Item visual, but each receives no style height optimization
12 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/day-01/container-presenter-pattern/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "axios": "^1.12.2",
14 | "react": "^19.1.0",
15 | "react-dom": "^19.1.0",
16 | "react-error-boundary": "^4.0.13"
17 | },
18 | "devDependencies": {
19 | "@tailwindcss/postcss": "^4.0.0",
20 | "@types/react": "npm:types-react@rc",
21 | "@types/react-dom": "npm:types-react-dom@rc",
22 | "@vitejs/plugin-react": "^4.2.1",
23 | "eslint": "^8.57.0",
24 | "eslint-plugin-react": "^7.34.1",
25 | "eslint-plugin-react-hooks": "^4.6.0",
26 | "eslint-plugin-react-refresh": "^0.4.6",
27 | "postcss": "^8.4.38",
28 | "tailwindcss": "^4.0.0",
29 | "vite": "^5.2.0"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-in-react-19",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.2.0",
14 | "react-dom": "^19.2.0",
15 | "react-error-boundary": "^4.0.13",
16 | "react-window": "1.8.x"
17 | },
18 | "devDependencies": {
19 | "@tailwindcss/postcss": "^4.0.0",
20 | "@types/react": "npm:types-react@rc",
21 | "@types/react-dom": "npm:types-react-dom@rc",
22 | "@vitejs/plugin-react": "^4.2.1",
23 | "babel-plugin-react-compiler": "^1.0.0",
24 | "eslint": "^8.57.0",
25 | "eslint-plugin-react": "^7.34.1",
26 | "eslint-plugin-react-hooks": "^4.6.0",
27 | "eslint-plugin-react-refresh": "^0.4.6",
28 | "postcss": "^8.4.38",
29 | "tailwindcss": "^4.0.0",
30 | "vite": "^5.2.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/day-12/slot-pattern/src/compound/CardCompound.jsx:
--------------------------------------------------------------------------------
1 | export default function CardCompound({ children }) {
2 | return (
3 |
16 |
22 | ))}
23 | {user.name}
17 |
18 | {user.email}
19 |
20 | {user.bio}
21 |
4 | {children}
5 |
6 | );
7 | }
8 |
9 | CardCompound.Header = function Header({ children }) {
10 | return (
11 |
18 | {children}
19 |
20 | );
21 | };
22 |
23 | CardCompound.Body = function Body({ children }) {
24 | return {children}
;
25 | };
26 |
27 | CardCompound.Actions = function Actions({ children }) {
28 | return (
29 |
36 | {children}
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/day-09/state-reducer-pattern/src/components/FormFields.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { useFormContext } from "../hooks/useFormContext";
3 |
4 | export default function FormFields() {
5 | const { state, dispatch } = useFormContext();
6 |
7 | const handleChange = (e) => {
8 | dispatch({
9 | type: "CHANGE_FIELD",
10 | payload: { name: e.target.name, value: e.target.value },
11 | });
12 | };
13 |
14 | return (
15 |
16 |
23 |
30 |
31 | {Object.entries(state.errors).map(([field, msg]) => (
32 |
37 | );
38 | }
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/lazy-loading/LazyLoader.jsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense, useState } from "react";
2 | import Light from "./Light";
3 |
4 | const Heavy = React.lazy(() => import("./Heavy"));
5 |
6 | const LazyLoader = () => {
7 | const [show, setShow] = useState(false);
8 |
9 | return (
10 | 33 | {msg} 34 |
35 | ))} 36 |
11 | Loading heavy component…
26 | }
27 | >
28 | {show && Lazy Demo
12 |
13 | Heavy component is loaded on demand via{" "}
14 | React.lazy().
15 |
18 |
22 |
23 |
30 |
31 | );
32 | }
33 |
34 | export default App;
35 |
--------------------------------------------------------------------------------
/day-10/pub-sub-pattern/src/components/publisher/AddToCartButton.jsx:
--------------------------------------------------------------------------------
1 | import { eventBus } from "../../lib/eventBus";
2 |
3 | const products = [
4 | { id: crypto.randomUUID(), name: "Soap" },
5 | { id: crypto.randomUUID(), name: "Towel" },
6 | { id: crypto.randomUUID(), name: "Bed" },
7 | { id: crypto.randomUUID(), name: "Mirror" },
8 | { id: crypto.randomUUID(), name: "Light" },
9 | ];
10 |
11 | export default function AddToCartButton() {
12 | const handleClick = () => {
13 | const randomIndex = Math.floor(Math.random() * products.length);
14 | const selectedProduct = products[randomIndex];
15 | eventBus.publish("cart:add", {
16 | id: selectedProduct.id,
17 | name: selectedProduct.name,
18 | });
19 | };
20 |
21 | return (
22 | 24 | {theme ? "☀️ Light Mode" : "🌙 Dark Mode"} 25 |
26 |
27 | {brand &&
29 | {brand.name}
} 28 |
23 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/derived/MoreExamples.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useState } from "react";
2 |
3 | export function Users({ list }) {
4 | const activeUsers = useMemo(() => {
5 | console.log("Filtering expensive list…");
6 | return list.filter((user) => user.active);
7 | }, [list]);
8 |
9 | return (
10 | <>
11 | Publisher
24 | 30 |Active Users: {activeUsers.length}
12 | {activeUsers.map((user) => ( 13 |{user.name}
14 | ))}
15 |
16 | );
17 | }
18 |
19 | // Wrong - Boolean
20 | export function Actor({ age }) {
21 | const [isAdult, setIsAdult] = useState(false);
22 |
23 | useEffect(() => {
24 | setIsAdult(age >= 18);
25 | }, [age]);
26 |
27 | return <>{isAdult ? Adult
:Minor
}; 28 | } 29 | 30 | // Wrong - Form 31 | 32 | export function Form({ name, email }) { 33 | const [isValid, setIsValid] = useState(false); 34 | 35 | useEffect(() => { 36 | setIsValid(name !== "" && email.includes("@")); 37 | }, [name, email]); 38 | 39 | return <>{isValid ?All Good
:Bad!!
}; 40 | } 41 | -------------------------------------------------------------------------------- /day-11/performance-patterns/src/performance/lazy-loading/Heavy.jsx: -------------------------------------------------------------------------------- 1 | import { useMemo } from "react"; 2 | 3 | console.log("[Heavy module] module evaluated"); // important: shows when module is parsed/loaded 4 | 5 | function generateBigData(count = 200000) { 6 | // simulate heavy CPU work and big data (but keep it synchronous for demonstration) 7 | const arr = new Array(count); 8 | for (let i = 0; i < count; i++) { 9 | arr[i] = `user-${i}-${Math.random().toString(36).slice(2, 9)}`; 10 | } 11 | return arr; 12 | } 13 | 14 | export default function Heavy() { 15 | // useMemo to avoid regenerating every render, but module eval is the heavy part 16 | const data = useMemo(() => { 17 | console.log("[Heavy] generating big data (expensive)"); 18 | return generateBigData(200000); // adjust number for your machine 19 | }, []); 20 | 21 | return ( 22 |
23 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/day-12/README.md:
--------------------------------------------------------------------------------
1 | # Day 12 - Slot Pattern
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - Day 12
6 | - Slots
7 | - Single Default Slot
8 | - Named Slots
9 | - Names Slot Map
10 | - Compound Components vs Slot patterns
11 | - Tasks
12 | - Surprise
13 |
14 | ## 🫶 Support
15 |
16 | Your support means a lot.
17 |
18 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
19 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
20 |
21 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
22 |
23 | ### 🤝 Sponsor My Work
24 |
25 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
26 |
27 | ## Video Sessions
28 |
29 | Here is the video for you to go through and learn:
30 |
31 | ### Video
32 |
33 | [](https://youtu.be/_LBgDy0j-Os "Video")
34 |
--------------------------------------------------------------------------------
/day-02/controlled-uncontrolled-comp-pattern/src/state-ref/components/CounterWithRef.jsx:
--------------------------------------------------------------------------------
1 | import { useRef, useState } from "react";
2 |
3 | function CounterWithRef() {
4 | const countRef = useRef(0); // persists between renders
5 | const [renderCount, setRenderCount] = useState(0); // for forcing re-renders
6 |
7 | const increment = () => {
8 | countRef.current = countRef.current + 1; // update ref
9 | console.log("Ref Count:", countRef.current);
10 | };
11 |
12 | return (
13 | Heavy Component
24 |Loaded heavy data length: {data.length}
25 | 26 | Check console: module evaluated and data generation logs. 27 | 28 |
14 |
26 | );
27 | }
28 |
29 | export default CounterWithRef;
30 |
--------------------------------------------------------------------------------
/day-02/controlled-uncontrolled-comp-pattern/src/uncontrolled/UncontrolledFormNoRef.jsx:
--------------------------------------------------------------------------------
1 | export default function UncontrolledFormNoRef() {
2 | const handleSubmit = (e) => {
3 | e.preventDefault();
4 |
5 | // Use FormData API to grab values directly
6 | const formData = new FormData(e.target);
7 | const data = Object.fromEntries(formData.entries());
8 |
9 | console.log("Form Data:", data);
10 | alert(`Hello ${data.username}, your email is ${data.email}`);
11 | };
12 |
13 | return (
14 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/day-08/README.md:
--------------------------------------------------------------------------------
1 | # Day 08 - Optimistic Hook Pattern
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - Hey, Optimistic
6 | - Things to Cover
7 | - What is Optimistic UI?
8 | - useOptimisitc Hook in React
9 | - Mini Project using useOptimistic() Hook
10 | - Error & Rollback
11 | - Use Cases & Ideas
12 | - Pifalls
13 | - Tasks
14 |
15 | ## 🫶 Support
16 |
17 | Your support means a lot.
18 |
19 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
20 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
21 |
22 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
23 |
24 | ### 🤝 Sponsor My Work
25 |
26 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
27 |
28 | ## Video
29 |
30 | Here is the video for you to go through and learn:
31 |
32 | [](https://youtu.be/x03yX-yNxas "Video")
33 |
--------------------------------------------------------------------------------
/day-05/README.md:
--------------------------------------------------------------------------------
1 | # Day 05 - HOC
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - Day 05
6 | - We Will Learn
7 | - Higher Order Function(HOF)
8 | - Higher Order Component(HOC)
9 | - The Movie App
10 | - HOC in Code(Setup)
11 | - Coding Movie App With HOC
12 | - Use Cases
13 | - Pitfalls and Alternatives
14 | - Tasks and Wrapping Up
15 |
16 | ## 🫶 Support
17 |
18 | Your support means a lot.
19 |
20 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
21 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
22 |
23 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
24 |
25 | ### 🤝 Sponsor My Work
26 |
27 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
28 |
29 | ## Video
30 |
31 | Here is the video for you to go through and learn:
32 |
33 | [](https://youtu.be/spDQ4oCKSPY "Video")
34 |
--------------------------------------------------------------------------------
/day-09/README.md:
--------------------------------------------------------------------------------
1 | # Day 09 - State Reducer Pattern
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - The State
6 | - State & Reducer in React
7 | - The useReducer() Hook
8 | - The State-Reducer Pattern
9 | - Implementing State-Reducer Pattern
10 | - State-Reducer-Provider-Context-Hook
11 | - Use Cases
12 | - Pitfalls
13 | - Tasks
14 |
15 | ## 🫶 Support
16 |
17 | Your support means a lot.
18 |
19 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
20 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
21 |
22 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
23 |
24 | ### 🤝 Sponsor My Work
25 |
26 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
27 |
28 | ## Video
29 |
30 | Here is the video for you to go through and learn:
31 |
32 | [](https://youtu.be/vZswuz3NTgs "Video")
33 |
--------------------------------------------------------------------------------
/day-00/README.md:
--------------------------------------------------------------------------------
1 | # Day 00 - 15 Days of React Design Patterns
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - Welcome to the "15 Days of React Design Patterns" series!
6 | - The Problem
7 | - The Objective
8 | - React Refresher
9 | - Why Design Patterns?
10 | - 15 React Design Patterns
11 | - What’s Next!
12 |
13 | ## 🫶 Support
14 |
15 | Your support means a lot.
16 |
17 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
18 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
19 |
20 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
21 |
22 | ### 🤝 Sponsor My Work
23 |
24 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
25 |
26 | ## Video
27 |
28 | Here is the video for you to go through and learn:
29 |
30 | [](https://www.youtube.com/watch?v=OWi31QoHqNk&pp=0gcJCckJAYcqIYzv "Video")
31 |
--------------------------------------------------------------------------------
/day-06/README.md:
--------------------------------------------------------------------------------
1 | # Day 06 - Custom Hooks Pattern
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - Day 06
6 | - What Will We Learn?
7 | - Why Hooks?
8 | - What is a Hook in React?
9 | - Built-in Hooks
10 | - Rules of Hooks
11 | - Custom Hooks
12 | - Writing Custom Hooks
13 | - Use Cases
14 | - Pitfalls
15 | - Tasks and Wrapping Up
16 |
17 | ## 🫶 Support
18 |
19 | Your support means a lot.
20 |
21 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
22 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
23 |
24 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
25 |
26 | ### 🤝 Sponsor My Work
27 |
28 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
29 |
30 | ## Video
31 |
32 | Here is the video for you to go through and learn:
33 |
34 | [](https://www.youtube.com/watch?v=fhwvqTry_Vg "Video")
35 |
--------------------------------------------------------------------------------
/day-02/controlled-uncontrolled-comp-pattern/src/uncontrolled/UncontrolledFeedbackForm.jsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 |
3 | export default function UncontrolledFeedbackForm() {
4 | const nameRef = useRef();
5 | const emailRef = useRef();
6 | const messageRef = useRef();
7 |
8 | const handleSubmit = (e) => {
9 | e.preventDefault();
10 | const name = nameRef.current.value;
11 | const email = emailRef.current.value;
12 | const message = messageRef.current.value;
13 |
14 | if (!name) { nameRef.current.focus(); return; }
15 | if (!email.includes("@")) { emailRef.current.focus(); return; }
16 | if (!message) { messageRef.current.focus(); return; }
17 |
18 | console.log("Form submitted:", { name, email, message });
19 | };
20 |
21 | return (
22 |
28 | );
29 | }
--------------------------------------------------------------------------------
/day-03/README.md:
--------------------------------------------------------------------------------
1 | # Day 03 - Compound Components Pattern
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - About Day 03
6 | - We Will Learn
7 | - Prerequisites
8 | - The Prop Soup
9 | - The Problems
10 | - The Compound Components Pattern
11 | - Applying the Pattern to Messy Modal
12 | - Implementing Accordion
13 | - Use Cases
14 | - PitFalls & Anti-Patterns
15 | - Tasks & Wrap Up
16 |
17 | ## 🫶 Support
18 |
19 | Your support means a lot.
20 |
21 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
22 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
23 |
24 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
25 |
26 | ### 🤝 Sponsor My Work
27 |
28 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
29 |
30 | ## Video
31 |
32 | Here is the video for you to go through and learn:
33 |
34 | [](https://youtu.be/LglWulOqh6k "Video")
35 |
--------------------------------------------------------------------------------
/day-04/README.md:
--------------------------------------------------------------------------------
1 | # Day 04 - Render Props Pattern
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - Should We Learn Render Props?
6 | - We Will Learn
7 | - Prerequisites
8 | - The Problem
9 | - Code Setup
10 | - Messy Tracker Problem
11 | - What is Render Props Pattern?
12 | - Implement Render Props Pattern
13 | - Children Prop
14 | - Use Cases
15 | - Pitfalls & Alternatives
16 | - Task and What’s Next?
17 |
18 | ## 🫶 Support
19 |
20 | Your support means a lot.
21 |
22 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
23 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
24 |
25 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
26 |
27 | ### 🤝 Sponsor My Work
28 |
29 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
30 |
31 | ## Video
32 |
33 | Here is the video for you to go through and learn:
34 |
35 | [](https://youtu.be/tIdJj0n1mg4 "Video")
36 |
--------------------------------------------------------------------------------
/day-03/compound-components-patterns/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | // import Modal from "./messy/Modal";
3 | import Modal from "./with-pattern/modal/Modal";
4 | import AccordionDemo from "./with-pattern/accordion/AccordionDemo";
5 | import "./App.css";
6 |
7 | function App() {
8 | const [isOpen, setIsOpen] = useState(false);
9 | return (
10 |
15 |
18 |
19 | Ref Count: {countRef.current}
16 | 17 |
20 |
25 | Render Count: {renderCount}
21 | 24 |
11 |
12 |
13 | setIsOpen(false)}>
14 |
15 |
17 |
18 |
24 |
25 |
26 |
29 |
30 |
31 |
32 | );
33 | }
34 |
35 | export default App;
36 |
--------------------------------------------------------------------------------
/day-07/README.md:
--------------------------------------------------------------------------------
1 | # Day 07 - Provider Pattern
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | - What Will We Learn?
6 | - Provider Pattern
7 | - Provider & Context
8 | - Create a Context
9 | - Create a Provider
10 | - Wrapping the Hierarchy
11 | - Hook Pattern with Provider and Context
12 | - Multiple Providers and Contexts
13 | - Context in React 19 Way
14 | - Use Cases & Ideas
15 | - Pitfalls & Anti-Patterns
16 | - Tasks
17 |
18 | ## 🫶 Support
19 |
20 | Your support means a lot.
21 |
22 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
23 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
24 |
25 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
26 |
27 | ### 🤝 Sponsor My Work
28 |
29 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
30 |
31 | ## Video
32 |
33 | Here is the video for you to go through and learn:
34 |
35 | [](https://www.youtube.com/watch?v=POWMosrdamI "Video")
36 |
--------------------------------------------------------------------------------
/day-05/hoc-pattern/src/movies/hoc/withDataFetching.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export function withDataFetching(WrappedComponent) {
4 | return function WithDataFetchingComponent(props) {
5 | const [data, setData] = useState([]);
6 | const [loading, setLoading] = useState(true);
7 | const [error, setError] = useState(null);
8 |
9 | useEffect(() => {
10 | async function fetchData() {
11 | try {
12 | const res = await fetch(
13 | `${import.meta.env.VITE_API_BASE_URL}/api/movies`
14 | );
15 | if (!res.ok) throw new Error("Failed to fetch data");
16 | const result = await res.json();
17 | setData(result);
18 | } catch (err) {
19 | setError(err.message);
20 | } finally {
21 | setLoading(false);
22 | }
23 | }
24 |
25 | fetchData();
26 | }, []);
27 |
28 | if (loading) return Welcome!
16 |19 | This is a modal built with the Compound Component 20 | pattern. 21 |
22 |Loading data...
; 29 | if (error) returnError: {error}
; 30 | 31 | // Pass the fetched data down as a prop 32 | return
15 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/day-06/custom-pattern-hooks/README.md:
--------------------------------------------------------------------------------
1 | # Code in React 19
2 |
3 | As React 19 is new, this scaffolding project is for everyone who wants to start coding in React 19.
4 |
5 | It has:
6 |
7 | - Vite
8 | - React 19.2(Stable Version)
9 | - TailwindCSS 4.x
10 |
11 | ## Create Your Own React 19 Project with Vite and TailwindCSS
12 | There are multiple ways you can utilize this repository to create your own project. The most straightforward way is by using the follwoing command from the command prompt/terminal:
13 |
14 | ```bash
15 | npx degit atapas/code-in-react-19#main
23 | {/* header is a slot prop — consumer passes a React node */}
24 | {header}
25 |
26 |
27 |
28 | {/* main content slot */}
29 | {content}
30 |
31 |
32 |
40 | {/* footer slot */}
41 | {footer}
42 |
43 |
11 | {/* (
16 | (
24 |
31 | {({ x, y }) => (
32 |
37 |
38 |
39 | {({ x, y }) => (
40 |
45 |
46 | );
47 | }
48 |
49 | export default App;
50 |
--------------------------------------------------------------------------------
/day-05/task.md:
--------------------------------------------------------------------------------
1 | # Day 05 - Your Task
2 |
3 | Create a Higher Order Component that injects user data and handles permission-based access into any component. The goal is to learn how to wrap existing components with cross-cutting logic (like authentication or roles) without rewriting them.
4 |
5 | You are building an Admin Dashboard for a React app that has multiple pages:
6 |
7 | - ProfilePage – displays logged-in user’s info
8 | - AdminPanel – visible only to admins
9 | - ReportsPage – visible only to users with “report” permissions
10 |
11 | You already have these components — but each one needs to fetch the user data, check permissions, and conditionally render UI. That’s repeated logic, and the perfect case for an HOC.
12 |
13 | ## You Need To Do
14 |
15 | 1. Create a Higher Order Component (HOC) named `withUserDataAndPermissions`.
16 | 2. This HOC should:
17 | - Fetch user data (simulate with a static object).
18 | - Check if the user has the required permissions.
19 | - Inject user data and permission status as props into the wrapped component.
20 | 3. Wrap the existing components (`ProfilePage`, `AdminPanel`, `ReportsPage`) with this HOC.
21 | 4. Each component should render differently based on the injected props:
22 | - `ProfilePage` should always display user info.
23 | - `AdminPanel` should only render if the user is an admin; otherwise, show an "Access Denied" message.
24 | - `ReportsPage` should only render if the user has "report" permissions; otherwise, show an "Access Denied" message.
25 | 5. Share the task completed repo on Discord.
26 |
--------------------------------------------------------------------------------
/day-06/custom-pattern-hooks/src/components/AuthPanel.jsx:
--------------------------------------------------------------------------------
1 | import {useState} from "react";
2 | import { useAuth } from "../hooks/useAuth";
3 |
4 | export default function AuthPanel() {
5 | const { user, login, logout, isAuthenticated } = useAuth();
6 | const [form, setForm] = useState({ username: "", password: "" });
7 |
8 | const handleChange = (e) => {
9 | setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
10 | };
11 |
12 | const handleSubmit = (e) => {
13 | e.preventDefault();
14 | login(form.username, form.password);
15 | };
16 |
17 | return (
18 | 17 | 🚗 Car is at ({pos.x}, {pos.y}) 18 |
19 | )} 20 | /> 21 | 22 |25 | 🏍️ Bike is at ({x}, {y}) 26 |
27 | )} 28 | />*/} 29 | 30 |33 | 🚗 Car is at ({x}, {y}) 34 |
35 | )} 36 |41 | 🏍️ Bike is at ({x}, {y}) 42 |
43 | )} 44 |
19 |
54 | );
55 | }
--------------------------------------------------------------------------------
/day-11/README.md:
--------------------------------------------------------------------------------
1 | # Day 11 - Performance Patterns
2 |
3 | ## **🎯 Goal of This Lesson**
4 |
5 | ## Part 1
6 |
7 | - Performance Patterns
8 | - What’s in Part 1?
9 | - Re-Rendering in React
10 | - Memoization
11 | - The memo()
12 | - The useCallback()
13 | - the useMemo()
14 | - The Derived State
15 | - Debouncing
16 | - Throttling
17 | - Tasks and End
18 |
19 | ## Part 2
20 |
21 | - Advanced Patterns
22 | - What’s in Part 2?
23 | - React Compiler
24 | - Lazy Loading & Suspense
25 | - Component Isolation
26 | - Context Optimizations
27 | - Virtualization
28 | - Concurrency and useTransition()
29 | - Deferred Value
30 | - List and Keys
31 | - Tools
32 | - Tasks
33 | - Oner Word of Wisdom
34 |
35 | ## 🫶 Support
36 |
37 | Your support means a lot.
38 |
39 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
40 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
41 |
42 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
43 |
44 | ### 🤝 Sponsor My Work
45 |
46 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
47 |
48 | ## Video Sessions
49 |
50 | Here is the video for you to go through and learn:
51 |
52 | ### Part 1 Video
53 |
54 | [](https://youtu.be/G8Mk6lsSOcw "Video")
55 |
56 | ## Part 2 Video
57 |
58 | [](https://youtu.be/HJFDXKkz67M "Video")
59 |
--------------------------------------------------------------------------------
/day-11/performance-patterns/src/performance/virtualization/VirtualizationDemo.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import NonVirtualList from "./NonVirtualList";
3 | import VirtualList from "./VirtualList";
4 | import { useFakeUsers } from "./data";
5 |
6 | const VirtualizationDemo = () => {
7 | const users = useFakeUsers(50000);
8 | const [mode, setMode] = useState("virtual"); // "virtual" or "non-virtual"
9 |
10 | return (
11 | 🧑💻 Authentication Panel
20 | 21 | {isAuthenticated ? ( 22 | <> 23 |Welcome, {user} 🎉
24 | 27 | 28 | ) : ( 29 | 52 | )} 53 |
12 |
42 | );
43 | };
44 |
45 | export default VirtualizationDemo;
46 |
--------------------------------------------------------------------------------
/day-01/container-presenter-pattern/src/with-pattern/components/profile/ProfileHeader.jsx:
--------------------------------------------------------------------------------
1 | const ProfileHeader = ({
2 | user,
3 | isEditing,
4 | formData,
5 | formError,
6 | onStartEdit,
7 | onSaveProfile,
8 | onCancelEdit,
9 | onInputChange,
10 | }) => {
11 | return (
12 | List Virtualization Demo
13 | 14 |
15 |
22 |
30 |
31 |
32 |
33 | Current mode: {mode} — Users: {users.length}
34 |
35 |
36 | {mode === "virtual" ? (
37 |
13 | 
18 |
19 | {!isEditing ? (
20 |
21 |
28 | ) : (
29 | {user.name}
22 |{user.email}
23 |{user.bio}
24 | 27 |
30 | {formError &&
{formError}
}
31 | onInputChange("name", e.target.value)}
35 | placeholder="Name"
36 | />
37 | onInputChange("email", e.target.value)}
41 | placeholder="Email"
42 | />
43 |