├── day-1 └── info.js ├── day-11 └── player-vs-player │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── Footer.jsx │ ├── Header.jsx │ ├── PlayerCard.jsx │ ├── ScoreCard.jsx │ ├── assets │ │ ├── player.jpg │ │ └── react.svg │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-12 └── react-classbased-component │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── CardNum.jsx │ ├── OddOrEven.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-13 └── react-lifecycle │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── Counter.jsx │ ├── CounterFunctional.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-15 └── react-form-validation │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-16 └── react-form-validation-project │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ ├── bg-1.jpeg │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── RegistrationForm.css │ │ ├── RegistrationForm.jsx │ │ ├── SurveyForm.css │ │ ├── SurveyForm.jsx │ │ └── survey.html │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-18 └── react-bootstrap │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ ├── font │ │ │ ├── CentraNo2-Bold.ttf │ │ │ ├── CentraNo2-Book.ttf │ │ │ └── CentraNo2-Medium.ttf │ │ └── img │ │ │ ├── arrow1.svg │ │ │ ├── arrow2.svg │ │ │ ├── banner-bg.png │ │ │ ├── color-sharp.png │ │ │ ├── color-sharp2.png │ │ │ ├── contact-img.svg │ │ │ ├── footer-bg.png │ │ │ ├── header-img.svg │ │ │ ├── logo.svg │ │ │ ├── meter1.svg │ │ │ ├── meter2.svg │ │ │ ├── meter3.svg │ │ │ ├── nav-icon1.svg │ │ │ ├── nav-icon2.svg │ │ │ ├── nav-icon3.svg │ │ │ ├── project-img1.png │ │ │ ├── project-img2.png │ │ │ └── project-img3.png │ ├── components │ │ └── Header.jsx │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-2 ├── index.html └── script.js ├── day-25 └── react-router-practice │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ ├── components │ │ │ ├── About.jsx │ │ │ ├── Company.jsx │ │ │ ├── Contact.jsx │ │ │ ├── Footer.jsx │ │ │ ├── Founder.jsx │ │ │ ├── Header.jsx │ │ │ ├── Home.jsx │ │ │ └── NotFound.jsx │ │ └── react.svg │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-28 └── global-state-concepts │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ └── Counter.jsx │ ├── context │ │ ├── CounterContext.jsx │ │ ├── actions.js │ │ └── countReducer.js │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-3 ├── index.html ├── note.js └── script.js ├── day-32 └── my-project │ ├── .editorconfig │ ├── .env.example │ ├── .eslintignore │ ├── .eslintrc │ ├── .gitignore │ ├── README.md │ ├── config │ ├── admin.js │ ├── api.js │ ├── database.js │ ├── middlewares.js │ └── server.js │ ├── database │ └── migrations │ │ └── .gitkeep │ ├── favicon.ico │ ├── package.json │ ├── public │ ├── robots.txt │ └── uploads │ │ └── .gitkeep │ ├── src │ ├── admin │ │ ├── app.example.js │ │ └── webpack.config.example.js │ ├── api │ │ ├── .gitkeep │ │ ├── article │ │ │ ├── content-types │ │ │ │ └── article │ │ │ │ │ └── schema.json │ │ │ ├── controllers │ │ │ │ └── article.js │ │ │ ├── routes │ │ │ │ └── article.js │ │ │ └── services │ │ │ │ └── article.js │ │ ├── category │ │ │ ├── content-types │ │ │ │ └── category │ │ │ │ │ └── schema.json │ │ │ ├── controllers │ │ │ │ └── category.js │ │ │ ├── routes │ │ │ │ └── category.js │ │ │ └── services │ │ │ │ └── category.js │ │ └── home │ │ │ ├── content-types │ │ │ └── home │ │ │ │ └── schema.json │ │ │ ├── controllers │ │ │ └── home.js │ │ │ ├── routes │ │ │ └── home.js │ │ │ └── services │ │ │ └── home.js │ ├── components │ │ └── layout │ │ │ ├── feathured-post.json │ │ │ ├── menu.json │ │ │ └── popular-post.json │ ├── extensions │ │ ├── .gitkeep │ │ └── users-permissions │ │ │ └── content-types │ │ │ └── user │ │ │ └── schema.json │ └── index.js │ └── yarn.lock ├── day-4 ├── classNote.js ├── index.html └── my-app │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ ├── vite.config.js │ └── yarn.lock ├── day-6 └── note.js ├── day-7 ├── classNote.js ├── my-app │ ├── .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.js │ │ ├── App.module.css │ │ ├── App.test.js │ │ ├── IsOddOrEven.js │ │ ├── RandomCards.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js └── post.js ├── day-8 └── quiz-game │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── AnswerCard.css │ ├── AnswerCard.jsx │ ├── App.css │ ├── App.jsx │ ├── Footer.jsx │ ├── QuestionCard.jsx │ ├── ScoreCard.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.jsx │ └── utils.js │ ├── vite.config.js │ └── yarn.lock ├── info.js └── script.js /day-1/info.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | // Day-1 5 | // 20 July 2022 6 | 7 | 8 | // Day-1 9 | // —--------- 10 | // 1.Watch Orientation class video (video link) 11 | // 2.Pick your action plan with proper mindset and time management plan 12 | // 3.Post your Goal in webdeveloperbD community as described in orientation 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-11/player-vs-player/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-11/player-vs-player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Player VS Player 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-11/player-vs-player/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "player-vs-player", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.15", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.0", 19 | "vite": "^3.0.0" 20 | } 21 | } -------------------------------------------------------------------------------- /day-11/player-vs-player/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-11/player-vs-player/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Tahoma; 5 | } 6 | 7 | .container { 8 | width: 90vw; 9 | margin: 0 auto; 10 | } 11 | 12 | .header { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | box-shadow: 10px 10px 40px grey; 17 | padding: 10px; 18 | border-radius: 4px; 19 | background-color: lightslategrey; 20 | } 21 | 22 | .logo img { 23 | width: 150px; 24 | } 25 | 26 | .player_section { 27 | background-color: grey; 28 | box-shadow: 10px 10px 40px grey; 29 | padding: 40px; 30 | border-radius: 4px; 31 | text-align: center; 32 | } 33 | .scoreInput { 34 | padding: 6px 15px; 35 | } 36 | 37 | .submitButton { 38 | padding: 10px 20px; 39 | border-radius: 4px; 40 | background-color: grey; 41 | border: none; 42 | margin-left: 15px; 43 | cursor: pointer; 44 | color: white; 45 | margin-top: 10px; 46 | } 47 | 48 | .button { 49 | padding: 12px 15px; 50 | cursor: pointer; 51 | border-radius: 4px; 52 | border: none; 53 | margin: 0 1%; 54 | width: 30%; 55 | } 56 | 57 | .allow_click { 58 | pointer-events: visible; 59 | } 60 | 61 | .disable_click { 62 | pointer-events: none; 63 | opacity: 0.6; 64 | } 65 | 66 | .reset_button { 67 | padding: 12px 15px; 68 | cursor: pointer; 69 | border-radius: 4px; 70 | border: none; 71 | margin-top: 8px; 72 | width: 62%; 73 | } 74 | 75 | .scoreCard { 76 | text-align: center; 77 | padding: 50px; 78 | margin: 0; 79 | overflow: hidden; 80 | } 81 | 82 | @media all and (max-width: 768px) { 83 | .scoreInput { 84 | width: 100%; 85 | box-sizing: border-box; 86 | } 87 | .submitButton { 88 | width: 100%; 89 | margin-left: 0; 90 | } 91 | .button { 92 | width: 100%; 93 | margin: 5px 0; 94 | } 95 | 96 | .reset_button { 97 | width: 100%; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /day-11/player-vs-player/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './App.css'; 3 | import Footer from './Footer'; 4 | import PlayerCard from './PlayerCard'; 5 | import ScoreCard from './ScoreCard'; 6 | 7 | 8 | 9 | 10 | 11 | const App = () => { 12 | 13 | const [winScore, setWinScore] = useState(10); 14 | const [playerOneScore, setPlayerOneScore] = useState(0); 15 | const [playerTwoScore, setPlayerTwoScore] = useState(0); 16 | const [winner, setWinner] = useState(''); 17 | const [pOneAllowClick, setPOneAllowClick] = useState(''); 18 | const [pTwoAllowClick, setPTwoAllowClick] = useState(''); 19 | 20 | 21 | const generateRandomNumber = () => Math.floor(Math.random() * (winScore + 1)); 22 | 23 | const handlePlayerOne = () => { 24 | 25 | const pOneScore = generateRandomNumber(); 26 | setPlayerOneScore(pOneScore); 27 | 28 | setPOneAllowClick('disable_click'); 29 | setPTwoAllowClick('allow_click'); 30 | 31 | if(pOneScore === winScore) { 32 | 33 | setWinner('Player 1 is winner'); 34 | setPOneAllowClick('disable_click'); 35 | setPTwoAllowClick('disable_click'); 36 | } 37 | } 38 | 39 | 40 | const handlePlayerTwo = () => { 41 | 42 | const pTwoScore = generateRandomNumber(); 43 | setPlayerTwoScore(pTwoScore); 44 | 45 | setPTwoAllowClick('disable_click'); 46 | setPOneAllowClick('allow_click'); 47 | 48 | if(pTwoScore === winScore) { 49 | 50 | setWinner('Player 2 is winner'); 51 | setPOneAllowClick('disable_click'); 52 | setPTwoAllowClick('disable_click'); 53 | } 54 | } 55 | 56 | 57 | const handleReset = () => { 58 | 59 | setPlayerOneScore(0); 60 | setPlayerTwoScore(0); 61 | setWinner(''); 62 | setPOneAllowClick(''); 63 | setPTwoAllowClick(''); 64 | setWinScore(10); 65 | } 66 | 67 | const handleSubmit = (e) => { 68 | 69 | // prevent reload 70 | e.preventDefault(); 71 | 72 | // reset player score 73 | handleReset(); 74 | 75 | // get input data 76 | setWinScore(parseInt(e.target[0].value)); 77 | 78 | // reset input data 79 | e.target[0].value = ''; 80 | } 81 | 82 | 83 | 84 | 85 | 86 | return ( 87 |
88 | {/*
*/} 89 | 90 | 100 |
102 | ); 103 | }; 104 | 105 | export default App; -------------------------------------------------------------------------------- /day-11/player-vs-player/src/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 |
Developed by Kawsar Ahmed || Initiative with
Web Developer BD
7 |
8 | ); 9 | }; 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /day-11/player-vs-player/src/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import playerImg from './assets/player.jpg'; 3 | 4 | 5 | 6 | const Header = () => { 7 | return ( 8 |
9 |
10 | 11 |
12 |
13 |

Player Vs Player

14 |
15 |
16 | ); 17 | }; 18 | 19 | export default Header; -------------------------------------------------------------------------------- /day-11/player-vs-player/src/PlayerCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | 4 | 5 | 6 | 7 | const PlayerCard = ({handlePlayerOne, handlePlayerTwo, handleReset, playerOneScore, playerTwoScore, pOneAllowClick, pTwoAllowClick, winner}) => { 8 | 9 | return ( 10 |
11 | 12 | { 13 | winner &&

{winner}

14 | } 15 |

{playerOneScore} to {playerTwoScore}

16 | 17 | 18 | 19 |
20 | 21 |
22 | ); 23 | }; 24 | 25 | export default PlayerCard; -------------------------------------------------------------------------------- /day-11/player-vs-player/src/ScoreCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ScoreCard = ({winScore, handleSubmit}) => { 4 | 5 | 6 | return ( 7 |
8 |

Player Vs Player

9 |

Wining Score: {winScore}

10 | 11 |
12 | 13 | 14 |
15 |
16 | ); 17 | }; 18 | 19 | export default ScoreCard; -------------------------------------------------------------------------------- /day-11/player-vs-player/src/assets/player.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-11/player-vs-player/src/assets/player.jpg -------------------------------------------------------------------------------- /day-11/player-vs-player/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-11/player-vs-player/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-11/player-vs-player/src/index.css -------------------------------------------------------------------------------- /day-11/player-vs-player/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /day-11/player-vs-player/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-12/react-classbased-component/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-12/react-classbased-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class Component Practice 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-12/react-classbased-component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-classbased-component", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.15", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.0", 19 | "vite": "^3.0.0" 20 | } 21 | } -------------------------------------------------------------------------------- /day-12/react-classbased-component/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-12/react-classbased-component/src/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: tomato; 3 | padding: 50px; 4 | border-radius: 50%; 5 | margin: 10px; 6 | text-align: center; 7 | cursor: pointer; 8 | width: 100px; 9 | height: 100px; 10 | display: inline-block; 11 | } 12 | 13 | button { 14 | padding: 7px 15px; 15 | cursor: pointer; 16 | margin: 0 5px; 17 | border-radius: 4px; 18 | } 19 | -------------------------------------------------------------------------------- /day-12/react-classbased-component/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import CardNum from './CardNum'; 4 | import OddOrEven from './OddOrEven'; 5 | 6 | 7 | class App extends Component { 8 | 9 | // 1st way 10 | // state = {count: 0} 11 | // handleIncrement() { 12 | // this.setState({count: this.state.count + 1}); 13 | // } 14 | // handleDecrement() { 15 | // this.setState({count: this.state.count - 1}); 16 | // } 17 | // handleReset() { 18 | // this.setState({count: 0}); 19 | // } 20 | 21 | 22 | 23 | 24 | // 2nd way 25 | // state = {count: 0} 26 | // handleIncrement = () => { 27 | // this.setState({count: this.state.count + 1}); 28 | // } 29 | // handleDecrement = () => { 30 | // this.setState({count: this.state.count - 1}); 31 | // } 32 | // handleReset = () => { 33 | // this.setState({count: 0}); 34 | // } 35 | 36 | 37 | 38 | // 3rd way 39 | constructor(props) { 40 | 41 | super(props); 42 | this.state = { 43 | count: 0, 44 | randomNumbers: [1, 3, 5, 8, 10], 45 | pickedValue: null 46 | } 47 | 48 | this.handleIncrement = this.handleIncrement.bind(this); 49 | this.handleDecrement = this.handleDecrement.bind(this); 50 | this.handleReset = this.handleReset.bind(this); 51 | } 52 | 53 | handleIncrement() { 54 | this.setState({count: this.state.count + 1}); 55 | } 56 | handleDecrement() { 57 | this.setState((prevState, props) => { 58 | return {count: prevState.count - 1} 59 | }); 60 | } 61 | handleReset() { 62 | this.setState({count: 0}); 63 | } 64 | 65 | handlePickNum = (pickedNum) => { 66 | this.setState({pickedValue: pickedNum}); 67 | } 68 | 69 | 70 | render() { 71 | const {count, randomNumbers, pickedValue} = this.state; 72 | 73 | return ( 74 |
75 | 76 | {/*

{this.state.count}

77 | 78 | 79 | */} 80 | 81 | 82 |

{count}

83 | 84 | 85 | 86 | 87 | 88 |
89 | { 90 | randomNumbers.map((cardNum, i) => ) 91 | } 92 | 93 | 94 |
95 | ); 96 | } 97 | } 98 | 99 | export default App; -------------------------------------------------------------------------------- /day-12/react-classbased-component/src/CardNum.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class CardNum extends Component { 4 | 5 | // handleValue = () => { 6 | 7 | // this.props.handlePickNum(this.props.cardNum); 8 | // } 9 | 10 | render() { 11 | const {cardNum, handlePickNum} = this.props; 12 | 13 | 14 | return ( 15 |
handlePickNum(cardNum)}> 16 |

Card Number

17 |

Num: {cardNum}

18 |
19 | ); 20 | } 21 | } 22 | 23 | export default CardNum; -------------------------------------------------------------------------------- /day-12/react-classbased-component/src/OddOrEven.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class OddOrEven extends Component { 4 | 5 | render() { 6 | const {count, pickedValue} = this.props; 7 | 8 | 9 | return ( 10 |
11 |

Count Number is: {count}

12 |

{count % 2 === 0 ? 'Even' : 'Odd'}

13 | 14 |
15 | { 16 | pickedValue ?

Picked Number is: {pickedValue}

:

You haven't picked a number yet

17 | } 18 | { 19 | pickedValue &&

{pickedValue % 2 === 0 ? 'Even' : 'Odd'}

20 | } 21 | 22 |
23 | ); 24 | } 25 | } 26 | 27 | export default OddOrEven; -------------------------------------------------------------------------------- /day-12/react-classbased-component/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-12/react-classbased-component/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-12/react-classbased-component/src/index.css -------------------------------------------------------------------------------- /day-12/react-classbased-component/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /day-12/react-classbased-component/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-13/react-lifecycle/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-13/react-lifecycle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-13/react-lifecycle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-lifecycle", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.15", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.0", 19 | "vite": "^3.0.0" 20 | } 21 | } -------------------------------------------------------------------------------- /day-13/react-lifecycle/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-13/react-lifecycle/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-13/react-lifecycle/src/App.css -------------------------------------------------------------------------------- /day-13/react-lifecycle/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Counter from './Counter'; 3 | import CounterFunctional from './CounterFunctional'; 4 | 5 | 6 | 7 | class App extends Component { 8 | 9 | state = { 10 | showComponent: true, 11 | appTitle: 'Title from parent component' 12 | } 13 | 14 | handleToggle = () => { 15 | this.setState({showComponent: !this.state.showComponent}) 16 | } 17 | 18 | 19 | render() { 20 | 21 | const {showComponent, appTitle} = this.state; 22 | 23 | return ( 24 |
25 | 26 |

Hello from Class Component

27 | 28 | 29 | 30 | { 31 | showComponent ? :

Hidden Counter Class Component

32 | } 33 | 34 |
35 | 36 | { 37 | showComponent ? :

Hidden Counter Functional Component

38 | } 39 |
40 | ); 41 | } 42 | } 43 | 44 | export default App; -------------------------------------------------------------------------------- /day-13/react-lifecycle/src/Counter.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class ClassComponent extends Component { 4 | state = { 5 | count: 0, 6 | title: '' 7 | } 8 | 9 | counterTimer = null; 10 | 11 | handleIncrement = () => { 12 | this.setState((prevSTate) => { 13 | return {count: prevSTate.count + 1} 14 | }) 15 | 16 | // force update 17 | this.forceUpdate(); 18 | } 19 | 20 | 21 | handleDecrement = () => { 22 | this.setState((prevSTate) => { 23 | return {count: prevSTate.count - 1} 24 | }) 25 | } 26 | 27 | 28 | handleReset = () => { 29 | this.setState((prevSTate) => { 30 | return {count: 0} 31 | }) 32 | } 33 | 34 | // lifecycle method 35 | 36 | // mounting 37 | // updating 38 | // unmounting 39 | 40 | constructor() { 41 | 42 | // initialization 43 | // state declaration 44 | 45 | super() 46 | console.log('Constructor method'); 47 | } 48 | 49 | 50 | static getDerivedStateFromProps(props, state) { 51 | 52 | // props hisebe jodi kuno data ase ar sei datar upor base kore jodi state update korte chai 53 | // manipulate state based on parent props 54 | 55 | console.log('getDerivedStateFromProps'); 56 | return { 57 | title: props.appTitle 58 | }; 59 | } 60 | 61 | componentDidMount() { 62 | // API request 63 | // side effects (accessing dom, subscription) 64 | 65 | console.log('componentDidMount'); 66 | 67 | // this.counterTimer = setInterval(() => { 68 | 69 | // this.setState((prevSTate) => { 70 | // return {count: prevSTate.count + 1} 71 | // }) 72 | 73 | // }, 1000) 74 | } 75 | 76 | 77 | 78 | // updating stage 79 | shouldComponentUpdate() { 80 | // component update hobe ki hobe na. bole deya jay 81 | 82 | console.log('shouldComponentUpdate'); 83 | return true; 84 | } 85 | 86 | getSnapshotBeforeUpdate(prevProps, prevState) { 87 | // manual DOM selection, updating 88 | 89 | console.log('getSnapshotBeforeUpdate'); 90 | return 'something'; 91 | } 92 | 93 | componentDidUpdate(props, state, snapShot) { 94 | // same to componentDidMount 95 | 96 | console.log(props, 'props'); 97 | console.log(state, 'state'); 98 | console.log(snapShot, 'snapShot'); 99 | console.log('componentDidUpdate'); 100 | } 101 | 102 | 103 | 104 | 105 | 106 | // unmounting stage 107 | componentWillUnmount() { 108 | 109 | // clearInterval(this.counterTimer); 110 | console.log("componentWillUnmount"); 111 | } 112 | 113 | 114 | render() { 115 | const {count, title} = this.state; 116 | 117 | console.log('Render'); 118 | 119 | return ( 120 |
121 | 122 |

{title}

123 |

Count: {count}

124 | 125 | 126 | 127 |
128 | ); 129 | } 130 | } 131 | 132 | export default ClassComponent; -------------------------------------------------------------------------------- /day-13/react-lifecycle/src/CounterFunctional.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | 3 | const CounterFunctional = () => { 4 | const [count, setCount] = useState(0); 5 | 6 | const handleIncrement = () => { 7 | setCount(count + 1); 8 | } 9 | 10 | const handleDecrement = () => { 11 | setCount(count - 1); 12 | } 13 | 14 | const handleReset = () => { 15 | setCount(0); 16 | } 17 | 18 | useEffect(() => { 19 | 20 | console.log('useEffect is called'); 21 | 22 | const timer = setInterval(() => { 23 | setCount(count + 1) 24 | }, 1000) 25 | 26 | 27 | 28 | return () => { 29 | 30 | console.log('CounterFunctional is unmounted'); 31 | clearInterval(timer); 32 | } 33 | 34 | }, [count]) 35 | 36 | 37 | 38 | 39 | return ( 40 |
41 |

Functional component

42 |

Count: {count}

43 | 44 | 45 | 46 |
47 | ); 48 | }; 49 | 50 | export default CounterFunctional; -------------------------------------------------------------------------------- /day-13/react-lifecycle/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-13/react-lifecycle/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-13/react-lifecycle/src/index.css -------------------------------------------------------------------------------- /day-13/react-lifecycle/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /day-13/react-lifecycle/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-15/react-form-validation/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-15/react-form-validation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-15/react-form-validation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-form-validation", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.15", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.0", 19 | "vite": "^3.0.0" 20 | } 21 | } -------------------------------------------------------------------------------- /day-15/react-form-validation/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-15/react-form-validation/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-15/react-form-validation/src/App.css -------------------------------------------------------------------------------- /day-15/react-form-validation/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | 4 | 5 | 6 | const App = () => { 7 | 8 | const [userData, setUserData] = useState({ 9 | firstName: '', 10 | lastName: '', 11 | email: '', 12 | profession: '', 13 | gender: '' 14 | }); 15 | const [errors, setErrors] = useState({ 16 | firstName: '', 17 | lastName: '', 18 | email: '', 19 | profession: '', 20 | gender: '' 21 | }); 22 | const [submitted, setSubmitted] = useState(false); 23 | 24 | const handleInputChange = (e) => { 25 | setUserData({...userData, [e.target.name]: e.target.value}); 26 | setErrors({...errors, [e.target.name]: ''}) 27 | } 28 | 29 | 30 | const {firstName, lastName, email, profession, gender} = userData; 31 | const handleSubmit = (e) => { 32 | e.preventDefault(); 33 | 34 | const userErrors = { 35 | firstName: '', 36 | lastName: '', 37 | email: '', 38 | profession: '', 39 | gender: '' 40 | } 41 | 42 | // validation 43 | if(firstName === '') { 44 | userErrors.firstName = 'FirstName is required'; 45 | } 46 | 47 | if(lastName === '') { 48 | userErrors.lastName = 'LastName is required'; 49 | } 50 | 51 | if(email === '') { 52 | userErrors.email = 'Email is required'; 53 | } 54 | 55 | if(profession === '') { 56 | userErrors.profession = 'Profession is required'; 57 | } 58 | 59 | if(gender === '') { 60 | userErrors.gender = 'Gender is required'; 61 | } 62 | 63 | setErrors(userErrors); 64 | 65 | // form is valid 66 | if(Object.values(userErrors).some(elm=> elm.length > 0)){ 67 | return; 68 | } 69 | 70 | // api request 71 | setSubmitted(true); 72 | } 73 | 74 | 75 | 76 | 77 | return ( 78 | <> 79 | 80 | { 81 | submitted &&

Form is successfully submit

82 | } 83 | 84 | { 85 | !submitted && 86 |
87 |

React form data handling

88 |
89 |
90 | 91 | 92 |

{errors.firstName}

93 | 94 |
95 | 96 | 97 | 98 |

{errors.lastName}

99 |
100 | 101 | 102 | 103 |

{errors.email}

104 |
105 | 106 | 107 | 113 |

{errors.profession}

114 | 115 |
116 | 117 | 118 | 119 | 120 | 121 | 122 |

{errors.gender}

123 |
124 |
125 | 126 | 127 |
128 |
129 | } 130 | 131 | ); 132 | }; 133 | 134 | export default App; -------------------------------------------------------------------------------- /day-15/react-form-validation/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-15/react-form-validation/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-15/react-form-validation/src/index.css -------------------------------------------------------------------------------- /day-15/react-form-validation/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /day-15/react-form-validation/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React form validation challenge project 8 | 14 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-form-validation-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.15", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.0", 19 | "vite": "^3.0.0" 20 | } 21 | } -------------------------------------------------------------------------------- /day-16/react-form-validation-project/public/bg-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-16/react-form-validation-project/public/bg-1.jpeg -------------------------------------------------------------------------------- /day-16/react-form-validation-project/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .registration_btn { 7 | padding: 18px 60px; 8 | cursor: pointer; 9 | border-radius: 4px; 10 | border: 3px solid tomato; 11 | margin: 0 5px; 12 | font-weight: 600; 13 | } 14 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './App.css'; 3 | import RegistrationForm from './components/RegistrationForm'; 4 | import SurveyForm from './components/SurveyForm'; 5 | 6 | 7 | 8 | 9 | const App = () => { 10 | 11 | const [showButton, setShowButton] = useState(true); 12 | const [showRegistrationForm, setShowRegistrationForm] = useState(false); 13 | const [showSurveyForm, setShowSurveyForm] = useState(false); 14 | 15 | const handleRegistrationForm = () => { 16 | 17 | setShowRegistrationForm(true); 18 | setShowButton(false); 19 | } 20 | 21 | const handleSurveyForm = () => { 22 | 23 | setShowSurveyForm(true); 24 | setShowButton(false); 25 | } 26 | 27 | 28 | 29 | 30 | 31 | return ( 32 |
33 | 34 | { 35 | showButton && <> 36 | 37 | 38 | 39 | } 40 | 41 | 42 | { 43 | showRegistrationForm && 44 | } 45 | 46 | { 47 | showSurveyForm && 48 | } 49 |
50 | ); 51 | }; 52 | 53 | export default App; -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/components/RegistrationForm.css: -------------------------------------------------------------------------------- 1 | .body { 2 | min-height: 100%; 3 | } 4 | .body, 5 | div, 6 | form, 7 | input, 8 | select, 9 | p { 10 | padding: 0; 11 | margin: 0; 12 | outline: none; 13 | font-family: Roboto, Arial, sans-serif; 14 | font-size: 16px; 15 | color: #eee; 16 | } 17 | .body { 18 | background: url("/bg-1.jpeg") no-repeat center; 19 | background-size: cover; 20 | } 21 | h1, 22 | h2 { 23 | text-transform: uppercase; 24 | font-weight: 400; 25 | } 26 | h2 { 27 | margin: 0 0 0 8px; 28 | } 29 | .main-block { 30 | display: flex; 31 | flex-direction: column; 32 | justify-content: center; 33 | align-items: center; 34 | height: 100%; 35 | padding: 25px; 36 | background: rgba(0, 0, 0, 0.5); 37 | } 38 | .left-part, 39 | form { 40 | padding: 25px; 41 | } 42 | .left-part { 43 | text-align: center; 44 | } 45 | .fa-graduation-cap { 46 | font-size: 72px; 47 | } 48 | form { 49 | background: rgba(0, 0, 0, 0.7); 50 | } 51 | .title { 52 | display: flex; 53 | align-items: center; 54 | margin-bottom: 20px; 55 | } 56 | .info { 57 | display: flex; 58 | flex-direction: column; 59 | } 60 | input, 61 | select { 62 | padding: 5px; 63 | background: transparent; 64 | border: none; 65 | border-bottom: 1px solid #eee; 66 | } 67 | input::placeholder { 68 | color: #eee; 69 | } 70 | option:focus { 71 | border: none; 72 | } 73 | option { 74 | background: black; 75 | border: none; 76 | } 77 | .checkbox input { 78 | margin: 0 10px 0 0; 79 | vertical-align: middle; 80 | } 81 | .checkbox a { 82 | color: #26a9e0; 83 | } 84 | .checkbox a:hover { 85 | color: #85d6de; 86 | } 87 | .btn-item, 88 | .submitBtn { 89 | padding: 10px 5px; 90 | margin-top: 20px; 91 | border-radius: 5px; 92 | border: none; 93 | background: #26a9e0; 94 | text-decoration: none; 95 | font-size: 15px; 96 | font-weight: 400; 97 | color: #fff; 98 | } 99 | .btn-item { 100 | display: inline-block; 101 | margin: 20px 5px 0; 102 | } 103 | .submitBtn { 104 | width: 100%; 105 | } 106 | .submitBtn:hover, 107 | .btn-item:hover { 108 | background: #85d6de; 109 | cursor: pointer; 110 | } 111 | 112 | .input_group { 113 | margin-bottom: 20px; 114 | } 115 | 116 | .input_group input, 117 | select { 118 | width: 100%; 119 | margin-bottom: 5px; 120 | box-sizing: border-box; 121 | } 122 | 123 | @media (min-width: 568px) { 124 | .body { 125 | height: 100%; 126 | } 127 | .main-block { 128 | flex-direction: row; 129 | height: calc(100% - 50px); 130 | } 131 | .left-part, 132 | form { 133 | flex: 1; 134 | height: auto; 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/components/RegistrationForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './RegistrationForm.css'; 3 | 4 | 5 | 6 | 7 | const RegistrationForm = ({setShowRegistrationForm, setShowButton}) => { 8 | 9 | const [userData, setUserData] = useState({ 10 | username: '', 11 | fullName: '', 12 | email: '', 13 | phoneNumber: '', 14 | password: '', 15 | confirmPassword: '', 16 | course: '', 17 | agreedPolicy: false 18 | }) 19 | 20 | const [errors, setErrors] = useState({ 21 | username: '', 22 | fullName: '', 23 | email: '', 24 | phoneNumber: '', 25 | password: '', 26 | confirmPassword: '', 27 | course: '', 28 | agreedPolicy: '' 29 | }); 30 | 31 | 32 | const handleInputChange = (e) => { 33 | 34 | const isCheckbox = e.target.type === 'checkbox' ? e.target.checked : e.target.value; 35 | setUserData({ 36 | ...userData, 37 | [e.target.name]: isCheckbox 38 | }) 39 | 40 | setErrors({...errors, [e.target.name]: ''}); 41 | } 42 | 43 | const {username, fullName, email, phoneNumber, password, confirmPassword, course, agreedPolicy} = userData; 44 | const handleSubmit = (e) => { 45 | e.preventDefault(); 46 | 47 | const userErrors = {} 48 | 49 | // check validation 50 | if(username === '') { 51 | userErrors.username = 'Username is required'; 52 | 53 | } else if(!/\w/gi.test(username)) { 54 | 55 | userErrors.username = 'Username must be Alphanumeric character'; 56 | } 57 | 58 | if(fullName === '') { 59 | userErrors.fullName = 'Full name is required'; 60 | 61 | } else if(/[^a-z\s]/gi.test(fullName)) { 62 | 63 | userErrors.fullName = 'Full name must be word character'; 64 | } 65 | 66 | if(email === '') { 67 | userErrors.email = 'Email is required'; 68 | 69 | } else if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { 70 | 71 | userErrors.email = 'Email must be valid'; 72 | } 73 | 74 | if(phoneNumber === '') { 75 | userErrors.phoneNumber = 'Phone number is required'; 76 | 77 | } else if(!/^(?:\+88|88)?(01[3-9]\d{8})$/.test(phoneNumber)) { 78 | 79 | userErrors.phoneNumber = 'Must be valid BD phone number '; 80 | } 81 | 82 | if(password === '') { 83 | userErrors.password = 'Password is required'; 84 | 85 | } else if(!/[\w]{6,15}/gi.test(password)) { 86 | 87 | userErrors.password = 'Password use at least 6 alphanumeric character'; 88 | } 89 | 90 | if(confirmPassword === '') { 91 | userErrors.confirmPassword = 'Confirm password is required'; 92 | 93 | } else if(password !== confirmPassword) { 94 | 95 | userErrors.confirmPassword = 'Confirm password doesn\'t match'; 96 | } 97 | 98 | if(course === '') { 99 | userErrors.course = 'Please select your course'; 100 | } 101 | 102 | if(agreedPolicy === false) { 103 | userErrors.agreedPolicy = 'Please accept terms & condition before continue!'; 104 | } 105 | 106 | setErrors(userErrors); 107 | 108 | 109 | // is ok to continue 110 | if(Object.keys(userErrors).length) { 111 | return false; 112 | } 113 | 114 | alert('Form is successfully submitted'); 115 | setShowRegistrationForm(false); 116 | setShowButton(true); 117 | } 118 | 119 | 120 | 121 | 122 | 123 | return ( 124 |
125 |
126 |
127 | 128 |

Register to our courses

129 |

130 | Webdeveloper BD provides learning materials for programming languages like JavaScript, React, Node.js etc. 131 |

132 |
133 | 134 | Learn JavaScript 135 | 136 | 137 | Our Community 138 | 139 |
140 |
141 |
142 |
143 | 144 |

Register here

145 |
146 |
147 |
148 | 156 |

{errors.username}

157 |
158 | 159 |
160 | 168 |

{errors.fullName}

169 |
170 | 171 |
172 | 173 |

{errors.email}

174 |
175 | 176 |
177 | 178 |

{errors.phoneNumber}

179 |
180 | 181 |
182 | 183 |

{errors.password}

184 |
185 | 186 |
187 | 188 |

{errors.confirmPassword}

189 |
190 | 191 |
192 | 200 |

{errors.course}

201 |
202 |
203 | 204 |
205 | 206 | 207 | {' '} 208 | 209 | Privacy Policy for Web Developer BD. 210 | 211 | 212 |

{errors.agreedPolicy}

213 |
214 | 215 | 218 |
219 |
220 |
221 | ); 222 | }; 223 | 224 | export default RegistrationForm; -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/components/SurveyForm.css: -------------------------------------------------------------------------------- 1 | .survey_form, 2 | input { 3 | padding: 0; 4 | margin: 0; 5 | outline: none; 6 | font-family: Roboto, Arial, sans-serif; 7 | font-size: 14px; 8 | color: #666; 9 | line-height: 22px; 10 | } 11 | h1, 12 | h4 { 13 | font-weight: 400; 14 | } 15 | h4 { 16 | margin: 22px 0 4px; 17 | } 18 | h5 { 19 | text-transform: uppercase; 20 | color: #095484; 21 | } 22 | .survey-block { 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | padding: 3px; 27 | } 28 | form { 29 | width: 100%; 30 | padding: 20px; 31 | box-shadow: 0 2px 5px #ccc; 32 | background: #fff; 33 | } 34 | input { 35 | width: calc(100% - 10px); 36 | padding: 5px; 37 | border-radius: 3px; 38 | border: 1px solid #ccc; 39 | vertical-align: middle; 40 | } 41 | textarea { 42 | width: calc(100% - 6px); 43 | outline: none; 44 | } 45 | input:hover, 46 | textarea:hover { 47 | outline: none; 48 | border: 1px solid #095484; 49 | } 50 | th, 51 | td { 52 | width: 15%; 53 | padding: 15px 0; 54 | border-bottom: 1px solid #ccc; 55 | text-align: center; 56 | vertical-align: unset; 57 | line-height: 18px; 58 | font-weight: 400; 59 | word-break: break-all; 60 | } 61 | .additional-question th, 62 | .additional-question td { 63 | width: 38%; 64 | } 65 | .course-rate th, 66 | .course-rate td { 67 | width: 19%; 68 | } 69 | .first-col, 70 | .additional-question .first-col, 71 | .course-rate .first-col { 72 | width: 24%; 73 | text-align: left; 74 | } 75 | .question, 76 | .comments { 77 | margin: 15px 0 5px; 78 | } 79 | .question-answer label { 80 | display: inline-block; 81 | padding: 0 20px 15px 0; 82 | } 83 | .question-answer input { 84 | width: auto; 85 | } 86 | .question-answer, 87 | table { 88 | width: 100%; 89 | } 90 | .btn-block { 91 | margin-top: 20px; 92 | text-align: center; 93 | } 94 | button { 95 | width: 150px; 96 | padding: 10px; 97 | border: none; 98 | border-radius: 5px; 99 | background: #095484; 100 | font-size: 16px; 101 | color: #fff; 102 | cursor: pointer; 103 | } 104 | button:hover { 105 | background: #0666a3; 106 | } 107 | @media (min-width: 568px) { 108 | th, 109 | td { 110 | word-break: keep-all; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/components/SurveyForm.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const SurveyForm = () => { 4 | return ( 5 |
Coming soon!
6 | ); 7 | }; 8 | 9 | export default SurveyForm; -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-16/react-form-validation-project/src/index.css -------------------------------------------------------------------------------- /day-16/react-form-validation-project/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /day-16/react-form-validation-project/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bootstrap", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "bootstrap": "^5.2.0", 13 | "react": "^18.2.0", 14 | "react-bootstrap": "^2.5.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.0.15", 19 | "@types/react-dom": "^18.0.6", 20 | "@vitejs/plugin-react": "^2.0.0", 21 | "vite": "^3.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/App.jsx: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | import React from 'react'; 3 | import "./App.css"; 4 | import Header from './components/Header'; 5 | 6 | 7 | 8 | 9 | 10 | const App = () => { 11 | return ( 12 |
13 |
14 |
15 | ); 16 | }; 17 | 18 | export default App; -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/font/CentraNo2-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/font/CentraNo2-Bold.ttf -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/font/CentraNo2-Book.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/font/CentraNo2-Book.ttf -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/font/CentraNo2-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/font/CentraNo2-Medium.ttf -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/arrow1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/arrow2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/banner-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/img/banner-bg.png -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/color-sharp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/img/color-sharp.png -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/color-sharp2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/img/color-sharp2.png -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/img/footer-bg.png -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/meter1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/meter2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/meter3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/nav-icon1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/nav-icon2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/nav-icon3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/project-img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/img/project-img1.png -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/project-img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/img/project-img2.png -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/assets/img/project-img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-18/react-bootstrap/src/assets/img/project-img3.png -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Container from "react-bootstrap/Container"; 3 | import Nav from "react-bootstrap/Nav"; 4 | import Navbar from "react-bootstrap/Navbar"; 5 | import logo from "../assets/img/logo.svg"; 6 | import navIcon1 from "../assets/img/nav-icon1.svg"; 7 | import navIcon2 from "../assets/img/nav-icon2.svg"; 8 | import navIcon3 from "../assets/img/nav-icon3.svg"; 9 | 10 | const Header = () => { 11 | const [activeLink, setActiveLink] = useState("home"); 12 | const [scrolled, setScrolled] = useState(false); 13 | 14 | useEffect(() => { 15 | const onScroll = () => { 16 | if (window.scrollY > 50) { 17 | setScrolled(true); 18 | } else { 19 | setScrolled(false); 20 | } 21 | }; 22 | 23 | window.addEventListener("scroll", onScroll); 24 | 25 | return () => window.removeEventListener("scroll", onScroll); 26 | }, []); 27 | 28 | const onUpdateActiveLink = (value) => { 29 | setActiveLink(value); 30 | }; 31 | 32 | return ( 33 | <> 34 | 35 | 36 | 37 | Logo 38 | 39 | 40 | 41 | 42 | 43 | 74 | 75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 | 87 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | ); 97 | }; 98 | 99 | export default Header; 100 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /day-18/react-bootstrap/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Essential JavaScript for React 8 | 9 | 10 |

Essential JavaScript for React

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-2/script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | // JavaScript Essential for React.js 6 | // var, let, const 7 | 8 | 9 | // function statement 10 | // statement => command 11 | 12 | 13 | // function expression 14 | // expression => value 15 | // arrow function 16 | 17 | 18 | // template string 19 | 20 | 21 | // conditionals 22 | // ternary 23 | // logical and operator (&&) 24 | // logical or operator (||) 25 | // short circuit 26 | 27 | 28 | // array helper method (map, filter, find, reduce) 29 | // imperative coding 30 | // declarative coding 31 | 32 | 33 | // destructuring, rest, spread 34 | 35 | 36 | // promise 37 | // fetch 38 | // async / await 39 | 40 | 41 | // class 42 | // encapsulation 43 | // inheritance 44 | // abstraction 45 | // polymorphism 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /day-25/react-router-practice/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-25/react-router-practice/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-25/react-router-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router-practice", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "bootstrap": "^5.2.0", 13 | "react": "^18.2.0", 14 | "react-bootstrap": "^2.5.0", 15 | "react-dom": "^18.2.0", 16 | "react-router-dom": "6" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.0.17", 20 | "@types/react-dom": "^18.0.6", 21 | "@vitejs/plugin-react": "^2.0.1", 22 | "vite": "^3.0.7" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /day-25/react-router-practice/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-25/react-router-practice/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-25/react-router-practice/src/App.css -------------------------------------------------------------------------------- /day-25/react-router-practice/src/App.jsx: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | import React from 'react'; 3 | import { BrowserRouter, Route, Routes } from 'react-router-dom'; 4 | import About from './assets/components/About'; 5 | import Company from './assets/components/Company'; 6 | import Contact from './assets/components/Contact'; 7 | import Founder from './assets/components/Founder'; 8 | // import Footer from './assets/components/Footer'; 9 | import Header from './assets/components/Header'; 10 | import Home from './assets/components/Home'; 11 | import NotFound from './assets/components/NotFound'; 12 | 13 | // complete video upto 31 minute 14 | const App = () => { 15 | return ( 16 |
17 | 18 |
19 | 20 | 21 | }> 22 | }> 23 | 24 | }> 25 | }> 26 | }> 27 | 28 | 29 | }> 30 | }> 31 | 32 | 33 | {/*
36 | ); 37 | }; 38 | 39 | export default App; -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/components/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Col from 'react-bootstrap/esm/Col'; 3 | import Container from 'react-bootstrap/esm/Container'; 4 | import ListGroup from 'react-bootstrap/ListGroup'; 5 | import Row from 'react-bootstrap/Row'; 6 | import { Link, Outlet } from 'react-router-dom'; 7 | 8 | 9 | 10 | 11 | const About = () => { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | Company 19 | 20 | 21 | 22 | Founder 23 | 24 | 25 | 26 | 27 |

About Component

28 | 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default About; -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/components/Company.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useLocation, useParams } from 'react-router-dom'; 3 | 4 | 5 | 6 | 7 | const Company = () => { 8 | const {name} = useParams(); 9 | const location = useLocation(); 10 | console.log(location, 'location'); 11 | 12 | return ( 13 |
14 |

This is Company Component

15 |

Company: {name}

16 |
17 | ); 18 | }; 19 | 20 | export default Company; -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/components/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Contact = () => { 4 | return ( 5 |
6 |

Contact Component

7 |
8 | ); 9 | }; 10 | 11 | export default Contact; -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 |

Footer Component

7 |
8 | ); 9 | }; 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/components/Founder.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { useNavigate } from 'react-router-dom'; 3 | 4 | 5 | 6 | 7 | const Founder = () => { 8 | 9 | const navigate = useNavigate(); 10 | 11 | useEffect(() => { 12 | navigate('/home'); 13 | }, []) 14 | return ( 15 |
16 |

This is Founder Component

17 |
18 | ); 19 | }; 20 | 21 | export default Founder; -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Button from "react-bootstrap/Button"; 3 | import Container from "react-bootstrap/Container"; 4 | import Form from "react-bootstrap/Form"; 5 | import Nav from "react-bootstrap/Nav"; 6 | import Navbar from "react-bootstrap/Navbar"; 7 | import { NavLink } from "react-router-dom"; 8 | 9 | const Header = () => { 10 | let activeStyle = { 11 | textDecoration: "underline", 12 | color: "black", 13 | }; 14 | 15 | let activeClassName = "isActive nav-link"; 16 | 17 | return ( 18 | <> 19 | 20 | 21 | React Router Dom 22 | 23 | 24 | 50 |
51 | 57 | 58 | 59 |
60 | 61 | 62 | 63 | ); 64 | }; 65 | 66 | export default Header; 67 | -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/components/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Home = () => { 4 | return ( 5 |
6 |

Home Component

7 |
8 | ); 9 | }; 10 | 11 | export default Home; -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/components/NotFound.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const NotFound = () => { 4 | return ( 5 |
6 |

404 Not Found

7 |
8 | ); 9 | }; 10 | 11 | export default NotFound; -------------------------------------------------------------------------------- /day-25/react-router-practice/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-25/react-router-practice/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-25/react-router-practice/src/index.css -------------------------------------------------------------------------------- /day-25/react-router-practice/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /day-25/react-router-practice/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "global-state-concepts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.17", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.1", 19 | "vite": "^3.0.7" 20 | } 21 | } -------------------------------------------------------------------------------- /day-28/global-state-concepts/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-28/global-state-concepts/src/App.css -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Counter from './components/Counter'; 3 | 4 | 5 | 6 | 7 | 8 | 9 | const App = () => { 10 | 11 | return ( 12 |
13 | 14 |
15 | ); 16 | }; 17 | 18 | export default App; -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/components/Counter.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { CounterContext } from '../context/CounterContext'; 3 | 4 | 5 | 6 | 7 | 8 | 9 | const Counter = () => { 10 | 11 | const {count, handleIncrement, handleDecrement, handleReset} = useContext(CounterContext); 12 | 13 | 14 | return ( 15 |
16 |

Count: {count}

17 | 18 |
19 | 20 | 21 | 22 | 23 |
24 | ); 25 | }; 26 | 27 | export default Counter; -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/context/CounterContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useReducer } from "react"; 2 | import { DECREMENT, INCREMENT, RESET } from "./actions"; 3 | import { countReducer } from "./countReducer"; 4 | 5 | 6 | 7 | // create a context 8 | export const CounterContext = createContext(); 9 | 10 | 11 | // create a provide 12 | export const CounterProvider = ({children}) => { 13 | 14 | // const [count, setCount] = useState(0); 15 | const initialState = 0; 16 | const [count, dispatch] = useReducer(countReducer, initialState); 17 | 18 | 19 | 20 | // action creator 21 | const countIncrement = (dispatch, num) => { 22 | return dispatch({ type: INCREMENT, payload: num}); 23 | } 24 | 25 | const handleIncrement = () => { 26 | 27 | // setCount((prevCount) => prevCount + 1); 28 | // countIncrement(dispatch, 10); 29 | 30 | dispatch({ type: INCREMENT, payload: 10}); 31 | } 32 | 33 | const handleDecrement = () => { 34 | 35 | // setCount((prevCount) => prevCount - 1); 36 | dispatch({ type: DECREMENT, payload: 5}); 37 | } 38 | 39 | const handleReset = () => { 40 | 41 | // setCount(0); 42 | dispatch({ type: RESET, payload: 0}); 43 | } 44 | 45 | const value = { 46 | count, 47 | handleIncrement, 48 | handleDecrement, 49 | handleReset 50 | } 51 | 52 | return ( 53 | 54 | { children } 55 | 56 | ) 57 | } 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/context/actions.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | export const INCREMENT = 'INCREMENT'; 5 | export const DECREMENT = 'DECREMENT'; 6 | export const RESET = 'RESET'; 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/context/countReducer.js: -------------------------------------------------------------------------------- 1 | import { DECREMENT, INCREMENT, RESET } from "./actions"; 2 | 3 | 4 | 5 | 6 | export const countReducer = (state, action) => { 7 | 8 | // if(action.type === INCREMENT) { 9 | // return state + action.payload; 10 | // } else { 11 | // return state; 12 | // } 13 | 14 | const {type, payload} = action; 15 | switch (type) { 16 | 17 | case INCREMENT: 18 | return state + payload; 19 | 20 | case DECREMENT: 21 | return state - payload; 22 | 23 | case RESET: 24 | return payload; 25 | 26 | default: 27 | return state; 28 | } 29 | 30 | } 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-28/global-state-concepts/src/index.css -------------------------------------------------------------------------------- /day-28/global-state-concepts/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import { CounterProvider } from './context/CounterContext' 5 | import './index.css' 6 | 7 | 8 | 9 | 10 | ReactDOM.createRoot(document.getElementById('root')).render( 11 | 12 | 13 | 14 | 15 | 16 | ) 17 | -------------------------------------------------------------------------------- /day-28/global-state-concepts/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Essential JavaScript for React 8 | 9 | 10 |

Essential JavaScript for React

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-3/note.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Day-2 and day-3 same 4 | -------------------------------------------------------------------------------- /day-3/script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | // JavaScript Essential for React.js 6 | // var, let, const 7 | 8 | 9 | // function statement 10 | // statement => command 11 | 12 | 13 | // function expression 14 | // expression => value 15 | // arrow function 16 | 17 | 18 | // template string 19 | 20 | 21 | // conditionals 22 | // ternary 23 | // logical and operator (&&) 24 | // logical or operator (||) 25 | // short circuit 26 | 27 | 28 | // array helper method (map, filter, find, reduce) 29 | // imperative coding 30 | // declarative coding 31 | 32 | 33 | // destructuring, rest, spread 34 | 35 | 36 | // promise 37 | // fetch 38 | // async / await 39 | 40 | 41 | // class 42 | // encapsulation 43 | // inheritance 44 | // abstraction 45 | // polymorphism 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /day-32/my-project/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [{package.json,*.yml}] 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [*.md] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /day-32/my-project/.env.example: -------------------------------------------------------------------------------- 1 | HOST=0.0.0.0 2 | PORT=1337 3 | APP_KEYS="toBeModified1,toBeModified2" 4 | API_TOKEN_SALT=tobemodified 5 | ADMIN_JWT_SECRET=tobemodified 6 | JWT_SECRET=tobemodified 7 | -------------------------------------------------------------------------------- /day-32/my-project/.eslintignore: -------------------------------------------------------------------------------- 1 | .cache 2 | build 3 | **/node_modules/** 4 | -------------------------------------------------------------------------------- /day-32/my-project/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "eslint:recommended", 4 | "env": { 5 | "commonjs": true, 6 | "es6": true, 7 | "node": true, 8 | "browser": false 9 | }, 10 | "parserOptions": { 11 | "ecmaFeatures": { 12 | "experimentalObjectRestSpread": true, 13 | "jsx": false 14 | }, 15 | "sourceType": "module" 16 | }, 17 | "globals": { 18 | "strapi": true 19 | }, 20 | "rules": { 21 | "indent": ["error", 2, { "SwitchCase": 1 }], 22 | "linebreak-style": ["error", "unix"], 23 | "no-console": 0, 24 | "quotes": ["error", "single"], 25 | "semi": ["error", "always"] 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /day-32/my-project/.gitignore: -------------------------------------------------------------------------------- 1 | ############################ 2 | # OS X 3 | ############################ 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | Icon 9 | .Spotlight-V100 10 | .Trashes 11 | ._* 12 | 13 | 14 | ############################ 15 | # Linux 16 | ############################ 17 | 18 | *~ 19 | 20 | 21 | ############################ 22 | # Windows 23 | ############################ 24 | 25 | Thumbs.db 26 | ehthumbs.db 27 | Desktop.ini 28 | $RECYCLE.BIN/ 29 | *.cab 30 | *.msi 31 | *.msm 32 | *.msp 33 | 34 | 35 | ############################ 36 | # Packages 37 | ############################ 38 | 39 | *.7z 40 | *.csv 41 | *.dat 42 | *.dmg 43 | *.gz 44 | *.iso 45 | *.jar 46 | *.rar 47 | *.tar 48 | *.zip 49 | *.com 50 | *.class 51 | *.dll 52 | *.exe 53 | *.o 54 | *.seed 55 | *.so 56 | *.swo 57 | *.swp 58 | *.swn 59 | *.swm 60 | *.out 61 | *.pid 62 | 63 | 64 | ############################ 65 | # Logs and databases 66 | ############################ 67 | 68 | .tmp 69 | *.log 70 | *.sql 71 | *.sqlite 72 | *.sqlite3 73 | 74 | 75 | ############################ 76 | # Misc. 77 | ############################ 78 | 79 | *# 80 | ssl 81 | .idea 82 | nbproject 83 | public/uploads/* 84 | !public/uploads/.gitkeep 85 | 86 | ############################ 87 | # Node.js 88 | ############################ 89 | 90 | lib-cov 91 | lcov.info 92 | pids 93 | logs 94 | results 95 | node_modules 96 | .node_history 97 | 98 | ############################ 99 | # Tests 100 | ############################ 101 | 102 | testApp 103 | coverage 104 | 105 | ############################ 106 | # Strapi 107 | ############################ 108 | 109 | .env 110 | license.txt 111 | exports 112 | *.cache 113 | build 114 | .strapi-updater.json 115 | -------------------------------------------------------------------------------- /day-32/my-project/README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Getting started with Strapi 2 | 3 | Strapi comes with a full featured [Command Line Interface](https://docs.strapi.io/developer-docs/latest/developer-resources/cli/CLI.html) (CLI) which lets you scaffold and manage your project in seconds. 4 | 5 | ### `develop` 6 | 7 | Start your Strapi application with autoReload enabled. [Learn more](https://docs.strapi.io/developer-docs/latest/developer-resources/cli/CLI.html#strapi-develop) 8 | 9 | ``` 10 | npm run develop 11 | # or 12 | yarn develop 13 | ``` 14 | 15 | ### `start` 16 | 17 | Start your Strapi application with autoReload disabled. [Learn more](https://docs.strapi.io/developer-docs/latest/developer-resources/cli/CLI.html#strapi-start) 18 | 19 | ``` 20 | npm run start 21 | # or 22 | yarn start 23 | ``` 24 | 25 | ### `build` 26 | 27 | Build your admin panel. [Learn more](https://docs.strapi.io/developer-docs/latest/developer-resources/cli/CLI.html#strapi-build) 28 | 29 | ``` 30 | npm run build 31 | # or 32 | yarn build 33 | ``` 34 | 35 | ## ⚙️ Deployment 36 | 37 | Strapi gives you many possible deployment options for your project. Find the one that suits you on the [deployment section of the documentation](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment.html). 38 | 39 | ## 📚 Learn more 40 | 41 | - [Resource center](https://strapi.io/resource-center) - Strapi resource center. 42 | - [Strapi documentation](https://docs.strapi.io) - Official Strapi documentation. 43 | - [Strapi tutorials](https://strapi.io/tutorials) - List of tutorials made by the core team and the community. 44 | - [Strapi blog](https://docs.strapi.io) - Official Strapi blog containing articles made by the Strapi team and the community. 45 | - [Changelog](https://strapi.io/changelog) - Find out about the Strapi product updates, new features and general improvements. 46 | 47 | Feel free to check out the [Strapi GitHub repository](https://github.com/strapi/strapi). Your feedback and contributions are welcome! 48 | 49 | ## ✨ Community 50 | 51 | - [Discord](https://discord.strapi.io) - Come chat with the Strapi community including the core team. 52 | - [Forum](https://forum.strapi.io/) - Place to discuss, ask questions and find answers, show your Strapi project and get feedback or just talk with other Community members. 53 | - [Awesome Strapi](https://github.com/strapi/awesome-strapi) - A curated list of awesome things related to Strapi. 54 | 55 | --- 56 | 57 | 🤫 Psst! [Strapi is hiring](https://strapi.io/careers). 58 | -------------------------------------------------------------------------------- /day-32/my-project/config/admin.js: -------------------------------------------------------------------------------- 1 | module.exports = ({ env }) => ({ 2 | auth: { 3 | secret: env('ADMIN_JWT_SECRET'), 4 | }, 5 | apiToken: { 6 | salt: env('API_TOKEN_SALT'), 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /day-32/my-project/config/api.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rest: { 3 | defaultLimit: 25, 4 | maxLimit: 100, 5 | withCount: true, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /day-32/my-project/config/database.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = ({ env }) => ({ 4 | connection: { 5 | client: 'sqlite', 6 | connection: { 7 | filename: path.join(__dirname, '..', env('DATABASE_FILENAME', '.tmp/data.db')), 8 | }, 9 | useNullAsDefault: true, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /day-32/my-project/config/middlewares.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'strapi::errors', 3 | 'strapi::security', 4 | 'strapi::cors', 5 | 'strapi::poweredBy', 6 | 'strapi::logger', 7 | 'strapi::query', 8 | 'strapi::body', 9 | 'strapi::session', 10 | 'strapi::favicon', 11 | 'strapi::public', 12 | ]; 13 | -------------------------------------------------------------------------------- /day-32/my-project/config/server.js: -------------------------------------------------------------------------------- 1 | module.exports = ({ env }) => ({ 2 | host: env('HOST', '0.0.0.0'), 3 | port: env.int('PORT', 1337), 4 | app: { 5 | keys: env.array('APP_KEYS'), 6 | }, 7 | }); 8 | -------------------------------------------------------------------------------- /day-32/my-project/database/migrations/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-32/my-project/database/migrations/.gitkeep -------------------------------------------------------------------------------- /day-32/my-project/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-32/my-project/favicon.ico -------------------------------------------------------------------------------- /day-32/my-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.1.0", 5 | "description": "A Strapi application", 6 | "scripts": { 7 | "develop": "strapi develop", 8 | "start": "strapi start", 9 | "build": "strapi build", 10 | "strapi": "strapi" 11 | }, 12 | "devDependencies": {}, 13 | "dependencies": { 14 | "@strapi/strapi": "4.3.4", 15 | "@strapi/plugin-users-permissions": "4.3.4", 16 | "@strapi/plugin-i18n": "4.3.4", 17 | "better-sqlite3": "7.4.6" 18 | }, 19 | "author": { 20 | "name": "A Strapi developer" 21 | }, 22 | "strapi": { 23 | "uuid": "61c953bd-54f1-4fa7-b000-c2ee74065300" 24 | }, 25 | "engines": { 26 | "node": ">=12.x.x <=16.x.x", 27 | "npm": ">=6.0.0" 28 | }, 29 | "license": "MIT" 30 | } 31 | -------------------------------------------------------------------------------- /day-32/my-project/public/robots.txt: -------------------------------------------------------------------------------- 1 | # To prevent search engines from seeing the site altogether, uncomment the next two lines: 2 | # User-Agent: * 3 | # Disallow: / 4 | -------------------------------------------------------------------------------- /day-32/my-project/public/uploads/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-32/my-project/public/uploads/.gitkeep -------------------------------------------------------------------------------- /day-32/my-project/src/admin/app.example.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | locales: [ 3 | // 'ar', 4 | // 'fr', 5 | // 'cs', 6 | // 'de', 7 | // 'dk', 8 | // 'es', 9 | // 'he', 10 | // 'id', 11 | // 'it', 12 | // 'ja', 13 | // 'ko', 14 | // 'ms', 15 | // 'nl', 16 | // 'no', 17 | // 'pl', 18 | // 'pt-BR', 19 | // 'pt', 20 | // 'ru', 21 | // 'sk', 22 | // 'sv', 23 | // 'th', 24 | // 'tr', 25 | // 'uk', 26 | // 'vi', 27 | // 'zh-Hans', 28 | // 'zh', 29 | ], 30 | }; 31 | 32 | const bootstrap = app => { 33 | console.log(app); 34 | }; 35 | 36 | export default { 37 | config, 38 | bootstrap, 39 | }; 40 | -------------------------------------------------------------------------------- /day-32/my-project/src/admin/webpack.config.example.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* eslint-disable no-unused-vars */ 4 | module.exports = (config, webpack) => { 5 | // Note: we provide webpack above so you should not `require` it 6 | // Perform customizations to webpack config 7 | // Important: return the modified config 8 | return config; 9 | }; 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-32/my-project/src/api/.gitkeep -------------------------------------------------------------------------------- /day-32/my-project/src/api/article/content-types/article/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "kind": "collectionType", 3 | "collectionName": "articles", 4 | "info": { 5 | "singularName": "article", 6 | "pluralName": "articles", 7 | "displayName": "Article", 8 | "description": "" 9 | }, 10 | "options": { 11 | "draftAndPublish": false 12 | }, 13 | "pluginOptions": {}, 14 | "attributes": { 15 | "title": { 16 | "type": "string", 17 | "required": true, 18 | "maxLength": 100, 19 | "minLength": 10 20 | }, 21 | "description": { 22 | "type": "richtext", 23 | "required": true, 24 | "maxLength": 500, 25 | "minLength": 50 26 | }, 27 | "categories": { 28 | "type": "relation", 29 | "relation": "manyToMany", 30 | "target": "api::category.category", 31 | "inversedBy": "articles" 32 | }, 33 | "author": { 34 | "type": "relation", 35 | "relation": "manyToOne", 36 | "target": "plugin::users-permissions.user", 37 | "inversedBy": "articles" 38 | }, 39 | "img": { 40 | "allowedTypes": [ 41 | "images" 42 | ], 43 | "type": "media", 44 | "multiple": false, 45 | "required": true 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/article/controllers/article.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * article controller 5 | */ 6 | 7 | const { createCoreController } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreController('api::article.article'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/article/routes/article.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * article router. 5 | */ 6 | 7 | const { createCoreRouter } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreRouter('api::article.article'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/article/services/article.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * article service. 5 | */ 6 | 7 | const { createCoreService } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreService('api::article.article'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/category/content-types/category/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "kind": "collectionType", 3 | "collectionName": "categories", 4 | "info": { 5 | "singularName": "category", 6 | "pluralName": "categories", 7 | "displayName": "Category", 8 | "description": "" 9 | }, 10 | "options": { 11 | "draftAndPublish": true 12 | }, 13 | "pluginOptions": {}, 14 | "attributes": { 15 | "name": { 16 | "type": "string", 17 | "required": true, 18 | "unique": true, 19 | "minLength": 3, 20 | "maxLength": 30, 21 | "private": true 22 | }, 23 | "slug": { 24 | "type": "uid", 25 | "targetField": "name", 26 | "required": true 27 | }, 28 | "articles": { 29 | "type": "relation", 30 | "relation": "manyToMany", 31 | "target": "api::article.article", 32 | "mappedBy": "categories" 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/category/controllers/category.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * category controller 5 | */ 6 | 7 | const { createCoreController } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreController('api::category.category'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/category/routes/category.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * category router. 5 | */ 6 | 7 | const { createCoreRouter } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreRouter('api::category.category'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/category/services/category.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * category service. 5 | */ 6 | 7 | const { createCoreService } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreService('api::category.category'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/home/content-types/home/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "kind": "singleType", 3 | "collectionName": "homes", 4 | "info": { 5 | "singularName": "home", 6 | "pluralName": "homes", 7 | "displayName": "Home", 8 | "description": "" 9 | }, 10 | "options": { 11 | "draftAndPublish": true 12 | }, 13 | "pluginOptions": {}, 14 | "attributes": { 15 | "title": { 16 | "type": "string", 17 | "required": true 18 | }, 19 | "slug": { 20 | "type": "uid", 21 | "targetField": "title", 22 | "required": true 23 | }, 24 | "homeFeathured": { 25 | "type": "component", 26 | "repeatable": false, 27 | "component": "layout.feathured-post" 28 | }, 29 | "homePopular": { 30 | "type": "component", 31 | "repeatable": false, 32 | "component": "layout.popular-post" 33 | }, 34 | "feathuredArea": { 35 | "type": "dynamiczone", 36 | "components": [ 37 | "layout.feathured-post", 38 | "layout.popular-post" 39 | ] 40 | }, 41 | "mainMenu": { 42 | "type": "component", 43 | "repeatable": true, 44 | "component": "layout.menu" 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/home/controllers/home.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * home controller 5 | */ 6 | 7 | const { createCoreController } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreController('api::home.home'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/home/routes/home.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * home router. 5 | */ 6 | 7 | const { createCoreRouter } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreRouter('api::home.home'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/api/home/services/home.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * home service. 5 | */ 6 | 7 | const { createCoreService } = require('@strapi/strapi').factories; 8 | 9 | module.exports = createCoreService('api::home.home'); 10 | -------------------------------------------------------------------------------- /day-32/my-project/src/components/layout/feathured-post.json: -------------------------------------------------------------------------------- 1 | { 2 | "collectionName": "components_layout_feathured_posts", 3 | "info": { 4 | "displayName": "feathuredPost", 5 | "icon": "angle-double-right", 6 | "description": "" 7 | }, 8 | "options": {}, 9 | "attributes": { 10 | "article": { 11 | "type": "relation", 12 | "relation": "oneToOne", 13 | "target": "api::article.article" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /day-32/my-project/src/components/layout/menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "collectionName": "components_layout_menus", 3 | "info": { 4 | "displayName": "menu", 5 | "icon": "box" 6 | }, 7 | "options": {}, 8 | "attributes": { 9 | "level": { 10 | "type": "string", 11 | "required": true 12 | }, 13 | "link": { 14 | "type": "string", 15 | "required": true 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /day-32/my-project/src/components/layout/popular-post.json: -------------------------------------------------------------------------------- 1 | { 2 | "collectionName": "components_layout_popular_posts", 3 | "info": { 4 | "displayName": "PopularPost", 5 | "icon": "archway", 6 | "description": "" 7 | }, 8 | "options": {}, 9 | "attributes": { 10 | "category": { 11 | "type": "relation", 12 | "relation": "oneToOne", 13 | "target": "api::category.category" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /day-32/my-project/src/extensions/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-32/my-project/src/extensions/.gitkeep -------------------------------------------------------------------------------- /day-32/my-project/src/extensions/users-permissions/content-types/user/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "kind": "collectionType", 3 | "collectionName": "up_users", 4 | "info": { 5 | "name": "user", 6 | "description": "", 7 | "singularName": "user", 8 | "pluralName": "users", 9 | "displayName": "User" 10 | }, 11 | "options": { 12 | "draftAndPublish": false, 13 | "timestamps": true 14 | }, 15 | "attributes": { 16 | "username": { 17 | "type": "string", 18 | "minLength": 3, 19 | "unique": true, 20 | "configurable": false, 21 | "required": true 22 | }, 23 | "email": { 24 | "type": "email", 25 | "minLength": 6, 26 | "configurable": false, 27 | "required": true 28 | }, 29 | "provider": { 30 | "type": "string", 31 | "configurable": false 32 | }, 33 | "password": { 34 | "type": "password", 35 | "minLength": 6, 36 | "configurable": false, 37 | "private": true 38 | }, 39 | "resetPasswordToken": { 40 | "type": "string", 41 | "configurable": false, 42 | "private": true 43 | }, 44 | "confirmationToken": { 45 | "type": "string", 46 | "configurable": false, 47 | "private": true 48 | }, 49 | "confirmed": { 50 | "type": "boolean", 51 | "default": false, 52 | "configurable": false 53 | }, 54 | "blocked": { 55 | "type": "boolean", 56 | "default": false, 57 | "configurable": false 58 | }, 59 | "role": { 60 | "type": "relation", 61 | "relation": "manyToOne", 62 | "target": "plugin::users-permissions.role", 63 | "inversedBy": "users", 64 | "configurable": false 65 | }, 66 | "articles": { 67 | "type": "relation", 68 | "relation": "oneToMany", 69 | "target": "api::article.article", 70 | "mappedBy": "author" 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /day-32/my-project/src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | /** 5 | * An asynchronous register function that runs before 6 | * your application is initialized. 7 | * 8 | * This gives you an opportunity to extend code. 9 | */ 10 | register(/*{ strapi }*/) {}, 11 | 12 | /** 13 | * An asynchronous bootstrap function that runs before 14 | * your application gets started. 15 | * 16 | * This gives you an opportunity to set up your data model, 17 | * run jobs, or perform some special logic. 18 | */ 19 | bootstrap(/*{ strapi }*/) {}, 20 | }; 21 | -------------------------------------------------------------------------------- /day-4/classNote.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // what is react 4 | // => A JavaScript library for building user interfaces 5 | 6 | 7 | 8 | // what is user interface 9 | 10 | 11 | // why front end library or frameworks 12 | // solve some common problem 13 | // provide "blue print" for apps 14 | // force you "This is how you should design a JS app". 15 | // help to understand practical aspects of javascript 16 | 17 | 18 | 19 | 20 | // how front end library or frameworks works 21 | // how regular application works 22 | // how SPA works 23 | 24 | 25 | // why react 26 | 27 | 28 | 29 | 30 | // benefit's of react 31 | // composition - to combine simple functions to build more complicated ones 32 | // declarative code 33 | // unidirectional data-flow 34 | // react is javascript 35 | 36 | 37 | 38 | 39 | // create-react-app 40 | // combine multiple files -> webpack, parcel 41 | // processing next generation javascript -> babel 42 | // code quality check -> eslint 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /day-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introduction to React 8 | 9 | 10 | 11 |
12 | 13 | 17 | 21 | 27 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-4/my-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-4/my-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-4/my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.15", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.0", 19 | "vite": "^3.0.0" 20 | } 21 | } -------------------------------------------------------------------------------- /day-4/my-app/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-4/my-app/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /day-4/my-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import './App.css' 4 | 5 | function App() { 6 | const [count, setCount] = useState(0) 7 | 8 | return ( 9 |
10 |
11 | 12 | Vite logo 13 | 14 | 15 | React logo 16 | 17 |
18 |

Vite + React

19 |
20 | 23 |

24 | Edit src/App.jsx and save to test HMR 25 |

26 |
27 |

28 | Click on the Vite and React logos to learn more 29 |

30 |
31 | ) 32 | } 33 | 34 | export default App 35 | -------------------------------------------------------------------------------- /day-4/my-app/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-4/my-app/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /day-4/my-app/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /day-4/my-app/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /day-6/note.js: -------------------------------------------------------------------------------- 1 | 2 | // Day-6 and day-7 same video -------------------------------------------------------------------------------- /day-7/classNote.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /************************************************************************************************************ 6 | * Day-7 class note 7 | ************************************************************************************************************/ 8 | 9 | // synthetic event 10 | 11 | 12 | // when component re-render? 13 | // state update 14 | // force update 15 | // props change 16 | 17 | 18 | // jsx rules 19 | // wrapped parent element by using div or react fragment 20 | // must use closing tag 21 | // must be careful of javascript reserved keyword 22 | // dynamic value written in curly braces{} 23 | // dynamic value must be expression 24 | 25 | 26 | // css style 27 | // inline css 28 | // external css 29 | // module css 30 | // component based css 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-7/my-app/.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 | -------------------------------------------------------------------------------- /day-7/my-app/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /day-7/my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.3.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day-7/my-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-7/my-app/public/favicon.ico -------------------------------------------------------------------------------- /day-7/my-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-7/my-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-7/my-app/public/logo192.png -------------------------------------------------------------------------------- /day-7/my-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/react-bootcamp/b2a13a37200dbf54eb4349501b22a0a27992644b/day-7/my-app/public/logo512.png -------------------------------------------------------------------------------- /day-7/my-app/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 | -------------------------------------------------------------------------------- /day-7/my-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-7/my-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day-7/my-app/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import IsOddOrEven from './IsOddOrEven'; 3 | import RandomCards from './RandomCards'; 4 | 5 | 6 | 7 | 8 | function App() { 9 | 10 | const [count, setCount] = useState(0) 11 | const handleIncrement = (num) => setCount(count + num); 12 | const handleDecrement = (num) => setCount(prevCount => prevCount - num) 13 | const handleReset = () => setCount(0); 14 | 15 | const randomValues = [1, 3, 6, 7, 9, 10]; 16 | const [pickedValue, setPickedValue] = useState(null); 17 | 18 | 19 | 20 | return ( 21 | <> 22 |

Count: {count}

23 |
24 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | 36 | 37 | 38 | 39 | 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /day-7/my-app/src/App.module.css: -------------------------------------------------------------------------------- 1 | .even { 2 | color: green; 3 | } 4 | 5 | .odd { 6 | color: red; 7 | } 8 | -------------------------------------------------------------------------------- /day-7/my-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /day-7/my-app/src/IsOddOrEven.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './App.module.css'; 3 | 4 | 5 | const IsOddOrEven = ({value}) => { 6 | 7 | const oddOrEven = value % 2 === 0 ? 'even' : 'odd'; 8 | 9 | return ( 10 | <> 11 | {/*
Number is {value && value % 2 === 0 ? Even : Odd}
*/} 12 |
13 | 14 |
15 | Number is {' '} 16 | { 17 | value && {oddOrEven} 18 | } 19 |
20 |
21 | 22 | ); 23 | }; 24 | 25 | export default IsOddOrEven; -------------------------------------------------------------------------------- /day-7/my-app/src/RandomCards.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const RandomCards = ({randomValues, setPickedValue}) => { 4 | return ( 5 |
6 | { 7 | randomValues.map((randomValue, index) =>
setPickedValue(randomValue)}>{randomValue}
) 17 | } 18 |
19 | ); 20 | }; 21 | 22 | export default RandomCards; -------------------------------------------------------------------------------- /day-7/my-app/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 | -------------------------------------------------------------------------------- /day-7/my-app/src/index.js: -------------------------------------------------------------------------------- 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(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /day-7/my-app/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-7/my-app/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /day-7/my-app/src/setupTests.js: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /day-7/post.js: -------------------------------------------------------------------------------- 1 | 2 | // Day-7 (27-July-2022) 3 | // 1.Complete Practicing the Live Class video (Video Link) 4 | // 2.Submit your notes(Research and study if necessary) with code sample(Github) 5 | // -when component re-renders 6 | // - when to write state and when to use simple variable 7 | // - way of Writing CSS Styles in React component 8 | // - What is JSX, what to remember during writing JSX 9 | // - how to communicate with parent and children in respective of data 10 | 11 | 12 | 13 | 14 | #ReactBootCamp 15 | #Day_7 16 | Code Sample: 17 | 18 | ১. একটা কম্পোনেন্ট কখন re-render হয়? 19 | 20 | => একটা কম্পোনেন্ট re-render হবে তখন, যখন এর state update হবে, props change হবে এবং force update হবে । 21 | 22 | 23 | ২. কখন state এবং কখন variable declare করতে হয়? 24 | 25 | => আমরা সাধারনত একটা variable কে ট্র্যাক করে Vanila JavaScript এ কাজ করতে পারি। কিন্তু, সেটা React এ হয় না। কোন variable 26 | কে ট্র্যাক করে যদি কাজ করি, পরে যদি variable এর ভ্যালু চেঞ্জ হয় তাহলে component re-render হয় না। ফলে সেটা UI তে দেখা যায় না। আর আমরা জানি কম্পোনেন্ট re-render হবে তখনই, যখন এর state update হবে । তাই যখন একটা variable কে পরবর্তীতে modify বা update করা লাগবে অথবা একটা কম্পোনেন্টকে re-renderকরার প্রয়োজন হবে এমন সিচুয়েশনে state অন্যথায় simple variable ব্যবহার করতে পারি। 27 | 28 | ৩. React এ সিএসএস কিভাবে লেখা যায়? 29 | 30 | => React এ কয়েকভাবে সিএসএস লেখা যায় --- 31 | -- inline style ইউজ করে 32 | -- external file এ সিএসএস লিখে 33 | -- modular way তে সিএসএস লিখে 34 | -- component based সিএসএস লিখে 35 | 36 | 37 | 38 | 39 | ৪. JSX কি? JSX কোড লেখার সময় কি কি বিষয় ্মনে রাখা উচিৎ? 40 | 41 | => JSX এর পূর্নরুপ হচ্ছে - JavaScript XML। এটা দেখতে html এর মত কিন্তু html নয়। এটাকে Synthetic sugar বলে। 42 | JSX কোড লেখার সময় যেসব বিষয় খেয়াল রাখা উচিৎ --- 43 | 44 | ১. JSX লেখার সময় অবশ্যই parent element এ Div অথবা React Fragment ব্যবহার করতে হবে। 45 | ২. প্রত্যেকটা element বা tag অবশ্যই closing করে দিতে হবে। 46 | ৩. JavaScript reserved keyword গুলো যাতে html tag এ ব্যবহার না হয়। 47 | ৪. Dynamic value কার্লি ব্রাকেট {} এর মাঝে লিখতে হয় এবং সেটা Expression হতে হবে। 48 | 49 | 50 | 51 | 52 | 53 | ৫. কিভাবে parent কম্পোনেন্ট এবং children কম্পোনেন্ট এর মাঝে ডাটা আদান-প্রদান করা হয়? 54 | => React unidirectional data flow maintain করে parent থেকে children এ props এর মাধ্যমে ডাটা pass করে। 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /day-8/quiz-game/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-8/quiz-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz Game 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-8/quiz-game/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quiz-game", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.15", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.0", 19 | "vite": "^3.0.0" 20 | } 21 | } -------------------------------------------------------------------------------- /day-8/quiz-game/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-8/quiz-game/src/AnswerCard.css: -------------------------------------------------------------------------------- 1 | .containerLi { 2 | border: 2px solid grey; 3 | margin: 10px 0; 4 | padding: 10px; 5 | border-radius: 4px; 6 | } 7 | 8 | .containerLi:hover { 9 | cursor: pointer; 10 | border: 2px solid black; 11 | } 12 | 13 | .correct_answer { 14 | border: 2px solid green !important; 15 | } 16 | 17 | .wrong_answer { 18 | border: 2px solid red !important; 19 | } 20 | 21 | .disable_answer { 22 | pointer-events: none; 23 | } 24 | -------------------------------------------------------------------------------- /day-8/quiz-game/src/AnswerCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './AnswerCard.css'; 3 | 4 | 5 | 6 | const AnswerCard = ({answer, pickAnswer, correctAnswer, pickedAnswer}) => { 7 | 8 | // user selected answer 9 | // correct answer 10 | // picked answer 11 | 12 | const isRightAnswer = pickedAnswer && answer === correctAnswer; 13 | const isWrongAnswer = pickedAnswer && answer === pickedAnswer && pickedAnswer !== correctAnswer; 14 | 15 | const correctClass = isRightAnswer ? 'correct_answer' : ''; 16 | const wrongClass = isWrongAnswer ? 'wrong_answer' : ''; 17 | const disableClass = pickedAnswer && 'disable_answer'; 18 | 19 | return ( 20 |
pickAnswer(answer)} className={`containerLi ${correctClass} ${wrongClass} ${disableClass}`}> 21 |
  • {answer}
    • 22 |
    23 | ); 24 | }; 25 | 26 | export default AnswerCard; -------------------------------------------------------------------------------- /day-8/quiz-game/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Tahoma, Geneva, Verdana, sans-serif, Helvetica, sans-serif; 5 | } 6 | 7 | .container { 8 | height: 90vh; 9 | background-color: #fab1a0; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .button { 16 | padding: 12px 8vw; 17 | border-radius: 5px; 18 | cursor: pointer; 19 | font-size: 25px; 20 | font-weight: 600; 21 | } 22 | 23 | .question-card { 24 | background-color: #dfe6e9; 25 | padding: 50px; 26 | box-shadow: 10px 20px 40px gray; 27 | width: 60vw; 28 | border-radius: 5px; 29 | } 30 | 31 | .nextButton { 32 | padding: 10px 50px; 33 | border-radius: 5px; 34 | cursor: pointer; 35 | font-size: 16px; 36 | font-weight: 600; 37 | float: right; 38 | transition: 1s; 39 | } 40 | 41 | .nextButton:hover { 42 | background-color: tomato; 43 | transition: 1s; 44 | } 45 | -------------------------------------------------------------------------------- /day-8/quiz-game/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './App.css'; 3 | import Footer from './Footer'; 4 | import QuestionCard from './QuestionCard'; 5 | import ScoreCard from './ScoreCard'; 6 | 7 | 8 | 9 | const App = () => { 10 | 11 | const [quizzes, setQuizzes] = useState([]); 12 | const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); 13 | const [loaded, setLoaded] = useState(false); 14 | // const [currentAnswers, setCurrentAnswers] = useState([]); 15 | const [endGame, setEndGame] = useState(false); 16 | const [totalScore, setTotalScore] = useState(0); 17 | 18 | 19 | const fetchQuizData = async () => { 20 | 21 | const response = await fetch('https://opentdb.com/api.php?amount=5&category=18&difficulty=easy&type=multiple'); 22 | const {results} = await response.json(); 23 | setQuizzes(results); 24 | setLoaded(true); 25 | } 26 | 27 | 28 | const handleQuizReset = () => { 29 | 30 | setQuizzes([]); 31 | setLoaded(false); 32 | setCurrentQuestionIndex(0); 33 | setEndGame(false); 34 | setTotalScore(0); 35 | } 36 | 37 | 38 | return ( 39 | <> 40 |
    41 | { 42 | !loaded && 43 | } 44 | 45 | { 46 | endGame && 47 | } 48 | 49 | { 50 | loaded && !endGame && 51 | } 52 |
    53 |