├── .gitignore ├── README.md ├── accordion ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── feature-flag ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── context.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── github-profile-finder ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── image-slider ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── assets │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg │ ├── constants │ │ ├── img.constant.ts │ │ └── index.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── load-more-button ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── menu-ui ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── TreeMenu.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── modal-popup ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── qr-code-generator ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── reset.css │ └── setupTests.ts └── tsconfig.json ├── random-color-generator ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── scroll-indicator ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── reset.css │ └── setupTests.ts └── tsconfig.json ├── scroll-particular-section ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── scroll-to-top-bottom ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── search-autocomplete ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── star-rating ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── tabs ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── reset.css │ └── setupTests.ts └── tsconfig.json ├── theme-switcher ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── tic-tac-toe ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── use-onlick-outside-custom ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── use-window-resize ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json └── usefetch-custom-hook ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── index.css ├── index.tsx ├── logo.svg ├── react-app-env.d.ts ├── reportWebVitals.ts └── setupTests.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | -------------------------------------------------------------------------------- /accordion/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /accordion/README.md: -------------------------------------------------------------------------------- 1 | # Accordion 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/214f2bf5-870e-4d63-82c9-a9141c2fdaba 5 | 6 | -------------------------------------------------------------------------------- /accordion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "accordion", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.85", 11 | "@types/react": "^18.2.60", 12 | "@types/react-dom": "^18.2.19", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /accordion/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/accordion/public/favicon.ico -------------------------------------------------------------------------------- /accordion/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Accordion 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /accordion/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/accordion/public/logo192.png -------------------------------------------------------------------------------- /accordion/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/accordion/public/logo512.png -------------------------------------------------------------------------------- /accordion/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /accordion/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /accordion/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | body, 5 | html { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Montserrat", sans-serif; 9 | } 10 | 11 | /* App Component Styles */ 12 | .App { 13 | background-color: #000; 14 | color: #fff; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: center; 19 | position: fixed; 20 | top: 0; 21 | bottom: 0; 22 | width: 100%; 23 | } 24 | 25 | p { 26 | margin: 0; 27 | } 28 | 29 | /* Container Styles */ 30 | .container-flex { 31 | display: flex; 32 | flex-direction: column; 33 | gap: 1rem; 34 | width: 100%; 35 | max-width: 80rem; 36 | } 37 | 38 | /* Accordion Styles */ 39 | .accordion-header { 40 | background-color: #2b2b2b; 41 | padding: 1rem; 42 | cursor: pointer; 43 | } 44 | 45 | .accordion-body { 46 | max-height: 0; 47 | overflow: hidden; 48 | transition: max-height 0.3s ease; 49 | gap: 1rem; 50 | } 51 | 52 | .accordion-body-content { 53 | display: flex; 54 | flex-direction: column; 55 | padding: 1rem; 56 | } 57 | 58 | .accordion-toggle { 59 | display: none; 60 | } 61 | 62 | .accordion-toggle:checked+.accordion-body { 63 | max-height: 8rem; 64 | /* Adjust max-height to accommodate content and padding */ 65 | } -------------------------------------------------------------------------------- /accordion/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /accordion/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /accordion/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /accordion/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /accordion/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /accordion/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /accordion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /feature-flag/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /feature-flag/README.md: -------------------------------------------------------------------------------- 1 | # Feature Flag 2 | Example project how to use react context consumer as a feature flag. 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/7b46b746-e84b-4fe4-8ad7-5bf9eb7900a3 5 | 6 | -------------------------------------------------------------------------------- /feature-flag/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "feature-flag", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /feature-flag/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/feature-flag/public/favicon.ico -------------------------------------------------------------------------------- /feature-flag/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/feature-flag/public/logo192.png -------------------------------------------------------------------------------- /feature-flag/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/feature-flag/public/logo512.png -------------------------------------------------------------------------------- /feature-flag/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /feature-flag/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /feature-flag/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | body, 5 | html { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Montserrat", sans-serif; 9 | } 10 | 11 | button { 12 | font-family: "Montserrat", sans-serif; 13 | } 14 | 15 | /* App.css */ 16 | 17 | 18 | .container { 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | height: 100vh; 24 | background-color: #f5f5f5; 25 | } 26 | 27 | /* Feature Sections */ 28 | .feature-section { 29 | background-color: #fff; 30 | padding: 20px; 31 | border-radius: 8px; 32 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 33 | margin-bottom: 20px; 34 | width: 300px; 35 | display: flex; 36 | flex-direction: column; 37 | gap: 2rem; 38 | } 39 | 40 | .feature-section h2 { 41 | margin-top: 0; 42 | font-size: 20px; 43 | color: #333; 44 | } 45 | 46 | .feature-section p { 47 | margin-bottom: 0; 48 | color: #666; 49 | } 50 | 51 | /* Toggle Buttons */ 52 | .toggle-buttons { 53 | display: flex; 54 | justify-content: center; 55 | margin-top: 20px; 56 | } 57 | 58 | .toggle-buttons button { 59 | background-color: #007bff; 60 | color: #fff; 61 | border: none; 62 | padding: 10px 20px; 63 | margin: 0 10px; 64 | border-radius: 4px; 65 | cursor: pointer; 66 | font-size: 14px; 67 | transition: background-color 0.3s; 68 | } 69 | 70 | .toggle-buttons button:hover { 71 | background-color: #0056b3; 72 | } 73 | -------------------------------------------------------------------------------- /feature-flag/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /feature-flag/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { FeatureFlagContext, FeatureFlagProvider } from "./context"; 3 | 4 | function App() { 5 | return ( 6 | 7 | 8 | {({ isFeatureEnabled, toggleFeatureFlag }) => ( 9 |
10 |
11 | {isFeatureEnabled("feature-a") && ( 12 | // Render feature-b-enabled content 13 |
14 |

A Enabled Component

15 |

You enabled A

16 |
17 | )} 18 | 19 | {isFeatureEnabled("feature-b") && ( 20 | // Render feature-b-enabled content 21 |
22 |

B Enabled Component

23 |

You enabled B

24 |
25 | )} 26 | 27 | {isFeatureEnabled("feature-c") && ( 28 | // Render feature-b-enabled content 29 |
30 |

C Enabled Component

31 |

You enabled C

32 |
33 | )} 34 |
35 | 36 |
37 | 40 | 43 | 46 |
47 |
48 | )} 49 | 50 | 51 | ); 52 | } 53 | 54 | export default App; 55 | -------------------------------------------------------------------------------- /feature-flag/src/context.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState, ReactNode } from 'react'; 2 | 3 | interface FeatureFlags { 4 | [key: string]: boolean; 5 | } 6 | 7 | interface FeatureFlagContextValue { 8 | isFeatureEnabled: (featureName: string) => boolean; 9 | featureFlags: FeatureFlags; 10 | toggleFeatureFlag: (featureName: string) => void; 11 | } 12 | 13 | export const FeatureFlagContext = createContext({ 14 | isFeatureEnabled: () => false, 15 | featureFlags: {}, 16 | toggleFeatureFlag: () => {}, 17 | }); 18 | 19 | export const FeatureFlagProvider = ({ children }: { children: ReactNode }) => { 20 | const [featureFlags, setFeatureFlags] = useState({ 21 | 'feature-a': false, 22 | 'feature-b': false, 23 | 'feature-c': false, 24 | }); 25 | 26 | const isFeatureEnabled = (featureName: string): boolean => { 27 | return featureFlags[featureName] ?? false; 28 | }; 29 | 30 | const toggleFeatureFlag = (featureName: string): void => { 31 | setFeatureFlags((prevFlags) => ({ 32 | ...prevFlags, 33 | [featureName]: !prevFlags[featureName], 34 | })); 35 | }; 36 | 37 | return ( 38 | 39 | {children} 40 | 41 | ); 42 | }; 43 | -------------------------------------------------------------------------------- /feature-flag/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /feature-flag/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /feature-flag/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /feature-flag/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /feature-flag/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /feature-flag/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /github-profile-finder/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /github-profile-finder/README.md: -------------------------------------------------------------------------------- 1 | # Github Profile Finder 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/5ec832eb-4dce-4fc1-9797-be1ea6adc63d 5 | 6 | -------------------------------------------------------------------------------- /github-profile-finder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "github-profile-finder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /github-profile-finder/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/github-profile-finder/public/favicon.ico -------------------------------------------------------------------------------- /github-profile-finder/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/github-profile-finder/public/logo192.png -------------------------------------------------------------------------------- /github-profile-finder/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/github-profile-finder/public/logo512.png -------------------------------------------------------------------------------- /github-profile-finder/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /github-profile-finder/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /github-profile-finder/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | * { 5 | font-family: "Montserrat" !important; 6 | } 7 | 8 | .App { 9 | text-align: center; 10 | font-family: 'Arial', sans-serif; 11 | min-height: 100vh; 12 | } 13 | 14 | .App-header { 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: center; 19 | font-size: calc(12px + 2vmin); 20 | color: #333; 21 | border-radius: 10px; 22 | padding: 40px; 23 | } 24 | 25 | .App-link { 26 | color: #007bff; 27 | text-decoration: none; 28 | margin-top: 20px; 29 | padding: 10px 20px; 30 | border: 1px solid #007bff; 31 | border-radius: 5px; 32 | transition: background-color 0.3s, color 0.3s; 33 | margin-bottom: 3rem; 34 | } 35 | 36 | .App-link:hover { 37 | background-color: #007bff; 38 | color: #ffffff; 39 | } 40 | 41 | input[type="text"] { 42 | padding: 10px; 43 | margin: 10px 0; 44 | border: 1px solid #ccc; 45 | border-radius: 5px; 46 | font-size: 1rem; 47 | width: 80%; 48 | max-width: 400px; 49 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 50 | transition: border-color 0.3s, box-shadow 0.3s; 51 | } 52 | 53 | input[type="text"]:focus { 54 | border-color: #007bff; 55 | box-shadow: 0 0 8px rgba(0, 123, 255, 0.25); 56 | outline: none; 57 | } 58 | 59 | .user-info { 60 | max-width: 30rem; 61 | } 62 | 63 | .user-info img { 64 | max-width: 20rem; 65 | border-radius: 100%; 66 | } 67 | 68 | .user-info p { 69 | font-size: 1rem; 70 | } 71 | 72 | .user-info a { 73 | font-size: 1rem; 74 | } -------------------------------------------------------------------------------- /github-profile-finder/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /github-profile-finder/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /github-profile-finder/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /github-profile-finder/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /github-profile-finder/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /github-profile-finder/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /github-profile-finder/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /image-slider/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /image-slider/README.md: -------------------------------------------------------------------------------- 1 | # Image Slider 2 | Sometimes some people feel so hard to make slider from scratch 3 | 4 | 5 | https://github.com/shinobi8894/react-tutorial/assets/56811611/e9f0e606-8fd8-4a03-9196-6021d9d9fb08 6 | 7 | -------------------------------------------------------------------------------- /image-slider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "image-slider", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.86", 11 | "@types/react": "^18.2.61", 12 | "@types/react-dom": "^18.2.19", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /image-slider/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/image-slider/public/favicon.ico -------------------------------------------------------------------------------- /image-slider/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Image Slider 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /image-slider/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/image-slider/public/logo192.png -------------------------------------------------------------------------------- /image-slider/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/image-slider/public/logo512.png -------------------------------------------------------------------------------- /image-slider/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /image-slider/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /image-slider/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /image-slider/src/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/image-slider/src/assets/1.jpg -------------------------------------------------------------------------------- /image-slider/src/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/image-slider/src/assets/2.jpg -------------------------------------------------------------------------------- /image-slider/src/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/image-slider/src/assets/3.jpg -------------------------------------------------------------------------------- /image-slider/src/constants/img.constant.ts: -------------------------------------------------------------------------------- 1 | import IMG1 from '../assets/1.jpg'; 2 | import IMG2 from '../assets/2.jpg'; 3 | import IMG3 from '../assets/3.jpg'; 4 | 5 | export default { 6 | IMG1, 7 | IMG2, 8 | IMG3 9 | } -------------------------------------------------------------------------------- /image-slider/src/constants/index.ts: -------------------------------------------------------------------------------- 1 | import imgConstant from "./img.constant"; 2 | 3 | export default { 4 | imgConstant 5 | } -------------------------------------------------------------------------------- /image-slider/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /image-slider/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /image-slider/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /image-slider/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /image-slider/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /image-slider/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /load-more-button/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /load-more-button/README.md: -------------------------------------------------------------------------------- 1 | # Load More Button 2 | Make load more button with API 3 | 4 | 5 | https://github.com/shinobi8894/react-tutorial/assets/56811611/ded814dc-80cd-4d51-94a9-fce74f52b824 6 | 7 | -------------------------------------------------------------------------------- /load-more-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "load-more-button", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.86", 11 | "@types/react": "^18.2.63", 12 | "@types/react-dom": "^18.2.19", 13 | "axios": "^1.6.7", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-scripts": "5.0.1", 17 | "typescript": "^4.9.5", 18 | "web-vitals": "^2.1.4" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /load-more-button/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/load-more-button/public/favicon.ico -------------------------------------------------------------------------------- /load-more-button/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/load-more-button/public/logo192.png -------------------------------------------------------------------------------- /load-more-button/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/load-more-button/public/logo512.png -------------------------------------------------------------------------------- /load-more-button/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /load-more-button/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /load-more-button/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | body, 5 | html { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Montserrat", sans-serif; 9 | width: 100%; 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | /* App Component Styles */ 17 | .App { 18 | background: black; 19 | color: #fff; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | width: 100%; 25 | min-height: 100vh; 26 | } 27 | 28 | .list { 29 | display: flex; 30 | flex-direction: column; 31 | gap: 1rem; 32 | margin-bottom: 3rem; 33 | } 34 | 35 | button { 36 | height: 3.5rem; 37 | font-family: "Montserrat", sans-serif; 38 | cursor: pointer; 39 | background-color: #2b2b2b; 40 | color: white; 41 | border: none; 42 | border-radius: 3rem; 43 | width: 100%; 44 | max-width: 8rem; 45 | } -------------------------------------------------------------------------------- /load-more-button/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /load-more-button/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState, useCallback } from 'react'; 2 | import './App.css'; 3 | import axios from 'axios'; 4 | 5 | interface Post { 6 | id: number; 7 | title: string; 8 | } 9 | 10 | function App() { 11 | const [posts, setPosts] = useState([]); 12 | const [page, setPage] = useState(1); 13 | 14 | const fetchPosts = useCallback(async () => { 15 | try { 16 | const response = await axios.get(`https://jsonplaceholder.typicode.com/posts`, { 17 | params: { _page: page, _limit: 5 }, 18 | }); 19 | setPosts(prevPosts => [...prevPosts, ...response.data]); 20 | } catch (error) { 21 | console.error('Error fetching data: ', error); 22 | } 23 | }, [page]); 24 | 25 | useEffect(() => { 26 | fetchPosts(); 27 | }, [fetchPosts]); 28 | 29 | const handleLoadMore = useCallback(() => { 30 | setPage(prevPage => prevPage + 1); 31 | }, []); 32 | 33 | const renderPosts = () => posts.map(post =>
{post.title}
); 34 | 35 | return ( 36 |
37 |

React Tutorial 5 - Load More Button

38 |
{renderPosts()}
39 | 40 |
41 | ); 42 | } 43 | 44 | export default App; 45 | -------------------------------------------------------------------------------- /load-more-button/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /load-more-button/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /load-more-button/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /load-more-button/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /load-more-button/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /load-more-button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /menu-ui/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /menu-ui/README.md: -------------------------------------------------------------------------------- 1 | # Menu UI 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/ddf79663-6349-4deb-95f1-bffd3c90d4f0 5 | 6 | -------------------------------------------------------------------------------- /menu-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "menu-ui", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.86", 11 | "@types/react": "^18.2.63", 12 | "@types/react-dom": "^18.2.19", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /menu-ui/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/menu-ui/public/favicon.ico -------------------------------------------------------------------------------- /menu-ui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Tree Menu UI 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /menu-ui/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/menu-ui/public/logo192.png -------------------------------------------------------------------------------- /menu-ui/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/menu-ui/public/logo512.png -------------------------------------------------------------------------------- /menu-ui/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /menu-ui/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /menu-ui/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | body, 5 | html { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Montserrat", sans-serif; 9 | width: 100%; 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | /* App Component Styles */ 17 | .App { 18 | background: black; 19 | color: #fff; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | width: 100%; 25 | min-height: 100vh; 26 | } -------------------------------------------------------------------------------- /menu-ui/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /menu-ui/src/App.tsx: -------------------------------------------------------------------------------- 1 | import TreeMenu from './TreeMenu'; 2 | import './App.css'; 3 | 4 | const treeData = [ 5 | { 6 | id: 1, 7 | name: 'Item 1', 8 | children: [ 9 | { 10 | id: 2, 11 | name: 'Item 1.1', 12 | }, 13 | { 14 | id: 3, 15 | name: 'Item 1.2', 16 | children: [ 17 | { 18 | id: 4, 19 | name: 'Item 1.2.1', 20 | }, 21 | ], 22 | }, 23 | ], 24 | }, 25 | ]; 26 | 27 | const App = () => { 28 | return ; 29 | }; 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /menu-ui/src/TreeMenu.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | interface TreeItem { 4 | id: number; 5 | name: string; 6 | children?: TreeItem[]; 7 | } 8 | 9 | interface TreeMenuProps { 10 | data: TreeItem[]; 11 | } 12 | 13 | const TreeMenu: React.FC = ({ data }) => { 14 | const [expandedItems, setExpandedItems] = useState([]); 15 | 16 | const toggleItem = (itemId: number) => { 17 | if (expandedItems.includes(itemId)) { 18 | setExpandedItems(expandedItems.filter((id) => id !== itemId)); 19 | } else { 20 | setExpandedItems([...expandedItems, itemId]); 21 | } 22 | }; 23 | 24 | const renderTree = (items: TreeItem[]) => { 25 | return items.map((item) => ( 26 |
27 |
toggleItem(item.id)} 30 | > 31 | {item.name} 32 |
33 | {expandedItems.includes(item.id) && item.children && ( 34 |
35 | {renderTree(item.children)} 36 |
37 | )} 38 |
39 | )); 40 | }; 41 | 42 | return
{renderTree(data)}
; 43 | }; 44 | 45 | export default TreeMenu; 46 | -------------------------------------------------------------------------------- /menu-ui/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /menu-ui/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /menu-ui/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /menu-ui/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /menu-ui/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /menu-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /modal-popup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /modal-popup/README.md: -------------------------------------------------------------------------------- 1 | # Modal Popup 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/6661c1e8-b328-450a-a0e6-65a6e5c85092 5 | 6 | -------------------------------------------------------------------------------- /modal-popup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modal-popup", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /modal-popup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/modal-popup/public/favicon.ico -------------------------------------------------------------------------------- /modal-popup/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Modal Popup 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /modal-popup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/modal-popup/public/logo192.png -------------------------------------------------------------------------------- /modal-popup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/modal-popup/public/logo512.png -------------------------------------------------------------------------------- /modal-popup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /modal-popup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /modal-popup/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Custom styles */ 4 | * { 5 | font-family: "Montserrat"; 6 | } 7 | 8 | .App { 9 | text-align: center; 10 | } 11 | 12 | .App-logo { 13 | height: 40vmin; 14 | pointer-events: none; 15 | } 16 | 17 | @media (prefers-reduced-motion: no-preference) { 18 | .App-logo { 19 | animation: App-logo-spin infinite 20s linear; 20 | } 21 | } 22 | 23 | .App-header { 24 | background-color: #282c34; 25 | min-height: 100vh; 26 | display: flex; 27 | flex-direction: column; 28 | align-items: center; 29 | justify-content: center; 30 | font-size: calc(10px + 2vmin); 31 | color: white; 32 | } 33 | 34 | .App-link { 35 | color: #61dafb; 36 | } 37 | 38 | .modal { 39 | position: fixed; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background-color: rgba(0, 0, 0, 0.5); 45 | display: flex; 46 | align-items: center; 47 | justify-content: center; 48 | z-index: 1000; 49 | } 50 | 51 | .modal-content { 52 | background-color: white; 53 | padding: 20px; 54 | border-radius: 5px; 55 | width: 50%; 56 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 57 | color: black; 58 | } 59 | 60 | .close { 61 | float: right; 62 | font-size: 28px; 63 | font-weight: bold; 64 | cursor: pointer; 65 | } 66 | 67 | @keyframes App-logo-spin { 68 | from { 69 | transform: rotate(0deg); 70 | } 71 | to { 72 | transform: rotate(360deg); 73 | } 74 | } 75 | 76 | @keyframes fadeIn { 77 | 0% { 78 | opacity: 0; 79 | display: none; 80 | } 81 | 1% { 82 | display: flex; 83 | opacity: 0; 84 | } 85 | 100% { 86 | opacity: 1; 87 | } 88 | } 89 | 90 | @keyframes fadeOut { 91 | from { 92 | opacity: 1; 93 | } 94 | to { 95 | opacity: 0; 96 | display: none; 97 | } 98 | } -------------------------------------------------------------------------------- /modal-popup/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /modal-popup/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | const [isModalOpen, setModalOpen] = useState(false); 7 | const [animation, setAnimation] = useState(''); 8 | 9 | const openModal = () => { 10 | setAnimation('fadeIn 0.5s'); 11 | setModalOpen(true); 12 | }; 13 | 14 | const closeModal = () => { 15 | setAnimation('fadeOut 0.5s'); 16 | setTimeout(() => { 17 | setModalOpen(false); 18 | }, 500); // This timeout duration should match the fadeOut animation duration 19 | }; 20 | 21 | return ( 22 |
23 |
24 | logo 25 |

26 | Click below to open the modal popup. 27 |

28 | 31 | {isModalOpen && ( 32 |
33 |
34 | × 35 |

Welcome to the React modal popup!

36 | 41 | Learn more about React 42 | 43 |
44 |
45 | )} 46 |
47 |
48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /modal-popup/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /modal-popup/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /modal-popup/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /modal-popup/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /modal-popup/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /modal-popup/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /qr-code-generator/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /qr-code-generator/README.md: -------------------------------------------------------------------------------- 1 | # QR Code Generator 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/f99a00bf-d67e-4867-9378-6c4c7464764c 5 | 6 | -------------------------------------------------------------------------------- /qr-code-generator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qr-code-generator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /qr-code-generator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/qr-code-generator/public/favicon.ico -------------------------------------------------------------------------------- /qr-code-generator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/qr-code-generator/public/logo192.png -------------------------------------------------------------------------------- /qr-code-generator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/qr-code-generator/public/logo512.png -------------------------------------------------------------------------------- /qr-code-generator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /qr-code-generator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /qr-code-generator/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | 4 | /* Custom styles */ 5 | * { 6 | font-family: "Montserrat"; 7 | } 8 | 9 | html body { 10 | margin: 0 !important; 11 | padding: 0 !important; 12 | } 13 | 14 | .App { 15 | background-color: #0f0f0f; 16 | width: 100%; 17 | height: 100vh; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | .App h1 { 24 | color: white; 25 | font-family: "Montserrat"; 26 | font-size: 2rem; 27 | font-weight: bold; 28 | margin-bottom: 3rem; 29 | } 30 | 31 | .App input { 32 | height: 3rem; 33 | text-indent: 1rem; 34 | border: none; 35 | outline: none; 36 | border-radius: .5rem; 37 | } 38 | 39 | .App button { 40 | height: 3rem; 41 | border-radius: .5rem; 42 | border: none; 43 | cursor: pointer; 44 | background-color: #575757; 45 | color: white; 46 | transition: all .3s; 47 | } 48 | 49 | .App button:hover { 50 | background-color: #7c7575; 51 | } 52 | 53 | .App header { 54 | display: flex; 55 | flex-direction: column; 56 | gap: .5rem; 57 | } 58 | -------------------------------------------------------------------------------- /qr-code-generator/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /qr-code-generator/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './App.css'; 3 | import './reset.css'; 4 | 5 | function App() { 6 | const [inputText, setInputText] = useState(''); 7 | const [qrCode, setQrCode] = useState(''); 8 | 9 | const generateQRCode = () => { 10 | const base64QR = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(inputText)}`; 11 | setQrCode(base64QR); 12 | }; 13 | 14 | const handleInputChange = (event: React.ChangeEvent) => { 15 | setInputText(event.target.value); 16 | }; 17 | 18 | return ( 19 |
20 |
21 |

QR Code Generator

22 | 28 | 29 | {qrCode && Generated QR Code} 30 |
31 |
32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /qr-code-generator/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /qr-code-generator/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /qr-code-generator/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /qr-code-generator/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /qr-code-generator/src/reset.css: -------------------------------------------------------------------------------- 1 | 2 | /* Reset CSS */ 3 | html, body, div, span, applet, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5 | a, abbr, acronym, address, big, cite, code, 6 | del, dfn, em, img, ins, kbd, q, s, samp, 7 | small, strike, strong, sub, sup, tt, var, 8 | b, u, i, center, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td, 12 | article, aside, canvas, details, embed, 13 | figure, figcaption, footer, header, hgroup, 14 | menu, nav, output, ruby, section, summary, 15 | time, mark, audio, video { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | font-size: 100%; 20 | font: inherit; 21 | vertical-align: baseline; 22 | } 23 | 24 | /* HTML5 display-role reset for older browsers */ 25 | article, aside, details, figcaption, figure, 26 | footer, header, hgroup, menu, nav, section { 27 | display: block; 28 | } 29 | 30 | body { 31 | line-height: 1; 32 | } 33 | 34 | ol, ul { 35 | list-style: none; 36 | } 37 | 38 | blockquote, q { 39 | quotes: none; 40 | } 41 | 42 | blockquote:before, blockquote:after, 43 | q:before, q:after { 44 | content: ''; 45 | content: none; 46 | } 47 | 48 | table { 49 | border-collapse: collapse; 50 | border-spacing: 0; 51 | } -------------------------------------------------------------------------------- /qr-code-generator/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /qr-code-generator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /random-color-generator/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /random-color-generator/README.md: -------------------------------------------------------------------------------- 1 | # Random Color Generator 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/dd69cf46-f04c-442c-b945-48c3858eb6e5 5 | 6 | -------------------------------------------------------------------------------- /random-color-generator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "random-color-generator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.86", 11 | "@types/react": "^18.2.61", 12 | "@types/react-dom": "^18.2.19", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /random-color-generator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/random-color-generator/public/favicon.ico -------------------------------------------------------------------------------- /random-color-generator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/random-color-generator/public/logo192.png -------------------------------------------------------------------------------- /random-color-generator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/random-color-generator/public/logo512.png -------------------------------------------------------------------------------- /random-color-generator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /random-color-generator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /random-color-generator/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | :root { 4 | --color-1: #ff758c; 5 | --color-2: #ff7eb3; 6 | } 7 | 8 | /* Base Styles */ 9 | body, 10 | html { 11 | margin: 0; 12 | padding: 0; 13 | font-family: "Montserrat", sans-serif; 14 | } 15 | 16 | /* App Component Styles */ 17 | .App { 18 | background: linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 19 | color: #fff; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | position: fixed; 25 | top: 0; 26 | bottom: 0; 27 | width: 100%; 28 | } -------------------------------------------------------------------------------- /random-color-generator/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /random-color-generator/src/App.tsx: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | 3 | function App() { 4 | 5 | // Function to generate a new random color 6 | const generateRandomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16); 7 | 8 | /** 9 | * This function `applyColors` is responsible for applying the given colors to the application's root CSS variables. 10 | * It updates the application's color theme in real-time by setting the style properties for `--color-1` and `--color-2`. 11 | */ 12 | const applyColors = (color1: string, color2: string) => { 13 | document.documentElement.style.setProperty('--color-1', color1); 14 | document.documentElement.style.setProperty('--color-2', color2); 15 | }; 16 | 17 | /** 18 | * This function `changeColors` is responsible for changing the colors of the application's background dynamically. 19 | * It generates two new random colors and then applies these colors using the `applyColors` function. 20 | */ 21 | const changeColors = () => { 22 | const newColor1 = generateRandomColor(); 23 | const newColor2 = generateRandomColor(); 24 | applyColors(newColor1, newColor2); 25 | }; 26 | 27 | return ( 28 |
29 |

React Tutorial Project 2 - Random color generator

30 |

Click background to generate new color

31 |
32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /random-color-generator/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /random-color-generator/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /random-color-generator/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /random-color-generator/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /random-color-generator/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /random-color-generator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /scroll-indicator/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /scroll-indicator/README.md: -------------------------------------------------------------------------------- 1 | # Scroll Indicator 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/aaa7b802-f202-48c9-b831-df4f55f28af7 5 | 6 | -------------------------------------------------------------------------------- /scroll-indicator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scroll-indicator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /scroll-indicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-indicator/public/favicon.ico -------------------------------------------------------------------------------- /scroll-indicator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-indicator/public/logo192.png -------------------------------------------------------------------------------- /scroll-indicator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-indicator/public/logo512.png -------------------------------------------------------------------------------- /scroll-indicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /scroll-indicator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /scroll-indicator/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | 4 | /* Custom styles */ 5 | * { 6 | font-family: "Montserrat" !important; 7 | } 8 | 9 | /* Scroll Indicator Styles */ 10 | .scroll-indicator { 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | height: 5px; 15 | background-color: #7048ff; /* Using the same color as .App-link for consistency */ 16 | } 17 | 18 | 19 | .App { 20 | background-color: #0f0f0f; 21 | color: white; 22 | min-height: 100vh; 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | justify-content: center; 27 | gap: 3rem; 28 | padding: 3rem; 29 | } 30 | 31 | .App p { 32 | max-width: 40rem; 33 | font-size: 1.2rem; /* Increased font size for better readability */ 34 | line-height: 1.6; /* Increased line height for better readability */ 35 | } 36 | 37 | .App h1 { 38 | font-size: 3rem; 39 | font-weight: bold; 40 | } -------------------------------------------------------------------------------- /scroll-indicator/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /scroll-indicator/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /scroll-indicator/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /scroll-indicator/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /scroll-indicator/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /scroll-indicator/src/reset.css: -------------------------------------------------------------------------------- 1 | 2 | /* Reset CSS */ 3 | html, body, div, span, applet, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5 | a, abbr, acronym, address, big, cite, code, 6 | del, dfn, em, img, ins, kbd, q, s, samp, 7 | small, strike, strong, sub, sup, tt, var, 8 | b, u, i, center, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td, 12 | article, aside, canvas, details, embed, 13 | figure, figcaption, footer, header, hgroup, 14 | menu, nav, output, ruby, section, summary, 15 | time, mark, audio, video { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | font-size: 100%; 20 | font: inherit; 21 | vertical-align: baseline; 22 | } 23 | 24 | /* HTML5 display-role reset for older browsers */ 25 | article, aside, details, figcaption, figure, 26 | footer, header, hgroup, menu, nav, section { 27 | display: block; 28 | } 29 | 30 | body { 31 | line-height: 1; 32 | } 33 | 34 | ol, ul { 35 | list-style: none; 36 | } 37 | 38 | blockquote, q { 39 | quotes: none; 40 | } 41 | 42 | blockquote:before, blockquote:after, 43 | q:before, q:after { 44 | content: ''; 45 | content: none; 46 | } 47 | 48 | table { 49 | border-collapse: collapse; 50 | border-spacing: 0; 51 | } -------------------------------------------------------------------------------- /scroll-indicator/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /scroll-indicator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /scroll-particular-section/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /scroll-particular-section/README.md: -------------------------------------------------------------------------------- 1 | # Scroll Particular Section 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/07e7ae84-33f8-45d9-8edb-467b2b6de41a 5 | 6 | -------------------------------------------------------------------------------- /scroll-particular-section/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scroll-particular-section", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.100", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /scroll-particular-section/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-particular-section/public/favicon.ico -------------------------------------------------------------------------------- /scroll-particular-section/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-particular-section/public/logo192.png -------------------------------------------------------------------------------- /scroll-particular-section/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-particular-section/public/logo512.png -------------------------------------------------------------------------------- /scroll-particular-section/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /scroll-particular-section/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /scroll-particular-section/src/App.css: -------------------------------------------------------------------------------- 1 | /* General Styles */ 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 3 | 4 | 5 | /* Custom styles */ 6 | * { 7 | font-family: "Montserrat" !important; 8 | } 9 | 10 | body { 11 | font-family: Arial, sans-serif; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | /* App Styles */ 17 | .App { 18 | text-align: center; 19 | background-color: #282c34; 20 | min-height: 100vh; 21 | display: flex; 22 | flex-direction: column; 23 | align-items: center; 24 | justify-content: center; 25 | } 26 | 27 | /* App Header Styles */ 28 | .App-header { 29 | color: white; 30 | padding: 2rem; 31 | max-width: 50rem; 32 | } 33 | 34 | .App-logo { 35 | height: 10vmin; 36 | pointer-events: none; 37 | } 38 | 39 | .App-link { 40 | color: #61dafb; 41 | text-decoration: none; 42 | margin-top: 1.5rem; 43 | } 44 | 45 | .App-link:hover { 46 | color: #82deff; 47 | } 48 | 49 | /* Section Styles */ 50 | section { 51 | padding: 2rem; 52 | } 53 | 54 | section h2 { 55 | margin-bottom: 1rem; 56 | } 57 | 58 | p { 59 | line-height: 1.6; 60 | font-size: .8rem; 61 | } 62 | 63 | section button { 64 | background-color: #61dafb; 65 | border: none; 66 | color: white; 67 | padding: 0.75rem 1.5rem; 68 | text-align: center; 69 | text-decoration: none; 70 | display: inline-block; 71 | font-size: 1rem; 72 | margin-top: 1.5rem; 73 | cursor: pointer; 74 | border-radius: 4px; 75 | transition: background-color 0.3s ease; 76 | } 77 | 78 | section button:hover { 79 | background-color: #82deff; 80 | } 81 | -------------------------------------------------------------------------------- /scroll-particular-section/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /scroll-particular-section/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /scroll-particular-section/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /scroll-particular-section/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /scroll-particular-section/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /scroll-particular-section/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /scroll-particular-section/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/README.md: -------------------------------------------------------------------------------- 1 | # Scroll To Top Bottom 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/bc58ea9a-670a-4efb-98d0-a55e2b33f899 5 | 6 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scroll-to-top-bottom", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.100", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-to-top-bottom/public/favicon.ico -------------------------------------------------------------------------------- /scroll-to-top-bottom/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-to-top-bottom/public/logo192.png -------------------------------------------------------------------------------- /scroll-to-top-bottom/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/scroll-to-top-bottom/public/logo512.png -------------------------------------------------------------------------------- /scroll-to-top-bottom/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /scroll-to-top-bottom/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /search-autocomplete/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /search-autocomplete/README.md: -------------------------------------------------------------------------------- 1 | # React Tutorial 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/59689a45-2a81-4a2f-9f33-c9c26340fe08 5 | 6 | -------------------------------------------------------------------------------- /search-autocomplete/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "search-autocomplete", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /search-autocomplete/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/search-autocomplete/public/favicon.ico -------------------------------------------------------------------------------- /search-autocomplete/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/search-autocomplete/public/logo192.png -------------------------------------------------------------------------------- /search-autocomplete/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/search-autocomplete/public/logo512.png -------------------------------------------------------------------------------- /search-autocomplete/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /search-autocomplete/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /search-autocomplete/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | 4 | /* Custom styles */ 5 | * { 6 | font-family: "Montserrat" !important; 7 | box-sizing: border-box; 8 | } 9 | 10 | .App { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | background-color: #f7f7f7; 16 | } 17 | 18 | .App-header { 19 | background: white; 20 | border-radius: 8px; 21 | box-shadow: 0 4px 6px rgba(0,0,0,0.1); 22 | display: flex; 23 | flex-direction: column; 24 | width: 100%; 25 | max-width: 40rem; 26 | padding: 10px; 27 | } 28 | 29 | input[type="text"] { 30 | padding: 10px; 31 | border: 1px solid #ccc; 32 | border-radius: 5px; 33 | font-size: 1rem; 34 | width: 100%; 35 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 36 | transition: border-color 0.3s, box-shadow 0.3s; 37 | } 38 | 39 | input[type="text"]:focus { 40 | border-color: #007bff; 41 | box-shadow: 0 0 8px rgba(0, 123, 255, 0.25); 42 | outline: none; 43 | } 44 | 45 | ul { 46 | list-style: none; 47 | padding: 0; 48 | margin: 0; 49 | } 50 | 51 | li { 52 | padding: 10px; 53 | border-bottom: 1px solid #ccc; 54 | cursor: pointer; 55 | } 56 | 57 | li:hover { 58 | background-color: #f0f0f0; 59 | } 60 | 61 | li:last-child { 62 | border-bottom: none; 63 | } 64 | -------------------------------------------------------------------------------- /search-autocomplete/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /search-autocomplete/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, ChangeEvent } from 'react'; 2 | import './App.css'; 3 | 4 | const mockSuggestions: string[] = [ 5 | 'apple', 6 | 'banana', 7 | 'cherry', 8 | 'date', 9 | 'elderberry', 10 | 'fig', 11 | 'grape', 12 | 'honeydew', 13 | ]; 14 | 15 | function App() { 16 | const [searchTerm, setSearchTerm] = useState(''); 17 | const [suggestions, setSuggestions] = useState([]); 18 | 19 | const handleSearch = (term: string) => { 20 | setSearchTerm(term); 21 | if (term) { 22 | const filteredSuggestions = mockSuggestions.filter(suggestion => 23 | suggestion.toLowerCase().includes(term.toLowerCase()) 24 | ); 25 | setSuggestions(filteredSuggestions); 26 | } else { 27 | setSuggestions([]); 28 | } 29 | }; 30 | 31 | return ( 32 |
33 |
34 | ) => handleSearch(e.target.value)} 38 | placeholder="Search..." 39 | /> 40 |
    41 | {suggestions.map((suggestion, index) => ( 42 |
  • setSearchTerm(suggestion)}> 43 | {suggestion} 44 |
    • 45 | ))} 46 |
47 |
48 |
49 | ); 50 | } 51 | 52 | export default App; 53 | -------------------------------------------------------------------------------- /search-autocomplete/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /search-autocomplete/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /search-autocomplete/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /search-autocomplete/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /search-autocomplete/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /search-autocomplete/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /star-rating/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /star-rating/README.md: -------------------------------------------------------------------------------- 1 | # Star Rating 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/7be67249-eaa9-48a8-a37f-3569df081e5a 5 | 6 | -------------------------------------------------------------------------------- /star-rating/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "star-rating", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.86", 11 | "@types/react": "^18.2.61", 12 | "@types/react-dom": "^18.2.19", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /star-rating/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/star-rating/public/favicon.ico -------------------------------------------------------------------------------- /star-rating/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Star Rating 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /star-rating/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/star-rating/public/logo192.png -------------------------------------------------------------------------------- /star-rating/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/star-rating/public/logo512.png -------------------------------------------------------------------------------- /star-rating/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /star-rating/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /star-rating/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | body, 5 | html { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Montserrat", sans-serif; 9 | } 10 | 11 | /* App Component Styles */ 12 | .App { 13 | background: black; 14 | color: #fff; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: center; 19 | position: fixed; 20 | top: 0; 21 | bottom: 0; 22 | width: 100%; 23 | } 24 | 25 | .stars { 26 | display: flex; 27 | gap: 1rem; 28 | } 29 | 30 | span { 31 | font-size: 2rem !important; 32 | } -------------------------------------------------------------------------------- /star-rating/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /star-rating/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import './App.css'; 3 | 4 | function App() { 5 | 6 | const [rating, setRating] = useState(0); 7 | 8 | const handleStarClick = (selectedRating: number) => { 9 | setRating(selectedRating); 10 | }; 11 | 12 | return ( 13 |
14 |

React Tutorial Project 3 - Star Rating

15 |
16 | { 17 | [1, 2, 3, 4, 5].map((star) => { 18 | return ( 19 | handleStarClick(star)} 23 | > 24 | {star <= rating ? '★' : '☆'} 25 | 26 | ) 27 | }) 28 | } 29 |
30 |

Current Rating: {rating}

31 |
32 | ); 33 | } 34 | 35 | export default App; 36 | 37 | -------------------------------------------------------------------------------- /star-rating/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /star-rating/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /star-rating/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /star-rating/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /star-rating/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /star-rating/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /tabs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /tabs/README.md: -------------------------------------------------------------------------------- 1 | # React Tab 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/49142df0-154e-4dca-bf32-56a9d33d142a 5 | 6 | -------------------------------------------------------------------------------- /tabs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tabs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /tabs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/tabs/public/favicon.ico -------------------------------------------------------------------------------- /tabs/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React Tabs 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /tabs/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/tabs/public/logo192.png -------------------------------------------------------------------------------- /tabs/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/tabs/public/logo512.png -------------------------------------------------------------------------------- /tabs/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /tabs/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /tabs/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | 4 | /* Custom styles */ 5 | * { 6 | font-family: "Montserrat" !important; 7 | } 8 | 9 | 10 | .App { 11 | text-align: center; 12 | background-color: #0f0f0f; 13 | color: white; 14 | height: 100vh; 15 | padding: 3rem; 16 | } 17 | 18 | 19 | .App h1 { 20 | font-size: 3rem; 21 | font-weight: bold; 22 | margin-bottom: 3rem; 23 | } 24 | 25 | .App button { 26 | background-color: #6e6e6e; 27 | border: none; 28 | height: 3rem; 29 | color: white; 30 | } 31 | 32 | .App .tab-list .active { 33 | background-color: #a8a8a8; 34 | } 35 | 36 | .App .tab-list { 37 | margin-bottom: 2rem; 38 | } -------------------------------------------------------------------------------- /tabs/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /tabs/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import "./App.css"; 3 | import "./reset.css"; 4 | 5 | type Tab = "home" | "about" | "contact"; 6 | 7 | function App() { 8 | const [activeTab, setActiveTab] = useState("home"); 9 | 10 | const handleTabClick = (tab: Tab) => { 11 | setActiveTab(tab); 12 | }; 13 | 14 | return ( 15 |
16 |

React Tabs

17 |
18 | 24 | 30 | 36 |
37 |
38 | {activeTab === "home" && ( 39 |
40 |

Home

41 |

This is the home section.

42 |
43 | )} 44 | {activeTab === "about" && ( 45 |
46 |

About

47 |

This is the about section.

48 |
49 | )} 50 | {activeTab === "contact" && ( 51 |
52 |

Contact

53 |

This is the contact section.

54 |
55 | )} 56 |
57 |
58 | ); 59 | } 60 | 61 | export default App; 62 | -------------------------------------------------------------------------------- /tabs/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /tabs/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /tabs/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tabs/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /tabs/src/reset.css: -------------------------------------------------------------------------------- 1 | 2 | /* Reset CSS */ 3 | html, body, div, span, applet, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5 | a, abbr, acronym, address, big, cite, code, 6 | del, dfn, em, img, ins, kbd, q, s, samp, 7 | small, strike, strong, sub, sup, tt, var, 8 | b, u, i, center, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td, 12 | article, aside, canvas, details, embed, 13 | figure, figcaption, footer, header, hgroup, 14 | menu, nav, output, ruby, section, summary, 15 | time, mark, audio, video { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | font-size: 100%; 20 | font: inherit; 21 | vertical-align: baseline; 22 | } 23 | 24 | /* HTML5 display-role reset for older browsers */ 25 | article, aside, details, figcaption, figure, 26 | footer, header, hgroup, menu, nav, section { 27 | display: block; 28 | } 29 | 30 | body { 31 | line-height: 1; 32 | } 33 | 34 | ol, ul { 35 | list-style: none; 36 | } 37 | 38 | blockquote, q { 39 | quotes: none; 40 | } 41 | 42 | blockquote:before, blockquote:after, 43 | q:before, q:after { 44 | content: ''; 45 | content: none; 46 | } 47 | 48 | table { 49 | border-collapse: collapse; 50 | border-spacing: 0; 51 | } -------------------------------------------------------------------------------- /tabs/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /theme-switcher/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /theme-switcher/README.md: -------------------------------------------------------------------------------- 1 | # Theme Switcher 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/7afbbca6-bab9-411d-b56d-9a757a90dc91 5 | 6 | -------------------------------------------------------------------------------- /theme-switcher/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "theme-switcher", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /theme-switcher/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/theme-switcher/public/favicon.ico -------------------------------------------------------------------------------- /theme-switcher/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/theme-switcher/public/logo192.png -------------------------------------------------------------------------------- /theme-switcher/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/theme-switcher/public/logo512.png -------------------------------------------------------------------------------- /theme-switcher/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /theme-switcher/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /theme-switcher/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | 4 | /* Custom styles */ 5 | * { 6 | font-family: "Montserrat"; 7 | } 8 | 9 | .App { 10 | text-align: center; 11 | } 12 | 13 | .App a { 14 | margin-bottom: 3rem; 15 | } 16 | 17 | .App button { 18 | height: 3rem; 19 | border-radius: .5rem; 20 | border: none; 21 | } 22 | 23 | .App-logo { 24 | height: 40vmin; 25 | pointer-events: none; 26 | } 27 | 28 | @media (prefers-reduced-motion: no-preference) { 29 | .App-logo { 30 | animation: App-logo-spin infinite 20s linear; 31 | } 32 | } 33 | 34 | .App-header { 35 | min-height: 100vh; 36 | display: flex; 37 | flex-direction: column; 38 | align-items: center; 39 | justify-content: center; 40 | font-size: calc(10px + 2vmin); 41 | color: white; 42 | } 43 | 44 | .App.light .App-header { 45 | background-color: #fff; 46 | color: #282c34; 47 | } 48 | 49 | .App.dark .App-header { 50 | background-color: #282c34; 51 | color: white; 52 | } 53 | 54 | .App-link { 55 | color: #61dafb; 56 | } 57 | 58 | .App.light .App-link { 59 | color: #282c34; 60 | } 61 | 62 | .App.dark .App-link { 63 | color: #61dafb; 64 | } 65 | 66 | @keyframes App-logo-spin { 67 | from { 68 | transform: rotate(0deg); 69 | } 70 | to { 71 | transform: rotate(360deg); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /theme-switcher/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /theme-switcher/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | const [theme, setTheme] = useState('light'); 7 | 8 | const toggleTheme = () => { 9 | setTheme(theme === 'light' ? 'dark' : 'light'); 10 | }; 11 | 12 | return ( 13 |
14 |
15 | logo 16 |

17 | Edit src/App.tsx and save to reload. 18 |

19 | 25 | Learn React 26 | 27 | 30 |
31 |
32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /theme-switcher/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /theme-switcher/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /theme-switcher/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /theme-switcher/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /theme-switcher/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /theme-switcher/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /tic-tac-toe/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /tic-tac-toe/README.md: -------------------------------------------------------------------------------- 1 | # Tic Tac Toe 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/1374057d-1c37-480c-92c2-80f30c16b523 5 | 6 | -------------------------------------------------------------------------------- /tic-tac-toe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tic-tac-toe", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.98", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /tic-tac-toe/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/tic-tac-toe/public/favicon.ico -------------------------------------------------------------------------------- /tic-tac-toe/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Tic Tac Toe 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /tic-tac-toe/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/tic-tac-toe/public/logo192.png -------------------------------------------------------------------------------- /tic-tac-toe/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/tic-tac-toe/public/logo512.png -------------------------------------------------------------------------------- /tic-tac-toe/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /tic-tac-toe/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /tic-tac-toe/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | 4 | /* Custom styles */ 5 | * { 6 | font-family: "Montserrat"; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | margin: 0; 15 | background-color: #f0f0f0; 16 | } 17 | 18 | .App { 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | background-color: #ffffff; 23 | padding: 20px; 24 | border-radius: 10px; 25 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 26 | } 27 | 28 | .status { 29 | margin-bottom: 20px; 30 | font-size: 1.5rem; 31 | font-weight: bold; 32 | } 33 | 34 | .board-row { 35 | display: flex; 36 | } 37 | 38 | .square { 39 | width: 60px; 40 | height: 60px; 41 | background-color: #fff; 42 | border: 1px solid #ccc; 43 | font-size: 2rem; 44 | font-weight: bold; 45 | cursor: pointer; 46 | transition: background-color 0.3s; 47 | } 48 | 49 | .square:hover { 50 | background-color: #f0f0f0; 51 | } 52 | 53 | .reset { 54 | margin-top: 20px; 55 | padding: 10px 20px; 56 | font-size: 1rem; 57 | color: #fff; 58 | background-color: #007bff; 59 | border: none; 60 | border-radius: 5px; 61 | cursor: pointer; 62 | transition: background-color 0.3s; 63 | } 64 | 65 | .reset:hover { 66 | background-color: #0056b3; 67 | } 68 | -------------------------------------------------------------------------------- /tic-tac-toe/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /tic-tac-toe/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /tic-tac-toe/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /tic-tac-toe/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tic-tac-toe/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /tic-tac-toe/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tic-tac-toe/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/README.md: -------------------------------------------------------------------------------- 1 | # Onclick Outside Custom 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/faa774e5-511f-441a-99aa-84ae7f89dc8f 5 | 6 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "use-onlick-outside-custom", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.100", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/use-onlick-outside-custom/public/favicon.ico -------------------------------------------------------------------------------- /use-onlick-outside-custom/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/use-onlick-outside-custom/public/logo192.png -------------------------------------------------------------------------------- /use-onlick-outside-custom/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/use-onlick-outside-custom/public/logo512.png -------------------------------------------------------------------------------- /use-onlick-outside-custom/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | * { 5 | font-family: "Montserrat" !important; 6 | } 7 | 8 | .App { 9 | text-align: center; 10 | background-color: #282c34; 11 | min-height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | font-size: calc(10px + 2vmin); 17 | color: white; 18 | } 19 | 20 | .App-header { 21 | background-color: #20232a; 22 | padding: 2rem; 23 | border-radius: 1rem; 24 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); 25 | transition: all 0.3s ease; 26 | } 27 | 28 | .App-header:hover { 29 | transform: translateY(-0.25rem); 30 | box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2); 31 | } 32 | 33 | .App-logo { 34 | height: 10vmin; 35 | pointer-events: none; 36 | animation: App-logo-spin infinite 20s linear; 37 | } 38 | 39 | @keyframes App-logo-spin { 40 | from { 41 | transform: rotate(0deg); 42 | } 43 | to { 44 | transform: rotate(360deg); 45 | } 46 | } 47 | 48 | .App-link { 49 | color: #61dafb; 50 | text-decoration: none; 51 | transition: color 0.3s ease; 52 | } 53 | 54 | .App-link:hover { 55 | color: #4c9edd; 56 | } 57 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | interface RefObject { 6 | current: T | null; 7 | } 8 | 9 | type Handler = (event: MouseEvent | TouchEvent) => void; 10 | 11 | function useOnClickOutside(ref: RefObject, handler: Handler): void { 12 | useEffect(() => { 13 | const listener = (event: MouseEvent | TouchEvent) => { 14 | if (!ref.current || ref.current.contains(event.target as Node)) { 15 | return; 16 | } 17 | handler(event); 18 | }; 19 | 20 | document.addEventListener('mousedown', listener); 21 | document.addEventListener('touchstart', listener); 22 | 23 | return () => { 24 | document.removeEventListener('mousedown', listener); 25 | document.removeEventListener('touchstart', listener); 26 | }; 27 | }, [ref, handler]); 28 | } 29 | 30 | function App(): JSX.Element { 31 | const ref = useRef(null); 32 | 33 | const handleClickOutside = (): void => { 34 | alert('You clicked outside of the header!'); 35 | }; 36 | 37 | useOnClickOutside(ref, handleClickOutside); 38 | 39 | return ( 40 |
41 |
42 | logo 43 |

44 | Click outside of container 45 |

46 | 52 | Learn React 53 | 54 |
55 |
56 | ); 57 | } 58 | 59 | export default App; 60 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /use-onlick-outside-custom/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /use-window-resize/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /use-window-resize/README.md: -------------------------------------------------------------------------------- 1 | # Window Resize 2 | 3 | 4 | https://github.com/shinobi8894/react-tutorial/assets/56811611/8911ee74-5a96-4e35-92e2-236035640e5b 5 | 6 | -------------------------------------------------------------------------------- /use-window-resize/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "use-window-resize", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.100", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /use-window-resize/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/use-window-resize/public/favicon.ico -------------------------------------------------------------------------------- /use-window-resize/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/use-window-resize/public/logo192.png -------------------------------------------------------------------------------- /use-window-resize/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/use-window-resize/public/logo512.png -------------------------------------------------------------------------------- /use-window-resize/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /use-window-resize/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /use-window-resize/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | body, 5 | html { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Montserrat", sans-serif; 9 | width: 100%; 10 | } 11 | 12 | .App { 13 | text-align: center; 14 | background-color: #282c34; 15 | min-height: 100vh; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | justify-content: center; 20 | font-size: calc(10px + 2vmin); 21 | color: white; 22 | } 23 | 24 | .App-header { 25 | display: flex; 26 | flex-direction: row; 27 | align-items: center; 28 | justify-content: center; 29 | padding: 2rem; 30 | } 31 | 32 | .App-logo { 33 | height: auto; 34 | width: 200px; 35 | margin-right: 2rem; 36 | } 37 | 38 | .App-link { 39 | color: #61dafb; 40 | text-decoration: none; 41 | font-weight: bold; 42 | font-size: 1.2rem; 43 | transition: color 0.3s ease; 44 | } 45 | 46 | .App-link:hover { 47 | color: #8be9fd; 48 | } 49 | 50 | @media (max-width: 600px) { 51 | .App-header { 52 | flex-direction: column; 53 | padding: 1rem; 54 | } 55 | 56 | .App-logo { 57 | width: 150px; 58 | margin-right: 0; 59 | margin-bottom: 1rem; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /use-window-resize/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /use-window-resize/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function useWindowResize() { 6 | const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight }); 7 | 8 | useEffect(() => { 9 | const handleResize = () => { 10 | setSize({ width: window.innerWidth, height: window.innerHeight }); 11 | }; 12 | 13 | window.addEventListener('resize', handleResize); 14 | return () => window.removeEventListener('resize', handleResize); 15 | }, []); 16 | 17 | return size; 18 | } 19 | 20 | function App() { 21 | const { width } = useWindowResize(); 22 | 23 | return ( 24 |
25 |
600 ? 'row' : 'column' }}> 26 | logo 600 ? '200px' : '150px' }} /> 27 |
28 |

29 | Reduce your window screen ! 30 |

31 | 37 | Learn React 38 | 39 |
40 |
41 |
42 | ); 43 | } 44 | 45 | export default App; 46 | -------------------------------------------------------------------------------- /use-window-resize/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /use-window-resize/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /use-window-resize/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /use-window-resize/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /use-window-resize/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /use-window-resize/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /usefetch-custom-hook/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /usefetch-custom-hook/README.md: -------------------------------------------------------------------------------- 1 | # Fetch API custom 2 | ``` 3 | 4 | function useFetch(url: string) { 5 | const [data, setData] = useState(null); 6 | const [loading, setLoading] = useState(true); 7 | const [error, setError] = useState(null); 8 | 9 | useEffect(() => { 10 | fetch(url) 11 | .then((response) => response.json()) 12 | .then((data) => { 13 | setData(data); 14 | setLoading(false); 15 | }) 16 | .catch((error) => { 17 | setError(error); 18 | setLoading(false); 19 | }); 20 | }, [url]); 21 | 22 | return { data, loading, error }; 23 | } 24 | 25 | function App() { 26 | const { data, loading, error } = useFetch("https://randomuser.me/api/"); 27 | 28 | if (loading) return

Loading...

; 29 | if (error) return

Error loading data!

; 30 | 31 | return ( 32 |
33 |
34 | avatar 39 | {data?.results[0]?.name?.first} 40 | {data?.results[0]?.email} 41 | {data?.results[0]?.phone} 42 |
43 |
44 | ); 45 | } 46 | ``` 47 | -------------------------------------------------------------------------------- /usefetch-custom-hook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usefetch-custom-hook", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.100", 11 | "@types/react": "^18.3.3", 12 | "@types/react-dom": "^18.3.0", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /usefetch-custom-hook/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/usefetch-custom-hook/public/favicon.ico -------------------------------------------------------------------------------- /usefetch-custom-hook/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/usefetch-custom-hook/public/logo192.png -------------------------------------------------------------------------------- /usefetch-custom-hook/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinobi8894/react-tutorial/7c6e5968348318e02ac11b9141310575479ad416/usefetch-custom-hook/public/logo512.png -------------------------------------------------------------------------------- /usefetch-custom-hook/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /usefetch-custom-hook/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /usefetch-custom-hook/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | /* Base Styles */ 4 | * { 5 | font-family: "Montserrat" !important; 6 | } 7 | 8 | .App { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | background-color: #f5f5f5; 15 | font-family: 'Arial', sans-serif; 16 | } 17 | 18 | .profile-card { 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | background-color: #fff; 23 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 24 | border-radius: 8px; 25 | padding: 24px; 26 | max-width: 320px; 27 | width: 100%; 28 | } 29 | 30 | .profile-image { 31 | width: 120px; 32 | height: 120px; 33 | border-radius: 50%; 34 | object-fit: cover; 35 | margin-bottom: 16px; 36 | } 37 | 38 | .profile-name { 39 | font-size: 24px; 40 | font-weight: bold; 41 | margin-bottom: 8px; 42 | } 43 | 44 | .profile-email, 45 | .profile-phone { 46 | font-size: 16px; 47 | color: #666; 48 | margin-bottom: 8px; 49 | } 50 | -------------------------------------------------------------------------------- /usefetch-custom-hook/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /usefetch-custom-hook/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import "./App.css"; 3 | 4 | interface RandomUserData { 5 | results: { 6 | name: { 7 | first: string; 8 | }; 9 | email: string; 10 | phone: string; 11 | picture: { 12 | medium: string; 13 | large: string; 14 | }; 15 | }[]; 16 | } 17 | 18 | function useFetch(url: string) { 19 | const [data, setData] = useState(null); 20 | const [loading, setLoading] = useState(true); 21 | const [error, setError] = useState(null); 22 | 23 | useEffect(() => { 24 | fetch(url) 25 | .then((response) => response.json()) 26 | .then((data) => { 27 | setData(data); 28 | setLoading(false); 29 | }) 30 | .catch((error) => { 31 | setError(error); 32 | setLoading(false); 33 | }); 34 | }, [url]); 35 | 36 | return { data, loading, error }; 37 | } 38 | 39 | function App() { 40 | const { data, loading, error } = useFetch("https://randomuser.me/api/"); 41 | 42 | if (loading) return

Loading...

; 43 | if (error) return

Error loading data!

; 44 | 45 | return ( 46 |
47 |
48 | avatar 53 | {data?.results[0]?.name?.first} 54 | {data?.results[0]?.email} 55 | {data?.results[0]?.phone} 56 |
57 |
58 | ); 59 | } 60 | 61 | export default App; 62 | -------------------------------------------------------------------------------- /usefetch-custom-hook/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /usefetch-custom-hook/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /usefetch-custom-hook/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /usefetch-custom-hook/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /usefetch-custom-hook/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /usefetch-custom-hook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------