├── react-hooks ├── src │ ├── App.css │ ├── index.css │ ├── main.jsx │ ├── App.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js └── public │ └── vite.svg ├── README.md ├── redux-tool ├── src │ ├── App.css │ ├── index.css │ ├── App │ │ └── store.js │ ├── App.jsx │ ├── main.jsx │ ├── features │ │ └── todo │ │ │ └── todoSlice.js │ ├── components │ │ ├── AddTodo.jsx │ │ └── Todos.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js └── public │ └── vite.svg ├── context_API-2 ├── src │ ├── App.css │ ├── index.css │ ├── main.jsx │ ├── context │ │ └── Theme.js │ ├── App.jsx │ ├── component │ │ ├── ThemeBtn.jsx │ │ └── Card.jsx │ └── assets │ │ └── react.svg ├── tailwind.config.js ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js └── public │ └── vite.svg ├── context_API_LS ├── src │ ├── App.css │ ├── index.css │ ├── context │ │ ├── index.js │ │ └── TodoContext.js │ ├── main.jsx │ ├── components │ │ ├── TodoForm.jsx │ │ └── TodoItem.jsx │ ├── App.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js └── public │ └── vite.svg ├── custom-hooks ├── src │ ├── App.css │ ├── index.css │ ├── components │ │ ├── index.js │ │ └── Input.jsx │ ├── main.jsx │ ├── hooks │ │ └── useCurrencyInfo.js │ ├── App.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js ├── public │ └── vite.svg └── currency.md ├── react-bg-btn ├── src │ ├── App.css │ ├── index.css │ ├── main.jsx │ ├── components │ │ └── card.jsx │ ├── App.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js └── public │ └── vite.svg ├── react-router ├── src │ ├── index.css │ ├── components │ │ ├── User │ │ │ └── User.jsx │ │ ├── GitHub │ │ │ └── Github.jsx │ │ ├── About │ │ │ └── About.jsx │ │ ├── Home │ │ │ └── Home.jsx │ │ ├── Header │ │ │ └── Header.jsx │ │ ├── Contact │ │ │ └── Contact.jsx │ │ └── Footer │ │ │ └── Footer.jsx │ ├── App.jsx │ ├── App.css │ ├── main.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js └── public │ └── vite.svg ├── image.png └── context_API ├── src ├── context │ ├── UserContext.js │ └── UserContextProvider.jsx ├── main.jsx ├── components │ ├── Profile.jsx │ └── Login.jsx ├── App.jsx ├── App.css ├── index.css └── assets │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js └── public └── vite.svg /react-hooks/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | my react learnings 😀 2 | -------------------------------------------------------------------------------- /redux-tool/src/App.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /context_API-2/src/App.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /context_API-2/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /context_API_LS/src/App.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /custom-hooks/src/App.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /custom-hooks/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /react-bg-btn/src/App.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /react-hooks/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /redux-tool/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /context_API_LS/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss' -------------------------------------------------------------------------------- /react-router/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss'; 2 | -------------------------------------------------------------------------------- /react-bg-btn/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoj-jm/React-project/HEAD/image.png -------------------------------------------------------------------------------- /context_API_LS/src/context/index.js: -------------------------------------------------------------------------------- 1 | export {useTodo,TodoContext,TodoProvider} from './TodoContext' -------------------------------------------------------------------------------- /custom-hooks/src/components/index.js: -------------------------------------------------------------------------------- 1 | import Input from "./input"; 2 | 3 | 4 | 5 | export {Input} -------------------------------------------------------------------------------- /context_API/src/context/UserContext.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const UserContext = React.createContext() 4 | 5 | export default UserContext -------------------------------------------------------------------------------- /context_API/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /redux-tool/src/App/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import todoReducer from '../features/todo/todoSlice'; 3 | 4 | export const store = configureStore({ 5 | reducer : todoReducer 6 | }) -------------------------------------------------------------------------------- /context_API-2/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss'.Config)} */ 2 | 3 | export default { 4 | content: ["./index.html", "./src/**/*.{js,ts}"], 5 | darkMode: "class", 6 | theme: { 7 | extend: {}, 8 | }, 9 | Plugin: [], 10 | }; 11 | -------------------------------------------------------------------------------- /react-hooks/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react(),tailwindcss()], 7 | }) 8 | -------------------------------------------------------------------------------- /custom-hooks/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(),tailwindcss()], 8 | }) 9 | -------------------------------------------------------------------------------- /react-bg-btn/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import tailwindcss from "@tailwindcss/vite"; 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react(), tailwindcss()], 7 | }); 8 | -------------------------------------------------------------------------------- /react-router/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import tailwindcss from "@tailwindcss/vite"; 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react(), tailwindcss()], 7 | }); 8 | -------------------------------------------------------------------------------- /redux-tool/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(),tailwindcss()], 8 | }) 9 | -------------------------------------------------------------------------------- /context_API_LS/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import tailwindcss from "@tailwindcss/vite"; 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react(), tailwindcss()], 7 | }); 8 | -------------------------------------------------------------------------------- /react-bg-btn/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /context_API-2/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import tailwindcss from "@tailwindcss/vite"; 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), tailwindcss()], 8 | }); 9 | -------------------------------------------------------------------------------- /context_API-2/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /context_API/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /context_API_LS/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /custom-hooks/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /react-hooks/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /redux-tool/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import AddTodo from './components/AddTodo' 3 | import Todos from './components/Todos' 4 | 5 | function App() { 6 | 7 | return ( 8 | <> 9 | 10 | 11 | 12 | ) 13 | } 14 | 15 | export default App 16 | -------------------------------------------------------------------------------- /react-router/src/components/User/User.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useParams } from 'react-router-dom' 3 | 4 | function User() { 5 | const {userid} = useParams() 6 | return ( 7 |
User: {userid}
8 | ) 9 | } 10 | 11 | export default User -------------------------------------------------------------------------------- /context_API/src/components/Profile.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import UserContext from "../context/userContext"; 3 | 4 | const Profile = () => { 5 | const { user } = useContext(UserContext); 6 | if (!user) return
Please Login
; 7 | return
Welcome {user.username}
; 8 | }; 9 | 10 | export default Profile; 11 | -------------------------------------------------------------------------------- /context_API-2/.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 | -------------------------------------------------------------------------------- /context_API/.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 | -------------------------------------------------------------------------------- /custom-hooks/.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 | -------------------------------------------------------------------------------- /react-bg-btn/.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 | -------------------------------------------------------------------------------- /react-hooks/.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 | -------------------------------------------------------------------------------- /react-router/.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 | -------------------------------------------------------------------------------- /redux-tool/.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 | -------------------------------------------------------------------------------- /context_API_LS/.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 | -------------------------------------------------------------------------------- /redux-tool/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | import { Provider } from 'react-redux' 6 | import { store } from './App/store.js' 7 | 8 | createRoot(document.getElementById('root')).render( 9 | 10 | 11 | , 12 | ) 13 | -------------------------------------------------------------------------------- /context_API/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import Login from './components/Login' 3 | import './App.css' 4 | import UserContextProvider from './context/userContextProvider' 5 | import Profile from './components/Profile' 6 | 7 | function App() { 8 | return ( 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /redux-tool/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /context_API-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /context_API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /context_API_LS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /custom-hooks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-bg-btn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-router/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /context_API/src/context/UserContextProvider.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import UserContext from "./userContext"; 3 | 4 | 5 | const UserContextProvider = ({ children }) => { 6 | const [user, setUser] = React.useState(null); // api call is done here 7 | return ( 8 | 9 | {children} 10 | 11 | ); 12 | }; 13 | 14 | export default UserContextProvider; 15 | -------------------------------------------------------------------------------- /react-router/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import Header from "./components/Header/Header" 3 | import './App.css' 4 | import { Outlet } from 'react-router-dom' 5 | import Footer from './components/Footer/Footer' 6 | function App() { 7 | 8 | 9 | return ( 10 | <> 11 | {/*

React Router

*/} 12 |
13 | 14 |