├── .gitignore ├── .parcelrc ├── .postcssrc ├── E01_Inception ├── notes │ └── inception.md └── practical │ ├── App.js │ ├── index.css │ └── index.html ├── E02_Igniting └── notes │ └── notes.md ├── E03_foundation ├── notes │ └── foundation.md └── practical │ └── App.js ├── E04_code ├── notes │ └── notes.md └── practical │ ├── App.js │ ├── index.css │ └── index.html ├── E05_hooks ├── notes │ └── note.md └── practical │ └── src │ ├── App.js │ ├── components │ ├── Footer.js │ ├── Header.js │ ├── Main.js │ ├── ProductCard.js │ ├── ProductFilters.js │ └── ProductList.js │ └── utils │ └── productMock.js ├── E06_expore ├── notes │ └── note.md └── practical │ └── src │ ├── App.js │ ├── components │ ├── Footer.js │ ├── Header.js │ ├── Main.js │ ├── ProductCard.js │ ├── ProductList.js │ └── Shimmer.js │ └── utils │ └── mockData.js ├── E07_finding ├── notes │ └── note.md └── practical │ └── src │ ├── App.js │ ├── components │ ├── Footer.js │ ├── Header.js │ ├── ProductCard.js │ ├── ProductList.js │ ├── Shimmer.js │ └── pages │ │ ├── BestSeller.js │ │ ├── Electronics.js │ │ ├── Error.js │ │ ├── Home.js │ │ ├── ProductDetail.js │ │ └── index.js │ └── utils │ └── mockData.js ├── E08_class ├── notes │ └── note.md └── practical │ └── src │ ├── App.js │ ├── components │ ├── Footer.js │ ├── Header.js │ ├── ProductCard.js │ ├── Shimmer.js │ └── pages │ │ ├── BestSeller.js │ │ ├── Electronics.js │ │ ├── Error.js │ │ ├── Home.js │ │ ├── ProductDetail.js │ │ ├── ProductList.js │ │ ├── UserClass.js │ │ ├── index.js │ │ └── users │ │ ├── GithubProfile.js │ │ ├── OrderCard.js │ │ └── OrderHistory.js │ └── utils │ └── mockData.js ├── E09_optimization ├── notes │ └── note.md └── practical │ └── src │ ├── App.js │ ├── components │ ├── Footer.js │ ├── Header.js │ ├── ProductCard.js │ ├── Shimmer.js │ └── pages │ │ ├── BestSeller.js │ │ ├── Electronics.js │ │ ├── Error.js │ │ ├── Home.js │ │ ├── ProductDetail.js │ │ ├── ProductList.js │ │ ├── UserClass.js │ │ ├── index.js │ │ └── users │ │ ├── GithubProfile.js │ │ ├── OrderCard.js │ │ └── OrderHistory.js │ └── utils │ ├── hooks │ ├── index.js │ └── useOnlineStatus.js │ └── mockData.js ├── E10_tailwind ├── notes │ └── note.md └── practical │ ├── .postcssrc │ ├── README.md │ ├── index.css │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.js │ ├── components │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── ProductCard.js │ │ ├── Shimmer.js │ │ └── pages │ │ │ ├── BestSeller.js │ │ │ ├── Electronics.js │ │ │ ├── Error.js │ │ │ ├── Home.js │ │ │ ├── ProductDetail.js │ │ │ ├── ProductList.js │ │ │ ├── UserClass.js │ │ │ ├── index.js │ │ │ └── users │ │ │ ├── GithubProfile.js │ │ │ ├── OrderCard.js │ │ │ └── OrderHistory.js │ └── utils │ │ ├── hooks │ │ ├── index.js │ │ └── useOnlineStatus.js │ │ └── mockData.js │ ├── tailwind.config.js │ └── tailwind.css ├── E11_data ├── notes │ └── note.md └── practical │ ├── .gitignore │ ├── .postcssrc │ ├── README.md │ ├── index.css │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.js │ ├── components │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── ProductCard.js │ │ ├── ProductInfo.js │ │ ├── Shimmer.js │ │ ├── hoc │ │ │ ├── Button.js │ │ │ ├── Card.js │ │ │ └── HocComponent.js │ │ └── pages │ │ │ ├── BestSeller.js │ │ │ ├── Electronics.js │ │ │ ├── Error.js │ │ │ ├── Home.js │ │ │ ├── ProductDetail.js │ │ │ ├── ProductList.js │ │ │ ├── UserClass.js │ │ │ ├── index.js │ │ │ └── users │ │ │ ├── GithubProfile.js │ │ │ ├── OrderCard.js │ │ │ └── OrderHistory.js │ ├── data │ │ └── UserContext.js │ └── utils │ │ ├── constants │ │ └── index.js │ │ ├── hooks │ │ ├── index.js │ │ └── useOnlineStatus.js │ │ └── mockData.js │ ├── tailwind.config.js │ └── tailwind.css ├── E12_redux ├── notes │ ├── interviewQuestion.md │ ├── note.md │ ├── reduxBestPractices.md │ ├── reduxDevtool.md │ └── reduxVersionHistory.md └── practical │ ├── .gitignore │ ├── .postcssrc │ ├── README.md │ ├── index.css │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── reactVersionHistory.md │ ├── src │ ├── App.js │ ├── components │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── ProductCard.js │ │ ├── ProductInfo.js │ │ ├── Shimmer.js │ │ ├── hoc │ │ │ ├── Button.js │ │ │ ├── Card.js │ │ │ └── HocComponent.js │ │ └── pages │ │ │ ├── BestSeller.js │ │ │ ├── Cart.js │ │ │ ├── Electronics.js │ │ │ ├── Error.js │ │ │ ├── Home.js │ │ │ ├── ProductDetail.js │ │ │ ├── ProductList.js │ │ │ ├── UserClass.js │ │ │ ├── checkout │ │ │ └── CartItem.js │ │ │ ├── index.js │ │ │ └── users │ │ │ ├── GithubProfile.js │ │ │ ├── OrderCard.js │ │ │ └── OrderHistory.js │ ├── data │ │ └── UserContext.js │ ├── store │ │ ├── appStore.js │ │ ├── cartSlice.js │ │ └── userSlice.js │ └── utils │ │ ├── constants │ │ └── index.js │ │ ├── hooks │ │ ├── index.js │ │ └── useOnlineStatus.js │ │ └── mockData.js │ ├── tailwind.config.js │ └── tailwind.css ├── E13_testing ├── notes │ └── note.md └── practical │ ├── .gitignore │ ├── .parcelrc │ ├── .postcssrc │ ├── README.md │ ├── babel.config.js │ ├── index.css │ ├── index.html │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── reactVersionHistory.md │ ├── src │ ├── App.js │ ├── components │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── ProductCard.js │ │ ├── ProductInfo.js │ │ ├── Shimmer.js │ │ ├── __tests__ │ │ │ ├── ContactUs.test.js │ │ │ ├── Footer.test.js │ │ │ └── sum.test.js │ │ ├── hoc │ │ │ ├── Button.js │ │ │ ├── Card.js │ │ │ └── HocComponent.js │ │ ├── pages │ │ │ ├── BestSeller.js │ │ │ ├── Cart.js │ │ │ ├── ContactUs.js │ │ │ ├── Electronics.js │ │ │ ├── Error.js │ │ │ ├── Home.js │ │ │ ├── ProductDetail.js │ │ │ ├── ProductList.js │ │ │ ├── UserClass.js │ │ │ ├── checkout │ │ │ │ └── CartItem.js │ │ │ ├── index.js │ │ │ └── users │ │ │ │ ├── GithubProfile.js │ │ │ │ ├── OrderCard.js │ │ │ │ └── OrderHistory.js │ │ └── sum.js │ ├── data │ │ └── UserContext.js │ ├── store │ │ ├── appStore.js │ │ ├── cartSlice.js │ │ └── userSlice.js │ └── utils │ │ ├── constants │ │ └── index.js │ │ ├── hooks │ │ ├── index.js │ │ └── useOnlineStatus.js │ │ └── mockData.js │ ├── tailwind.config.js │ └── tailwind.css ├── README.md ├── babel.config.js ├── coverage ├── clover.xml ├── coverage-final.json ├── lcov-report │ ├── Footer.js.html │ ├── base.css │ ├── block-navigation.js │ ├── components │ │ ├── Footer.js.html │ │ ├── index.html │ │ ├── pages │ │ │ ├── ContactUs.js.html │ │ │ └── index.html │ │ └── sum.js.html │ ├── favicon.png │ ├── index.html │ ├── prettify.css │ ├── prettify.js │ ├── sort-arrow-sprite.png │ ├── sorter.js │ └── sum.js.html └── lcov.info ├── index.css ├── index.html ├── jest.config.js ├── package-lock.json ├── package.json ├── reactVersionHistory.md ├── src ├── App.js ├── components │ ├── Footer.js │ ├── Header.js │ ├── ProductCard.js │ ├── ProductInfo.js │ ├── Shimmer.js │ ├── __tests__ │ │ ├── ContactUs.test.js │ │ ├── Footer.test.js │ │ └── sum.test.js │ ├── hoc │ │ ├── Button.js │ │ ├── Card.js │ │ └── HocComponent.js │ ├── pages │ │ ├── BestSeller.js │ │ ├── Cart.js │ │ ├── ContactUs.js │ │ ├── Electronics.js │ │ ├── Error.js │ │ ├── Home.js │ │ ├── ProductDetail.js │ │ ├── ProductList.js │ │ ├── UserClass.js │ │ ├── checkout │ │ │ └── CartItem.js │ │ ├── index.js │ │ └── users │ │ │ ├── GithubProfile.js │ │ │ ├── OrderCard.js │ │ │ └── OrderHistory.js │ └── sum.js ├── data │ └── UserContext.js ├── store │ ├── appStore.js │ ├── cartSlice.js │ └── userSlice.js └── utils │ ├── constants │ └── index.js │ ├── hooks │ ├── index.js │ └── useOnlineStatus.js │ └── mockData.js ├── tailwind.config.js └── tailwind.css /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | .parcel-cache 4 | 5 | .DS_Store 6 | -------------------------------------------------------------------------------- /.parcelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@parcel/config-default", 3 | "transformers": { 4 | "*.{js,mjs,jsx,cjs,ts,tsx}": [ 5 | "@parcel/transformer-js", 6 | "@parcel/transformer-react-refresh-wrap" 7 | ] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "tailwindcss": {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /E01_Inception/notes/inception.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okNeeraj/namaste-react/bd44cdee9d367c2233b4f8b48ad9c3f2f9a49522/E01_Inception/notes/inception.md -------------------------------------------------------------------------------- /E01_Inception/practical/App.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 01. Add heading using Javascript 4 | */ 5 | const jsHeading = document.createElement('h1'); 6 | jsHeading.innerHTML = 'Hello World From Javascript!'; 7 | 8 | const jsRroot = document.getElementById('root'); 9 | jsRroot.appendChild(jsHeading); 10 | 11 | 12 | /** 13 | * 02. Add heading using React 14 | */ 15 | const reactHeading = React.createElement('h1', {}, 'Hello World From React!'); 16 | const reactRoot = ReactDOM.createRoot(document.getElementById('root')); 17 | reactRoot.render(reactHeading); 18 | 19 | 20 | /** 21 | * Add nested HTML 22 | */ 23 | const nested = React.createElement('div', { id: 'parent' }, [ 24 | React.createElement('div', { id: 'child1' }, [ 25 | React.createElement('h1', {}, 'dddddHello, Iam H1 Tag Inside Child 1.'), 26 | React.createElement('h2', {}, 'Hello, Iam H2 Tag.') 27 | ]), 28 | React.createElement('div', { id: 'child2' }, [ 29 | React.createElement('h1', {}, 'Hello, Iam H1 Tag Child 2.'), 30 | React.createElement('h2', {}, 'Hello, Iam H2 Tag Child 2.') 31 | ]) 32 | ]) 33 | 34 | reactRoot.render(nested); 35 | -------------------------------------------------------------------------------- /E01_Inception/practical/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okNeeraj/namaste-react/bd44cdee9d367c2233b4f8b48ad9c3f2f9a49522/E01_Inception/practical/index.css -------------------------------------------------------------------------------- /E01_Inception/practical/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste React 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /E02_Igniting/notes/notes.md: -------------------------------------------------------------------------------- 1 | # Parcel 2 | Parcel is a web application bundler, often referred to as a "zero configuration" bundler, which means it requires minimal to no configuration to bundle and build your web application. It simplifies the build process by automatically analyzing and bundling your project's dependencies and assets. 3 | 4 | Key features of Parcel include: 5 | 6 | 1. **Zero Configuration:** Parcel eliminates the need for complex configuration files (e.g., Webpack config) to set up your project. It automatically detects and configures most project settings, making it easy to get started. 7 | 8 | 2. **Fast Build Times:** Parcel is known for its fast build times, thanks to its intelligent caching and parallel processing. It optimizes the build process for speed and efficiency. 9 | 10 | 3. **Dependency Resolution:** Parcel automatically resolves and bundles all dependencies, including JavaScript, CSS, HTML, and more. It supports CommonJS, ES6, and other module systems. 11 | 12 | 4. **Support for Various Asset Types:** Parcel supports a wide range of asset types, including JavaScript, CSS, HTML, images, fonts, and more. It can process these assets and bundle them into an optimized package for deployment. 13 | 14 | 5. **Hot Module Replacement (HMR):** Parcel offers Hot Module Replacement, enabling you to see live updates in the browser as you make changes to your code without requiring a full page reload. 15 | 16 | 6. **Built-in Code Splitting:** Parcel provides built-in support for code splitting, allowing you to split your code into smaller, more manageable chunks that are loaded on demand. 17 | 18 | 7. **Cross-Browser Support:** Parcel ensures that the bundled output works across different browsers by handling browser compatibility and polyfills. 19 | 20 | 8. **Integration with Build Tools:** While Parcel is designed to be a zero-configuration bundler, it can still be extended and customized if needed, making it flexible enough to fit into various build toolchains. 21 | 22 | Overall, Parcel is a powerful and developer-friendly bundler that simplifies the build process and allows developers to focus more on writing code and less on configuring and setting up the build system. It's widely used in modern web development due to its ease of use and fast build times. 23 | -------------------------------------------------------------------------------- /E03_foundation/notes/foundation.md: -------------------------------------------------------------------------------- 1 | # Component 2 | 3 | # Component Composition 4 | -------------------------------------------------------------------------------- /E03_foundation/practical/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | // Component using arrow function 5 | const App = () => { 6 | return ( 7 |
8 | App Component 9 | {Heading()} 10 | 11 | 12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | // Component using normal function 19 | function NormalFn() { 20 | return ( 21 |

Iam, Normal function component

22 | ); 23 | }; 24 | 25 | const Heading = () =>

Hey, Iam Heading Component

; 26 | 27 | const Description = () => ( 28 |

Hey, Iam rendring from Description component.

29 | ); 30 | const root = ReactDOM.createRoot(document.getElementById('root')) 31 | root.render(); 32 | -------------------------------------------------------------------------------- /E04_code/notes/notes.md: -------------------------------------------------------------------------------- 1 | # Config Driven UI 2 | -------------------------------------------------------------------------------- /E04_code/practical/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-size: 14px; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | 8 | *, 9 | *::after, 10 | *::before { 11 | box-sizing: border-box; 12 | } 13 | 14 | img { 15 | max-width: 100%; 16 | } 17 | 18 | h1, 19 | h2, 20 | h3, 21 | h4, 22 | h5, 23 | h6, 24 | p { 25 | margin: 0; 26 | } 27 | 28 | .btn { 29 | padding: 8px 16px; 30 | border: 0; 31 | border-radius: 4px; 32 | cursor: pointer; 33 | } 34 | 35 | .btn-primary { 36 | background-color: #99045b; 37 | color: #fff; 38 | } 39 | 40 | .btn-primary:hover { 41 | background-color: #880351; 42 | } 43 | 44 | .heading { 45 | margin-bottom: 28px; 46 | } 47 | 48 | .product-section { 49 | margin: 12px 5%; 50 | } 51 | 52 | .product-list { 53 | display: flex; 54 | flex-wrap: wrap; 55 | gap: 16px; 56 | } 57 | 58 | .product-item { 59 | flex: 0 0 calc(20% - 16px); 60 | border: 1px solid #f3f3f3; 61 | padding: 16px; 62 | border-radius: 4px; 63 | box-shadow: 0 4px 15px #eeeeee; 64 | } 65 | 66 | .product-item:hover { 67 | box-shadow: 0 4px 15px #dcdddd; 68 | } 69 | 70 | .product-thumb { 71 | height: 200px; 72 | text-align: center; 73 | } 74 | 75 | .product-thumb img { 76 | object-fit: contain; 77 | height: inherit; 78 | } 79 | 80 | .product-body { 81 | margin-top: 16px; 82 | } 83 | 84 | .product-title { 85 | margin-bottom: 6px; 86 | font-size: 14px; 87 | height: 36px; 88 | line-height: 18px; 89 | display: -webkit-box; 90 | -webkit-line-clamp: 2; 91 | -webkit-box-orient: vertical; 92 | overflow: hidden; 93 | text-overflow: ellipsis; 94 | } 95 | 96 | .product-desc { 97 | margin-bottom: 6px; 98 | font-size: 12px; 99 | } 100 | 101 | .product-footer { 102 | display: flex; 103 | justify-content: space-between; 104 | align-items: center; 105 | margin-top: 16px; 106 | } 107 | 108 | .product-price span { 109 | font-size: 18px; 110 | } 111 | -------------------------------------------------------------------------------- /E04_code/practical/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Namaste React 8 | 9 | 10 | 11 |
Hello
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /E05_hooks/notes/note.md: -------------------------------------------------------------------------------- 1 | # Export/Import 2 | 3 | There are two type of export and import - 4 | 5 | 1. Default export/import 6 | 2. Named export/import 7 | 8 | ## Default export/import 9 | 10 | ```javascript 11 | // ./path/component/AppComponent.js 12 | 13 | const AppComponent = () = { 14 | return true; 15 | } 16 | // Export 17 | export default Appcomponent; 18 | 19 | // Import 20 | import AppComponent from './path/AppComponent'; 21 | ``` 22 | 23 | ## Named export/import 24 | 25 | ```javascript 26 | // ./path/component/editor.js 27 | 28 | export const MergeComponent = () = { 29 | return true; 30 | } 31 | export const BuildComponent = () = { 32 | return true; 33 | } 34 | 35 | import { AppComponent, BuildComponent } from './path/component/editor' 36 | ``` 37 | -------------------------------------------------------------------------------- /E05_hooks/practical/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDom from "react-dom/client"; 3 | 4 | import Header from "./components/Header"; 5 | import Main from "./components/Main"; 6 | import Footer from "./components/Footer"; 7 | 8 | const App = () => { 9 | return ( 10 | <> 11 |
12 |
13 |