├── 13-jsx-3 └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── product.css │ └── product.jsx │ └── index.js ├── 14-event └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── product.css │ └── product.jsx │ └── index.js ├── 15-state └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── product.css │ └── product.jsx │ └── index.js ├── 16-classbased-to-functional └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── functional │ │ └── product.jsx │ ├── product.css │ └── product.jsx │ └── index.js ├── 18-map-array-to-component └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── functional │ │ ├── product.jsx │ │ └── products.jsx │ ├── product.css │ ├── product.jsx │ └── products.jsx │ └── index.js ├── 19-change-parent-state └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── functional │ │ ├── product.jsx │ │ └── products.jsx │ ├── product.css │ ├── product.jsx │ └── products.jsx │ └── index.js ├── 20-controlled-component └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── functional │ │ ├── product.jsx │ │ └── products.jsx │ ├── product.css │ ├── product.jsx │ └── products.jsx │ └── index.js ├── 21-sibling-props └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── functional │ │ ├── app.jsx │ │ ├── navbar.jsx │ │ ├── product.jsx │ │ └── products.jsx │ ├── navbar.jsx │ ├── product.css │ ├── product.jsx │ └── products.jsx │ └── index.js ├── 22-context-in-class-component └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── functional │ │ ├── app.jsx │ │ ├── navbar.jsx │ │ ├── product.jsx │ │ └── products.jsx │ ├── navbar.jsx │ ├── product.css │ ├── product.jsx │ └── products.jsx │ ├── context │ └── products.js │ └── index.js ├── 23-context-in-functional-component └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── functional │ │ ├── app.jsx │ │ ├── navbar.jsx │ │ ├── product.jsx │ │ └── products.jsx │ ├── navbar.jsx │ ├── product.css │ ├── product.jsx │ └── products.jsx │ ├── context │ └── products.js │ └── index.js ├── 24-mount-phase └── hello-world │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── functional │ │ ├── app.jsx │ │ ├── navbar.jsx │ │ ├── product.jsx │ │ └── products.jsx │ ├── navbar.jsx │ ├── product.css │ ├── product.jsx │ └── products.jsx │ ├── context │ └── products.js │ └── index.js ├── 28-get-and-process-api-data └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ └── users.jsx │ └── index.js ├── 29-skeleton-loading └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── loading │ │ └── loadingUsers.jsx │ └── users.jsx │ └── index.js ├── 30-crud-http └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── loading │ │ └── loadingUsers.jsx │ └── users.jsx │ └── index.js ├── 31-react-router-dom └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── register.jsx │ └── users.jsx │ └── index.js ├── 32-switch └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── register.jsx │ └── users.jsx │ └── index.js ├── 33-link_component └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── register.jsx │ └── users.jsx │ └── index.js ├── 34-passing-props-to-route └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── register.jsx │ └── users.jsx │ └── index.js ├── 35-params └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 36-query └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 37-redirect └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 38-form └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 39-ref └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 40-controlled-input └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 41-input-component └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── input.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 42-validation └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── input.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 43-authentication └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── home.jsx │ ├── input.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 44-auth-implementation └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── dashboard.jsx │ ├── home.jsx │ ├── input.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js ├── 46-send-token └── users │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── app.js │ ├── components │ ├── dashboard.jsx │ ├── home.jsx │ ├── input.jsx │ ├── loading │ │ └── loadingUsers.jsx │ ├── login.jsx │ ├── logout.jsx │ ├── navbar.jsx │ ├── notFound.jsx │ ├── register.jsx │ ├── user.jsx │ └── users.jsx │ └── index.js └── 47-protected-route └── users ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── app.js ├── components ├── dashboard.jsx ├── home.jsx ├── input.jsx ├── loading │ └── loadingUsers.jsx ├── login.jsx ├── logout.jsx ├── navbar.jsx ├── notFound.jsx ├── protect.jsx ├── register.jsx ├── user.jsx └── users.jsx └── index.js /13-jsx-3/hello-world/.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 | -------------------------------------------------------------------------------- /13-jsx-3/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /13-jsx-3/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/13-jsx-3/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /13-jsx-3/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/13-jsx-3/hello-world/public/logo192.png -------------------------------------------------------------------------------- /13-jsx-3/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/13-jsx-3/hello-world/public/logo512.png -------------------------------------------------------------------------------- /13-jsx-3/hello-world/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 | -------------------------------------------------------------------------------- /13-jsx-3/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /13-jsx-3/hello-world/src/app.js: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 | <> 7 |

hello world!

8 |

this is react

9 | 10 | ); 11 | } 12 | } 13 | 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /13-jsx-3/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /13-jsx-3/hello-world/src/components/product.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | import './product.css' 3 | 4 | class Product extends Component { 5 | count = 5; 6 | render() { 7 | return ( 8 | <> 9 | product name 10 | {this.format()} 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | format(){ 19 | if(this.count === 0){ 20 | return 'zero'; 21 | }else{ 22 | return this.count; 23 | } 24 | } 25 | } 26 | 27 | export default Product; 28 | -------------------------------------------------------------------------------- /13-jsx-3/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | import Product from './components/product'; 3 | import ReactDOM from 'react-dom'; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | 9 | -------------------------------------------------------------------------------- /14-event/hello-world/.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 | -------------------------------------------------------------------------------- /14-event/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /14-event/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/14-event/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /14-event/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/14-event/hello-world/public/logo192.png -------------------------------------------------------------------------------- /14-event/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/14-event/hello-world/public/logo512.png -------------------------------------------------------------------------------- /14-event/hello-world/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 | -------------------------------------------------------------------------------- /14-event/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /14-event/hello-world/src/app.js: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 | <> 7 |

hello world!

8 |

this is react

9 | 10 | ); 11 | } 12 | } 13 | 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /14-event/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /14-event/hello-world/src/components/product.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | import './product.css' 3 | 4 | class Product extends Component { 5 | count = 5; 6 | render() { 7 | return ( 8 | <> 9 | product name 10 | {this.format()} 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | handleIncrement = ()=>{ 19 | console.log('increment'); 20 | } 21 | 22 | handleDecrement =()=>{ 23 | console.log('Decrement'); 24 | } 25 | 26 | handleDelete =()=>{ 27 | console.log('Delete'); 28 | } 29 | 30 | format(){ 31 | if(this.count === 0){ 32 | return 'zero'; 33 | }else{ 34 | return this.count; 35 | } 36 | } 37 | } 38 | 39 | export default Product; 40 | -------------------------------------------------------------------------------- /14-event/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | import Product from './components/product'; 3 | import ReactDOM from 'react-dom'; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | 9 | -------------------------------------------------------------------------------- /15-state/hello-world/.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 | -------------------------------------------------------------------------------- /15-state/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /15-state/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/15-state/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /15-state/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/15-state/hello-world/public/logo192.png -------------------------------------------------------------------------------- /15-state/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/15-state/hello-world/public/logo512.png -------------------------------------------------------------------------------- /15-state/hello-world/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 | -------------------------------------------------------------------------------- /15-state/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /15-state/hello-world/src/app.js: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 | <> 7 |

hello world!

8 |

this is react

9 | 10 | ); 11 | } 12 | } 13 | 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /15-state/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /15-state/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | import Product from './components/product'; 3 | import ReactDOM from 'react-dom'; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | 9 | -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/.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 | -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/16-classbased-to-functional/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/16-classbased-to-functional/hello-world/public/logo192.png -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/16-classbased-to-functional/hello-world/public/logo512.png -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/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 | -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/src/app.js: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 | <> 7 |

hello world!

8 |

this is react

9 | 10 | ); 11 | } 12 | } 13 | 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/src/components/functional/product.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | 3 | const Product = () => { 4 | 5 | const [count, setCount] = useState(0); 6 | 7 | return ( 8 | <> 9 | laptop 10 | {format()} 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | function handleIncrement(){ 18 | setCount(count + 1); 19 | } 20 | 21 | function handleDecrement(){ 22 | setCount(count - 1); 23 | 24 | } 25 | 26 | function handleDelete(){ 27 | console.log('Delete'); 28 | } 29 | 30 | function format(){ 31 | if(count === 0){ 32 | return 'zero'; 33 | }else{ 34 | return count; 35 | } 36 | } 37 | } 38 | 39 | export default Product; -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /16-classbased-to-functional/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | // import Product from './components/product'; 3 | import Product from './components/functional/product'; 4 | import ReactDOM from 'react-dom'; 5 | import 'bootstrap/dist/css/bootstrap.min.css'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | 10 | -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/.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 | -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/18-map-array-to-component/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/18-map-array-to-component/hello-world/public/logo192.png -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/18-map-array-to-component/hello-world/public/logo512.png -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/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 | -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/src/app.js: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 | <> 7 |

hello world!

8 |

this is react

9 | 10 | ); 11 | } 12 | } 13 | 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/src/components/functional/product.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | 3 | const Product = ({productName, count: propCount, children }) => { 4 | 5 | const [count, setCount] = useState(propCount); 6 | 7 | return ( 8 |
9 | {productName} 10 | {format()} 11 | 12 | 13 | 14 |
15 | ); 16 | 17 | function handleIncrement(){ 18 | setCount(count + 1); 19 | } 20 | 21 | function handleDecrement(){ 22 | setCount(count - 1); 23 | 24 | } 25 | 26 | function handleDelete(){ 27 | console.log('Delete'); 28 | } 29 | 30 | function format(){ 31 | if(count === 0){ 32 | return 'zero'; 33 | }else{ 34 | return count; 35 | } 36 | } 37 | } 38 | 39 | export default Product; -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/src/components/functional/products.jsx: -------------------------------------------------------------------------------- 1 | import Product from './product'; 2 | import {useState} from 'react'; 3 | 4 | const Products = () => { 5 | const [products, setProducts] = useState([ 6 | {id:1 , count: 2, productName: 'laptop'}, 7 | {id:2 , count: 1, productName: 'phone'}, 8 | {id:3 , count: 4, productName: 'airpods'}, 9 | ]) 10 | return ( 11 | <> 12 | {products.map((p,index) => ( 13 | 14 | ))} 15 | 16 | ); 17 | } 18 | 19 | export default Products; -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/src/components/products.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Product from './product'; 3 | 4 | class Products extends React.Component { 5 | state = { 6 | products: [ 7 | {id:1 , count: 2, productName: 'laptop'}, 8 | {id:2 , count: 1, productName: 'phone'}, 9 | {id:3 , count: 4, productName: 'airpods'}, 10 | ] 11 | } 12 | render() { 13 | return ( 14 | <> 15 | {this.state.products.map((p,index) => ( 16 | 17 | 18 | ))} 19 | 20 | ); 21 | } 22 | } 23 | 24 | export default Products; -------------------------------------------------------------------------------- /18-map-array-to-component/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | // import Products from './components/products'; 3 | import Products from './components/functional/products'; 4 | import ReactDOM from 'react-dom'; 5 | import 'bootstrap/dist/css/bootstrap.min.css'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | 10 | -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/.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 | -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/19-change-parent-state/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/19-change-parent-state/hello-world/public/logo192.png -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/19-change-parent-state/hello-world/public/logo512.png -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/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 | -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/src/app.js: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 | <> 7 |

hello world!

8 |

this is react

9 | 10 | ); 11 | } 12 | } 13 | 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/src/components/functional/product.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | 3 | const Product = ({productName, count: propCount, onDelete, id }) => { 4 | 5 | const [count, setCount] = useState(propCount); 6 | 7 | return ( 8 |
9 | {productName} 10 | {format()} 11 | 12 | 13 | 14 |
15 | ); 16 | 17 | function handleIncrement(){ 18 | setCount(count + 1); 19 | } 20 | 21 | function handleDecrement(){ 22 | setCount(count - 1); 23 | 24 | } 25 | 26 | function handleDelete(){ 27 | onDelete(id); 28 | } 29 | 30 | function format(){ 31 | if(count === 0){ 32 | return 'zero'; 33 | }else{ 34 | return count; 35 | } 36 | } 37 | } 38 | 39 | export default Product; -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/src/components/functional/products.jsx: -------------------------------------------------------------------------------- 1 | import Product from './product'; 2 | import {useState} from 'react'; 3 | 4 | const Products = () => { 5 | const [products, setProducts] = useState([ 6 | {id:1 , count: 2, productName: 'laptop'}, 7 | {id:2 , count: 1, productName: 'phone'}, 8 | {id:3 , count: 4, productName: 'airpods'}, 9 | ]) 10 | return ( 11 | <> 12 | {products.map((p,index) => ( 13 | 14 | ))} 15 | 16 | ); 17 | 18 | function handleDelete(productId){ 19 | const newProducts = products.filter(p => p.id !== productId); 20 | setProducts(newProducts); 21 | } 22 | } 23 | 24 | export default Products; -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/src/components/products.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Product from './product'; 3 | 4 | class Products extends React.Component { 5 | state = { 6 | products: [ 7 | {id:1 , count: 2, productName: 'laptop'}, 8 | {id:2 , count: 1, productName: 'phone'}, 9 | {id:3 , count: 4, productName: 'airpods'}, 10 | ] 11 | } 12 | render() { 13 | return ( 14 | <> 15 | {this.state.products.map((p,index) => ( 16 | 17 | ))} 18 | 19 | ); 20 | } 21 | 22 | handleDelete = (productId)=>{ 23 | const newProducts = this.state.products.filter(p => p.id !== productId); 24 | this.setState({products: newProducts}); 25 | } 26 | } 27 | 28 | export default Products; -------------------------------------------------------------------------------- /19-change-parent-state/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | import Products from './components/products'; 3 | // import Products from './components/functional/products'; 4 | import ReactDOM from 'react-dom'; 5 | import 'bootstrap/dist/css/bootstrap.min.css'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | 10 | -------------------------------------------------------------------------------- /20-controlled-component/hello-world/.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 | -------------------------------------------------------------------------------- /20-controlled-component/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /20-controlled-component/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/20-controlled-component/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /20-controlled-component/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/20-controlled-component/hello-world/public/logo192.png -------------------------------------------------------------------------------- /20-controlled-component/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/20-controlled-component/hello-world/public/logo512.png -------------------------------------------------------------------------------- /20-controlled-component/hello-world/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 | -------------------------------------------------------------------------------- /20-controlled-component/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /20-controlled-component/hello-world/src/app.js: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 | <> 7 |

hello world!

8 |

this is react

9 | 10 | ); 11 | } 12 | } 13 | 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /20-controlled-component/hello-world/src/components/functional/product.jsx: -------------------------------------------------------------------------------- 1 | 2 | const Product = ({productName, count, onDelete, id, onIncrement, onDecrement }) => { 3 | 4 | return ( 5 |
6 | {productName} 7 | {format()} 8 | 9 | 10 | 11 |
12 | ); 13 | 14 | function handleIncrement(){ 15 | onIncrement(id); 16 | } 17 | 18 | function handleDecrement(){ 19 | onDecrement(id); 20 | } 21 | 22 | function handleDelete(){ 23 | onDelete(id); 24 | } 25 | 26 | function format(){ 27 | if(count === 0){ 28 | return 'zero'; 29 | }else{ 30 | return count; 31 | } 32 | } 33 | } 34 | 35 | export default Product; -------------------------------------------------------------------------------- /20-controlled-component/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /20-controlled-component/hello-world/src/components/product.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | import './product.css' 3 | 4 | class Product extends Component { 5 | 6 | render() { 7 | const {productName} = this.props; 8 | return ( 9 |
10 | {productName} 11 | {this.format()} 12 | 13 | 14 | 15 |
16 | ); 17 | } 18 | 19 | handleIncrement = ()=>{ 20 | this.props.onIncrement(this.props.id); 21 | } 22 | 23 | handleDecrement =()=>{ 24 | this.props.onDecrement(this.props.id); 25 | } 26 | 27 | handleDelete =()=>{ 28 | this.props.onDelete(this.props.id); 29 | } 30 | 31 | format(){ 32 | if(this.props.count === 0){ 33 | return 'zero'; 34 | }else{ 35 | return this.props.count; 36 | } 37 | } 38 | } 39 | 40 | export default Product; 41 | -------------------------------------------------------------------------------- /20-controlled-component/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | import Products from './components/products'; 3 | // import Products from './components/functional/products'; 4 | import ReactDOM from 'react-dom'; 5 | import 'bootstrap/dist/css/bootstrap.min.css'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | 10 | -------------------------------------------------------------------------------- /21-sibling-props/hello-world/.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 | -------------------------------------------------------------------------------- /21-sibling-props/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /21-sibling-props/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/21-sibling-props/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /21-sibling-props/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/21-sibling-props/hello-world/public/logo192.png -------------------------------------------------------------------------------- /21-sibling-props/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/21-sibling-props/hello-world/public/logo512.png -------------------------------------------------------------------------------- /21-sibling-props/hello-world/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 | -------------------------------------------------------------------------------- /21-sibling-props/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /21-sibling-props/hello-world/src/components/functional/navbar.jsx: -------------------------------------------------------------------------------- 1 | const Navbar = (props) => { 2 | return ( 3 | 10 | ); 11 | 12 | function calculateSum(){ 13 | let sum = 0; 14 | props.products.forEach(p=>{ 15 | sum += p.count; 16 | }) 17 | return sum; 18 | } 19 | } 20 | 21 | export default Navbar; -------------------------------------------------------------------------------- /21-sibling-props/hello-world/src/components/functional/product.jsx: -------------------------------------------------------------------------------- 1 | 2 | const Product = ({productName, count, onDelete, id, onIncrement, onDecrement }) => { 3 | 4 | return ( 5 |
6 | {productName} 7 | {format()} 8 | 9 | 10 | 11 |
12 | ); 13 | 14 | function handleIncrement(){ 15 | onIncrement(id); 16 | } 17 | 18 | function handleDecrement(){ 19 | onDecrement(id); 20 | } 21 | 22 | function handleDelete(){ 23 | onDelete(id); 24 | } 25 | 26 | function format(){ 27 | if(count === 0){ 28 | return 'zero'; 29 | }else{ 30 | return count; 31 | } 32 | } 33 | } 34 | 35 | export default Product; -------------------------------------------------------------------------------- /21-sibling-props/hello-world/src/components/functional/products.jsx: -------------------------------------------------------------------------------- 1 | import Product from "./product"; 2 | 3 | const Products = ({products,onIncrement,onDecrement,onDelete,onReset}) => { 4 | 5 | return ( 6 | <> 7 | 10 | {products.map((p, index) => ( 11 | 20 | ))} 21 | 22 | ); 23 | 24 | 25 | }; 26 | 27 | export default Products; 28 | -------------------------------------------------------------------------------- /21-sibling-props/hello-world/src/components/navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Navbar extends React.Component { 4 | render() { 5 | return ( 6 | 13 | ); 14 | } 15 | 16 | calculateSum = ()=>{ 17 | let sum = 0; 18 | this.props.products.forEach(p=>{ 19 | sum += p.count; 20 | }) 21 | return sum; 22 | } 23 | } 24 | 25 | export default Navbar; -------------------------------------------------------------------------------- /21-sibling-props/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /21-sibling-props/hello-world/src/components/product.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | import './product.css' 3 | 4 | class Product extends Component { 5 | 6 | render() { 7 | const {productName} = this.props; 8 | return ( 9 |
10 | {productName} 11 | {this.format()} 12 | 13 | 14 | 15 |
16 | ); 17 | } 18 | 19 | handleIncrement = ()=>{ 20 | this.props.onIncrement(this.props.id); 21 | } 22 | 23 | handleDecrement =()=>{ 24 | this.props.onDecrement(this.props.id); 25 | } 26 | 27 | handleDelete =()=>{ 28 | this.props.onDelete(this.props.id); 29 | } 30 | 31 | format(){ 32 | if(this.props.count === 0){ 33 | return 'zero'; 34 | }else{ 35 | return this.props.count; 36 | } 37 | } 38 | } 39 | 40 | export default Product; 41 | -------------------------------------------------------------------------------- /21-sibling-props/hello-world/src/components/products.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Product from './product'; 3 | 4 | class Products extends React.Component { 5 | 6 | render() { 7 | return ( 8 | <> 9 | 10 | {this.props.products.map((p,index) => ( 11 | 12 | ))} 13 | 14 | ); 15 | } 16 | 17 | 18 | } 19 | 20 | export default Products; -------------------------------------------------------------------------------- /21-sibling-props/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | // import App from './app'; 2 | import App from './components/functional/app'; 3 | import ReactDOM from 'react-dom'; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | 9 | -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/.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 | -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/22-context-in-class-component/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/22-context-in-class-component/hello-world/public/logo192.png -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/22-context-in-class-component/hello-world/public/logo512.png -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/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 | -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/src/components/functional/navbar.jsx: -------------------------------------------------------------------------------- 1 | const Navbar = (props) => { 2 | return ( 3 | 10 | ); 11 | 12 | function calculateSum(){ 13 | let sum = 0; 14 | props.products.forEach(p=>{ 15 | sum += p.count; 16 | }) 17 | return sum; 18 | } 19 | } 20 | 21 | export default Navbar; -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/src/components/functional/product.jsx: -------------------------------------------------------------------------------- 1 | 2 | const Product = ({productName, count, onDelete, id, onIncrement, onDecrement }) => { 3 | 4 | return ( 5 |
6 | {productName} 7 | {format()} 8 | 9 | 10 | 11 |
12 | ); 13 | 14 | function handleIncrement(){ 15 | onIncrement(id); 16 | } 17 | 18 | function handleDecrement(){ 19 | onDecrement(id); 20 | } 21 | 22 | function handleDelete(){ 23 | onDelete(id); 24 | } 25 | 26 | function format(){ 27 | if(count === 0){ 28 | return 'zero'; 29 | }else{ 30 | return count; 31 | } 32 | } 33 | } 34 | 35 | export default Product; -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/src/components/functional/products.jsx: -------------------------------------------------------------------------------- 1 | import Product from "./product"; 2 | 3 | const Products = ({products,onIncrement,onDecrement,onDelete,onReset}) => { 4 | 5 | return ( 6 | <> 7 | 10 | {products.map((p, index) => ( 11 | 20 | ))} 21 | 22 | ); 23 | 24 | 25 | }; 26 | 27 | export default Products; 28 | -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/src/components/navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ProductContext from "./../context/products"; 3 | 4 | 5 | class Navbar extends React.Component { 6 | static contextType = ProductContext; 7 | 8 | render() { 9 | return ( 10 | 17 | ); 18 | } 19 | 20 | calculateSum = ()=>{ 21 | let sum = 0; 22 | this.context.products.forEach(p=>{ 23 | sum += p.count; 24 | }) 25 | return sum; 26 | } 27 | } 28 | 29 | export default Navbar; -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/src/components/products.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Product from './product'; 3 | import ProductContext from "./../context/products"; 4 | 5 | class Products extends React.Component { 6 | static contextType = ProductContext; 7 | 8 | render() { 9 | return ( 10 | <> 11 | 12 | {this.context.products.map((p,index) => ( 13 | 14 | ))} 15 | 16 | ); 17 | } 18 | 19 | 20 | } 21 | 22 | export default Products; -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/src/context/products.js: -------------------------------------------------------------------------------- 1 | import {createContext} from 'react'; 2 | 3 | const productContext = createContext({ 4 | products: [], 5 | onDelete: ()=>{}, 6 | onIncrement: ()=>{}, 7 | onDecrement: ()=>{}, 8 | onReset: ()=>{}, 9 | }); 10 | 11 | export default productContext; -------------------------------------------------------------------------------- /22-context-in-class-component/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | // import App from './app'; 2 | import App from './components/functional/app'; 3 | import ReactDOM from 'react-dom'; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | 9 | -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/.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 | -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/23-context-in-functional-component/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/23-context-in-functional-component/hello-world/public/logo192.png -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/23-context-in-functional-component/hello-world/public/logo512.png -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/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 | -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/src/components/functional/navbar.jsx: -------------------------------------------------------------------------------- 1 | 2 | import {useContext} from 'react'; 3 | import ProductsContext from "./../../context/products"; 4 | 5 | const Navbar = (props) => { 6 | const productsContext = useContext(ProductsContext); 7 | return ( 8 | 15 | ); 16 | 17 | function calculateSum(){ 18 | let sum = 0; 19 | productsContext.products.forEach(p=>{ 20 | sum += p.count; 21 | }) 22 | return sum; 23 | } 24 | } 25 | 26 | export default Navbar; -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/src/components/functional/product.jsx: -------------------------------------------------------------------------------- 1 | 2 | import {useContext} from 'react'; 3 | import ProductsContext from "./../../context/products"; 4 | 5 | const Product = ({productName, count, id}) => { 6 | const productsContext = useContext(ProductsContext); 7 | 8 | return ( 9 |
10 | {productName} 11 | {format()} 12 | 13 | 14 | 15 |
16 | ); 17 | 18 | function handleIncrement(){ 19 | productsContext.onIncrement(id); 20 | } 21 | 22 | function handleDecrement(){ 23 | productsContext.onDecrement(id); 24 | } 25 | 26 | function handleDelete(){ 27 | productsContext.onDelete(id); 28 | } 29 | 30 | function format(){ 31 | if(count === 0){ 32 | return 'zero'; 33 | }else{ 34 | return count; 35 | } 36 | } 37 | } 38 | 39 | export default Product; -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/src/components/functional/products.jsx: -------------------------------------------------------------------------------- 1 | import Product from "./product"; 2 | import {useContext} from 'react'; 3 | import ProductsContext from "./../../context/products"; 4 | 5 | 6 | const Products = (props) => { 7 | const productsContext = useContext(ProductsContext); 8 | return ( 9 | <> 10 | 13 | {productsContext.products.map((p, index) => ( 14 | 20 | ))} 21 | 22 | ); 23 | 24 | 25 | }; 26 | 27 | export default Products; 28 | -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/src/components/navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ProductContext from "./../context/products"; 3 | 4 | 5 | class Navbar extends React.Component { 6 | static contextType = ProductContext; 7 | 8 | render() { 9 | return ( 10 | 17 | ); 18 | } 19 | 20 | calculateSum = ()=>{ 21 | let sum = 0; 22 | this.context.products.forEach(p=>{ 23 | sum += p.count; 24 | }) 25 | return sum; 26 | } 27 | } 28 | 29 | export default Navbar; -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/src/components/products.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Product from './product'; 3 | import ProductContext from "./../context/products"; 4 | 5 | class Products extends React.Component { 6 | static contextType = ProductContext; 7 | 8 | render() { 9 | return ( 10 | <> 11 | 12 | {this.context.products.map((p,index) => ( 13 | 14 | ))} 15 | 16 | ); 17 | } 18 | 19 | 20 | } 21 | 22 | export default Products; -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/src/context/products.js: -------------------------------------------------------------------------------- 1 | import {createContext} from 'react'; 2 | 3 | const productContext = createContext({ 4 | products: [], 5 | onDelete: ()=>{}, 6 | onIncrement: ()=>{}, 7 | onDecrement: ()=>{}, 8 | onReset: ()=>{}, 9 | }); 10 | 11 | export default productContext; -------------------------------------------------------------------------------- /23-context-in-functional-component/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | // import App from './components/functional/app'; 3 | import ReactDOM from 'react-dom'; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | 9 | -------------------------------------------------------------------------------- /24-mount-phase/hello-world/.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 | -------------------------------------------------------------------------------- /24-mount-phase/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /24-mount-phase/hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/24-mount-phase/hello-world/public/favicon.ico -------------------------------------------------------------------------------- /24-mount-phase/hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/24-mount-phase/hello-world/public/logo192.png -------------------------------------------------------------------------------- /24-mount-phase/hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/24-mount-phase/hello-world/public/logo512.png -------------------------------------------------------------------------------- /24-mount-phase/hello-world/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 | -------------------------------------------------------------------------------- /24-mount-phase/hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /24-mount-phase/hello-world/src/components/functional/navbar.jsx: -------------------------------------------------------------------------------- 1 | 2 | import {useContext} from 'react'; 3 | import ProductsContext from "./../../context/products"; 4 | 5 | const Navbar = (props) => { 6 | const productsContext = useContext(ProductsContext); 7 | return ( 8 | 15 | ); 16 | 17 | function calculateSum(){ 18 | let sum = 0; 19 | productsContext.products.forEach(p=>{ 20 | sum += p.count; 21 | }) 22 | return sum; 23 | } 24 | } 25 | 26 | export default Navbar; -------------------------------------------------------------------------------- /24-mount-phase/hello-world/src/components/functional/product.jsx: -------------------------------------------------------------------------------- 1 | 2 | import {useContext} from 'react'; 3 | import ProductsContext from "./../../context/products"; 4 | 5 | const Product = ({productName, count, id}) => { 6 | const productsContext = useContext(ProductsContext); 7 | 8 | return ( 9 |
10 | {productName} 11 | {format()} 12 | 13 | 14 | 15 |
16 | ); 17 | 18 | function handleIncrement(){ 19 | productsContext.onIncrement(id); 20 | } 21 | 22 | function handleDecrement(){ 23 | productsContext.onDecrement(id); 24 | } 25 | 26 | function handleDelete(){ 27 | productsContext.onDelete(id); 28 | } 29 | 30 | function format(){ 31 | if(count === 0){ 32 | return 'zero'; 33 | }else{ 34 | return count; 35 | } 36 | } 37 | } 38 | 39 | export default Product; -------------------------------------------------------------------------------- /24-mount-phase/hello-world/src/components/functional/products.jsx: -------------------------------------------------------------------------------- 1 | import Product from "./product"; 2 | import {useContext} from 'react'; 3 | import ProductsContext from "./../../context/products"; 4 | 5 | 6 | const Products = (props) => { 7 | const productsContext = useContext(ProductsContext); 8 | return ( 9 | <> 10 | 13 | {productsContext.products.map((p, index) => ( 14 | 20 | ))} 21 | 22 | ); 23 | 24 | 25 | }; 26 | 27 | export default Products; 28 | -------------------------------------------------------------------------------- /24-mount-phase/hello-world/src/components/navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ProductContext from "./../context/products"; 3 | 4 | 5 | class Navbar extends React.Component { 6 | static contextType = ProductContext; 7 | 8 | constructor(props){ 9 | super(props); 10 | console.log('navbar - constructor'); 11 | } 12 | 13 | componentDidMount(){ 14 | console.log('navbar - didMount'); 15 | } 16 | 17 | render() { 18 | console.log('navbar - render'); 19 | return ( 20 | 27 | ); 28 | } 29 | 30 | calculateSum = ()=>{ 31 | let sum = 0; 32 | this.context.products.forEach(p=>{ 33 | sum += p.count; 34 | }) 35 | return sum; 36 | } 37 | } 38 | 39 | export default Navbar; -------------------------------------------------------------------------------- /24-mount-phase/hello-world/src/components/product.css: -------------------------------------------------------------------------------- 1 | img{ 2 | border-radius: 50%; 3 | } -------------------------------------------------------------------------------- /24-mount-phase/hello-world/src/components/products.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Product from './product'; 3 | import ProductContext from "./../context/products"; 4 | 5 | class Products extends React.Component { 6 | static contextType = ProductContext; 7 | 8 | constructor(props){ 9 | super(props); 10 | console.log('Products - constructor'); 11 | } 12 | 13 | componentDidMount(){ 14 | console.log('Products - didMount'); 15 | } 16 | 17 | render() { 18 | console.log('Products - render'); 19 | 20 | return ( 21 | <> 22 | 23 | {this.context.products.map((p,index) => ( 24 | 25 | ))} 26 | 27 | ); 28 | } 29 | 30 | 31 | } 32 | 33 | export default Products; -------------------------------------------------------------------------------- /24-mount-phase/hello-world/src/context/products.js: -------------------------------------------------------------------------------- 1 | import {createContext} from 'react'; 2 | 3 | const productContext = createContext({ 4 | products: [], 5 | onDelete: ()=>{}, 6 | onIncrement: ()=>{}, 7 | onDecrement: ()=>{}, 8 | onReset: ()=>{}, 9 | }); 10 | 11 | export default productContext; -------------------------------------------------------------------------------- /24-mount-phase/hello-world/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app'; 2 | // import App from './components/functional/app'; 3 | import ReactDOM from 'react-dom'; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | 9 | -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/.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 | -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-scripts": "4.0.3", 14 | "web-vitals": "^1.1.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/28-get-and-process-api-data/users/public/favicon.ico -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/28-get-and-process-api-data/users/public/logo192.png -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/28-get-and-process-api-data/users/public/logo512.png -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/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 | -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Users from './components/users'; 3 | 4 | class App extends React.Component { 5 | render() { 6 | return ; 7 | } 8 | } 9 | 10 | export default App; -------------------------------------------------------------------------------- /28-get-and-process-api-data/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import 'bootstrap/dist/css/bootstrap.min.css'; 3 | import App from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /29-skeleton-loading/users/.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 | -------------------------------------------------------------------------------- /29-skeleton-loading/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-loading-skeleton": "^2.2.0", 14 | "react-scripts": "4.0.3", 15 | "web-vitals": "^1.1.2" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /29-skeleton-loading/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/29-skeleton-loading/users/public/favicon.ico -------------------------------------------------------------------------------- /29-skeleton-loading/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/29-skeleton-loading/users/public/logo192.png -------------------------------------------------------------------------------- /29-skeleton-loading/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/29-skeleton-loading/users/public/logo512.png -------------------------------------------------------------------------------- /29-skeleton-loading/users/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 | -------------------------------------------------------------------------------- /29-skeleton-loading/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /29-skeleton-loading/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Users from './components/users'; 3 | 4 | class App extends React.Component { 5 | render() { 6 | return ; 7 | } 8 | } 9 | 10 | export default App; -------------------------------------------------------------------------------- /29-skeleton-loading/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /29-skeleton-loading/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import 'bootstrap/dist/css/bootstrap.min.css'; 3 | import App from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /30-crud-http/users/.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 | -------------------------------------------------------------------------------- /30-crud-http/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-loading-skeleton": "^2.2.0", 14 | "react-scripts": "4.0.3", 15 | "web-vitals": "^1.1.2" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /30-crud-http/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/30-crud-http/users/public/favicon.ico -------------------------------------------------------------------------------- /30-crud-http/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/30-crud-http/users/public/logo192.png -------------------------------------------------------------------------------- /30-crud-http/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/30-crud-http/users/public/logo512.png -------------------------------------------------------------------------------- /30-crud-http/users/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 | -------------------------------------------------------------------------------- /30-crud-http/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /30-crud-http/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Users from './components/users'; 3 | 4 | class App extends React.Component { 5 | render() { 6 | return ; 7 | } 8 | } 9 | 10 | export default App; -------------------------------------------------------------------------------- /30-crud-http/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /30-crud-http/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import 'bootstrap/dist/css/bootstrap.min.css'; 3 | import App from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /31-react-router-dom/users/.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 | -------------------------------------------------------------------------------- /31-react-router-dom/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-loading-skeleton": "^2.2.0", 14 | "react-router-dom": "^5.3.0", 15 | "react-scripts": "4.0.3", 16 | "web-vitals": "^1.1.2" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /31-react-router-dom/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/31-react-router-dom/users/public/favicon.ico -------------------------------------------------------------------------------- /31-react-router-dom/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/31-react-router-dom/users/public/logo192.png -------------------------------------------------------------------------------- /31-react-router-dom/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/31-react-router-dom/users/public/logo512.png -------------------------------------------------------------------------------- /31-react-router-dom/users/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 | -------------------------------------------------------------------------------- /31-react-router-dom/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /31-react-router-dom/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Users from './components/users'; 3 | import Navbar from './components/navbar'; 4 | import Login from './components/login'; 5 | import Register from './components/register'; 6 | import Home from './components/home'; 7 | import {Route} from 'react-router-dom'; 8 | 9 | class App extends React.Component { 10 | render() { 11 | return <> 12 | 13 |
14 | 15 | 16 | 17 | 18 |
19 | 20 | } 21 | } 22 | 23 | export default App; -------------------------------------------------------------------------------- /31-react-router-dom/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /31-react-router-dom/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /31-react-router-dom/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Login extends React.Component { 4 | render() { 5 | return

Login

; 6 | } 7 | } 8 | 9 | export default Login; -------------------------------------------------------------------------------- /31-react-router-dom/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /31-react-router-dom/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /32-switch/users/.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 | -------------------------------------------------------------------------------- /32-switch/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-loading-skeleton": "^2.2.0", 14 | "react-router-dom": "^5.3.0", 15 | "react-scripts": "4.0.3", 16 | "web-vitals": "^1.1.2" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /32-switch/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/32-switch/users/public/favicon.ico -------------------------------------------------------------------------------- /32-switch/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/32-switch/users/public/logo192.png -------------------------------------------------------------------------------- /32-switch/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/32-switch/users/public/logo512.png -------------------------------------------------------------------------------- /32-switch/users/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 | -------------------------------------------------------------------------------- /32-switch/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /32-switch/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Users from "./components/users"; 3 | import Navbar from "./components/navbar"; 4 | import Login from "./components/login"; 5 | import Register from "./components/register"; 6 | import Home from "./components/home"; 7 | import { Route, Switch } from "react-router-dom"; 8 | 9 | class App extends React.Component { 10 | render() { 11 | return ( 12 | <> 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | ); 24 | } 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /32-switch/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /32-switch/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /32-switch/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Login extends React.Component { 4 | render() { 5 | return

Login

; 6 | } 7 | } 8 | 9 | export default Login; -------------------------------------------------------------------------------- /32-switch/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /32-switch/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /33-link_component/users/.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 | -------------------------------------------------------------------------------- /33-link_component/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-loading-skeleton": "^2.2.0", 14 | "react-router-dom": "^5.3.0", 15 | "react-scripts": "4.0.3", 16 | "web-vitals": "^1.1.2" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /33-link_component/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/33-link_component/users/public/favicon.ico -------------------------------------------------------------------------------- /33-link_component/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/33-link_component/users/public/logo192.png -------------------------------------------------------------------------------- /33-link_component/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/33-link_component/users/public/logo512.png -------------------------------------------------------------------------------- /33-link_component/users/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 | -------------------------------------------------------------------------------- /33-link_component/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /33-link_component/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Users from "./components/users"; 3 | import Navbar from "./components/navbar"; 4 | import Login from "./components/login"; 5 | import Register from "./components/register"; 6 | import Home from "./components/home"; 7 | import { Route, Switch } from "react-router-dom"; 8 | 9 | class App extends React.Component { 10 | render() { 11 | return ( 12 | <> 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | ); 24 | } 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /33-link_component/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /33-link_component/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /33-link_component/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Login extends React.Component { 4 | render() { 5 | return

Login

; 6 | } 7 | } 8 | 9 | export default Login; -------------------------------------------------------------------------------- /33-link_component/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /33-link_component/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /34-passing-props-to-route/users/.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 | -------------------------------------------------------------------------------- /34-passing-props-to-route/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-loading-skeleton": "^2.2.0", 14 | "react-router-dom": "^5.3.0", 15 | "react-scripts": "4.0.3", 16 | "web-vitals": "^1.1.2" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /34-passing-props-to-route/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/34-passing-props-to-route/users/public/favicon.ico -------------------------------------------------------------------------------- /34-passing-props-to-route/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/34-passing-props-to-route/users/public/logo192.png -------------------------------------------------------------------------------- /34-passing-props-to-route/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/34-passing-props-to-route/users/public/logo512.png -------------------------------------------------------------------------------- /34-passing-props-to-route/users/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 | -------------------------------------------------------------------------------- /34-passing-props-to-route/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /34-passing-props-to-route/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Users from "./components/users"; 3 | import Navbar from "./components/navbar"; 4 | import Login from "./components/login"; 5 | import Register from "./components/register"; 6 | import Home from "./components/home"; 7 | import { Route, Switch } from "react-router-dom"; 8 | 9 | class App extends React.Component { 10 | render() { 11 | return ( 12 | <> 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | ); 24 | } 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /34-passing-props-to-route/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /34-passing-props-to-route/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /34-passing-props-to-route/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Login extends React.Component { 4 | render() { 5 | return

Login

; 6 | } 7 | } 8 | 9 | export default Login; -------------------------------------------------------------------------------- /34-passing-props-to-route/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /34-passing-props-to-route/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /35-params/users/.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 | -------------------------------------------------------------------------------- /35-params/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-loading-skeleton": "^2.2.0", 14 | "react-router-dom": "^5.3.0", 15 | "react-scripts": "4.0.3", 16 | "web-vitals": "^1.1.2" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /35-params/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/35-params/users/public/favicon.ico -------------------------------------------------------------------------------- /35-params/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/35-params/users/public/logo192.png -------------------------------------------------------------------------------- /35-params/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/35-params/users/public/logo512.png -------------------------------------------------------------------------------- /35-params/users/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 | -------------------------------------------------------------------------------- /35-params/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /35-params/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Users from "./components/users"; 3 | import User from "./components/user"; 4 | import Navbar from "./components/navbar"; 5 | import Login from "./components/login"; 6 | import Register from "./components/register"; 7 | import Home from "./components/home"; 8 | import { Route, Switch } from "react-router-dom"; 9 | 10 | class App extends React.Component { 11 | render() { 12 | return ( 13 | <> 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | ); 26 | } 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /35-params/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /35-params/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /35-params/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Login extends React.Component { 4 | render() { 5 | return

Login

; 6 | } 7 | } 8 | 9 | export default Login; -------------------------------------------------------------------------------- /35-params/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /35-params/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | 4 | const User = (props) => { 5 | const [user, setUser] = useState({}); 6 | 7 | useEffect(async () => { 8 | const response = await axios.get( 9 | `https://reqres.in/api/users/${props.match.params.id}` 10 | ); 11 | setUser(response.data.data); 12 | }); 13 | 14 | console.log(props.match.params); 15 | return ( 16 | <> 17 | 22 |

23 | {user.first_name} {user.last_name} 24 |

25 |
{user.email}
26 | 27 | ); 28 | }; 29 | 30 | export default User; 31 | -------------------------------------------------------------------------------- /35-params/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /36-query/users/.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 | -------------------------------------------------------------------------------- /36-query/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /36-query/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/36-query/users/public/favicon.ico -------------------------------------------------------------------------------- /36-query/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/36-query/users/public/logo192.png -------------------------------------------------------------------------------- /36-query/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/36-query/users/public/logo512.png -------------------------------------------------------------------------------- /36-query/users/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 | -------------------------------------------------------------------------------- /36-query/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /36-query/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Users from "./components/users"; 3 | import User from "./components/user"; 4 | import Navbar from "./components/navbar"; 5 | import Login from "./components/login"; 6 | import Register from "./components/register"; 7 | import Home from "./components/home"; 8 | import { Route, Switch } from "react-router-dom"; 9 | 10 | class App extends React.Component { 11 | render() { 12 | return ( 13 | <> 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | ); 26 | } 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /36-query/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /36-query/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /36-query/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Login extends React.Component { 4 | render() { 5 | return

Login

; 6 | } 7 | } 8 | 9 | export default Login; -------------------------------------------------------------------------------- /36-query/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /36-query/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | ); 29 | }; 30 | 31 | export default User; 32 | -------------------------------------------------------------------------------- /36-query/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /37-redirect/users/.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 | -------------------------------------------------------------------------------- /37-redirect/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /37-redirect/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/37-redirect/users/public/favicon.ico -------------------------------------------------------------------------------- /37-redirect/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/37-redirect/users/public/logo192.png -------------------------------------------------------------------------------- /37-redirect/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/37-redirect/users/public/logo512.png -------------------------------------------------------------------------------- /37-redirect/users/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 | -------------------------------------------------------------------------------- /37-redirect/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /37-redirect/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Users from "./components/users"; 3 | import User from "./components/user"; 4 | import Navbar from "./components/navbar"; 5 | import Login from "./components/login"; 6 | import Register from "./components/register"; 7 | import Home from "./components/home"; 8 | import { Route, Switch, Redirect } from "react-router-dom"; 9 | import NotFound from "./components/notFound"; 10 | 11 | class App extends React.Component { 12 | render() { 13 | return ( 14 | <> 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | ); 30 | } 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /37-redirect/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /37-redirect/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /37-redirect/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Login extends React.Component { 4 | render() { 5 | return

Login

; 6 | } 7 | } 8 | 9 | export default Login; -------------------------------------------------------------------------------- /37-redirect/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /37-redirect/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /37-redirect/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /37-redirect/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /38-form/users/.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 | -------------------------------------------------------------------------------- /38-form/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /38-form/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/38-form/users/public/favicon.ico -------------------------------------------------------------------------------- /38-form/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/38-form/users/public/logo192.png -------------------------------------------------------------------------------- /38-form/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/38-form/users/public/logo512.png -------------------------------------------------------------------------------- /38-form/users/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 | -------------------------------------------------------------------------------- /38-form/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /38-form/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Users from "./components/users"; 3 | import User from "./components/user"; 4 | import Navbar from "./components/navbar"; 5 | import Login from "./components/login"; 6 | import Register from "./components/register"; 7 | import Home from "./components/home"; 8 | import { Route, Switch, Redirect } from "react-router-dom"; 9 | import NotFound from "./components/notFound"; 10 | 11 | class App extends React.Component { 12 | render() { 13 | return ( 14 | <> 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | ); 30 | } 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /38-form/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /38-form/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /38-form/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Login extends React.Component { 4 | handleSubmit = (e)=>{ 5 | e.preventDefault(); 6 | console.log('submitted') 7 | } 8 | render() { 9 | return ( 10 |
11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 | 20 |
) 21 | } 22 | } 23 | 24 | export default Login; -------------------------------------------------------------------------------- /38-form/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /38-form/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /38-form/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /38-form/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /39-ref/users/.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 | -------------------------------------------------------------------------------- /39-ref/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /39-ref/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/39-ref/users/public/favicon.ico -------------------------------------------------------------------------------- /39-ref/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/39-ref/users/public/logo192.png -------------------------------------------------------------------------------- /39-ref/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/39-ref/users/public/logo512.png -------------------------------------------------------------------------------- /39-ref/users/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 | -------------------------------------------------------------------------------- /39-ref/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /39-ref/users/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Users from "./components/users"; 3 | import User from "./components/user"; 4 | import Navbar from "./components/navbar"; 5 | import Login from "./components/login"; 6 | import Register from "./components/register"; 7 | import Home from "./components/home"; 8 | import { Route, Switch, Redirect } from "react-router-dom"; 9 | import NotFound from "./components/notFound"; 10 | 11 | class App extends React.Component { 12 | render() { 13 | return ( 14 | <> 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | ); 30 | } 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /39-ref/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /39-ref/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /39-ref/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /39-ref/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /39-ref/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useRef } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | const firstName = useRef(null); 8 | console.log(queryString.parse(props.location.search)); 9 | 10 | useEffect(async () => { 11 | const response = await axios.get( 12 | `https://reqres.in/api/users/${props.match.params.id}` 13 | ); 14 | setUser(response.data.data); 15 | console.log(firstName.current); 16 | },[]); 17 | 18 | return ( 19 | <> 20 | 25 |

26 | {user.first_name} {user.last_name} 27 |

28 |
{user.email}
29 | 30 | 31 | ); 32 | }; 33 | 34 | export default User; 35 | -------------------------------------------------------------------------------- /39-ref/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /40-controlled-input/users/.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 | -------------------------------------------------------------------------------- /40-controlled-input/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /40-controlled-input/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/40-controlled-input/users/public/favicon.ico -------------------------------------------------------------------------------- /40-controlled-input/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/40-controlled-input/users/public/logo192.png -------------------------------------------------------------------------------- /40-controlled-input/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/40-controlled-input/users/public/logo512.png -------------------------------------------------------------------------------- /40-controlled-input/users/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 | -------------------------------------------------------------------------------- /40-controlled-input/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /40-controlled-input/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /40-controlled-input/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /40-controlled-input/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /40-controlled-input/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /40-controlled-input/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /40-controlled-input/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /41-input-component/users/.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 | -------------------------------------------------------------------------------- /41-input-component/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /41-input-component/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/41-input-component/users/public/favicon.ico -------------------------------------------------------------------------------- /41-input-component/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/41-input-component/users/public/logo192.png -------------------------------------------------------------------------------- /41-input-component/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/41-input-component/users/public/logo512.png -------------------------------------------------------------------------------- /41-input-component/users/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 | -------------------------------------------------------------------------------- /41-input-component/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /41-input-component/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /41-input-component/users/src/components/input.jsx: -------------------------------------------------------------------------------- 1 | const Input = ({ name, value, label, onChange }) => { 2 | return ( 3 |
4 | 5 | 13 |
14 | ); 15 | }; 16 | 17 | export default Input; 18 | -------------------------------------------------------------------------------- /41-input-component/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /41-input-component/users/src/components/login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | import Input from './input'; 4 | 5 | class Login extends React.Component { 6 | state ={ 7 | account: { 8 | email: '', 9 | password: '' 10 | } 11 | } 12 | handleSubmit = async (e)=>{ 13 | e.preventDefault(); 14 | } 15 | 16 | handleChange = async ({currentTarget: input})=>{ 17 | const account = {...this.state.account}; 18 | account[input.name] = input.value; 19 | this.setState({account}); 20 | 21 | } 22 | 23 | render() { 24 | const {email,password} = this.state.account; 25 | return ( 26 |
27 | 28 | 29 | 30 |
) 31 | } 32 | } 33 | 34 | export default Login; -------------------------------------------------------------------------------- /41-input-component/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /41-input-component/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /41-input-component/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /41-input-component/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /42-validation/users/.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 | -------------------------------------------------------------------------------- /42-validation/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2", 18 | "yup": "^0.32.9" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /42-validation/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/42-validation/users/public/favicon.ico -------------------------------------------------------------------------------- /42-validation/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/42-validation/users/public/logo192.png -------------------------------------------------------------------------------- /42-validation/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/42-validation/users/public/logo512.png -------------------------------------------------------------------------------- /42-validation/users/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 | -------------------------------------------------------------------------------- /42-validation/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /42-validation/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /42-validation/users/src/components/input.jsx: -------------------------------------------------------------------------------- 1 | const Input = ({ name, value, label, onChange }) => { 2 | return ( 3 |
4 | 5 | 13 |
14 | ); 15 | }; 16 | 17 | export default Input; 18 | -------------------------------------------------------------------------------- /42-validation/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /42-validation/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /42-validation/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /42-validation/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /42-validation/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /43-authentication/users/.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 | -------------------------------------------------------------------------------- /43-authentication/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2", 18 | "yup": "^0.32.9" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /43-authentication/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/43-authentication/users/public/favicon.ico -------------------------------------------------------------------------------- /43-authentication/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/43-authentication/users/public/logo192.png -------------------------------------------------------------------------------- /43-authentication/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/43-authentication/users/public/logo512.png -------------------------------------------------------------------------------- /43-authentication/users/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 | -------------------------------------------------------------------------------- /43-authentication/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /43-authentication/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /43-authentication/users/src/components/input.jsx: -------------------------------------------------------------------------------- 1 | const Input = ({ name, value, label, onChange }) => { 2 | return ( 3 |
4 | 5 | 13 |
14 | ); 15 | }; 16 | 17 | export default Input; 18 | -------------------------------------------------------------------------------- /43-authentication/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /43-authentication/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /43-authentication/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /43-authentication/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /43-authentication/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /44-auth-implementation/users/.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 | -------------------------------------------------------------------------------- /44-auth-implementation/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2", 18 | "yup": "^0.32.9" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /44-auth-implementation/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/44-auth-implementation/users/public/favicon.ico -------------------------------------------------------------------------------- /44-auth-implementation/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/44-auth-implementation/users/public/logo192.png -------------------------------------------------------------------------------- /44-auth-implementation/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/44-auth-implementation/users/public/logo512.png -------------------------------------------------------------------------------- /44-auth-implementation/users/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 | -------------------------------------------------------------------------------- /44-auth-implementation/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /44-auth-implementation/users/src/components/dashboard.jsx: -------------------------------------------------------------------------------- 1 | const Dashboard = () => { 2 | return (

dashboard

); 3 | } 4 | 5 | export default Dashboard; -------------------------------------------------------------------------------- /44-auth-implementation/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /44-auth-implementation/users/src/components/input.jsx: -------------------------------------------------------------------------------- 1 | const Input = ({ name, value, label, onChange }) => { 2 | return ( 3 |
4 | 5 | 13 |
14 | ); 15 | }; 16 | 17 | export default Input; 18 | -------------------------------------------------------------------------------- /44-auth-implementation/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /44-auth-implementation/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /44-auth-implementation/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /44-auth-implementation/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /44-auth-implementation/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /46-send-token/users/.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 | -------------------------------------------------------------------------------- /46-send-token/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2", 18 | "yup": "^0.32.9" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /46-send-token/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/46-send-token/users/public/favicon.ico -------------------------------------------------------------------------------- /46-send-token/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/46-send-token/users/public/logo192.png -------------------------------------------------------------------------------- /46-send-token/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/46-send-token/users/public/logo512.png -------------------------------------------------------------------------------- /46-send-token/users/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 | -------------------------------------------------------------------------------- /46-send-token/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /46-send-token/users/src/components/dashboard.jsx: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import { useEffect} from 'react'; 3 | 4 | axios.defaults.headers.common['token'] = localStorage.getItem('token'); 5 | 6 | const Dashboard = () => { 7 | useEffect(async ()=>{ 8 | console.log('dashboard'); 9 | const response = await axios.get('https://reqres.in/api/unknown'); 10 | console.log(response.data); 11 | },[]) 12 | 13 | return (

dashboard

); 14 | } 15 | 16 | export default Dashboard; -------------------------------------------------------------------------------- /46-send-token/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /46-send-token/users/src/components/input.jsx: -------------------------------------------------------------------------------- 1 | const Input = ({ name, value, label, onChange }) => { 2 | return ( 3 |
4 | 5 | 13 |
14 | ); 15 | }; 16 | 17 | export default Input; 18 | -------------------------------------------------------------------------------- /46-send-token/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /46-send-token/users/src/components/logout.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Logout extends React.Component { 4 | componentDidMount(){ 5 | localStorage.removeItem('token'); 6 | window.location = '/' 7 | } 8 | 9 | render() { 10 | return null; 11 | } 12 | } 13 | 14 | export default Logout; -------------------------------------------------------------------------------- /46-send-token/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /46-send-token/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /46-send-token/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /46-send-token/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /47-protected-route/users/.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 | -------------------------------------------------------------------------------- /47-protected-route/users/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "bootstrap": "^5.1.1", 11 | "query-string": "^7.0.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-loading-skeleton": "^2.2.0", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.1.2", 18 | "yup": "^0.32.9" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /47-protected-route/users/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/47-protected-route/users/public/favicon.ico -------------------------------------------------------------------------------- /47-protected-route/users/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/47-protected-route/users/public/logo192.png -------------------------------------------------------------------------------- /47-protected-route/users/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/react-tutorial-codes/d40ab2e4f09b4133acdac308ea4984263b5cdc8f/47-protected-route/users/public/logo512.png -------------------------------------------------------------------------------- /47-protected-route/users/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 | -------------------------------------------------------------------------------- /47-protected-route/users/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /47-protected-route/users/src/components/dashboard.jsx: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import { useEffect} from 'react'; 3 | 4 | axios.defaults.headers.common['token'] = localStorage.getItem('token'); 5 | 6 | const Dashboard = () => { 7 | useEffect(async ()=>{ 8 | console.log('dashboard'); 9 | const response = await axios.get('https://reqres.in/api/unknown'); 10 | console.log(response.data); 11 | },[]) 12 | 13 | return (

dashboard

); 14 | } 15 | 16 | export default Dashboard; -------------------------------------------------------------------------------- /47-protected-route/users/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return

Home

; 6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /47-protected-route/users/src/components/input.jsx: -------------------------------------------------------------------------------- 1 | const Input = ({ name, value, label, onChange }) => { 2 | return ( 3 |
4 | 5 | 13 |
14 | ); 15 | }; 16 | 17 | export default Input; 18 | -------------------------------------------------------------------------------- /47-protected-route/users/src/components/loading/loadingUsers.jsx: -------------------------------------------------------------------------------- 1 | import Skeleton from 'react-loading-skeleton'; 2 | 3 | const LoadingUsers = () => { 4 | return Array(6).fill({}).map(()=>{ 5 | return( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | }) 13 | } 14 | 15 | export default LoadingUsers; -------------------------------------------------------------------------------- /47-protected-route/users/src/components/logout.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Logout extends React.Component { 4 | componentDidMount(){ 5 | localStorage.removeItem('token'); 6 | window.location = '/' 7 | } 8 | 9 | render() { 10 | return null; 11 | } 12 | } 13 | 14 | export default Logout; -------------------------------------------------------------------------------- /47-protected-route/users/src/components/notFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return (

Not found

); 3 | } 4 | 5 | export default NotFound; -------------------------------------------------------------------------------- /47-protected-route/users/src/components/protect.jsx: -------------------------------------------------------------------------------- 1 | import {Route, Redirect} from 'react-router-dom'; 2 | 3 | const Protect = ({component: Component, ...restProps}) => { 4 | const isAuth = localStorage.getItem('token'); 5 | return ( 6 | { 7 | return isAuth ? : 8 | }} /> 9 | ); 10 | } 11 | 12 | export default Protect; -------------------------------------------------------------------------------- /47-protected-route/users/src/components/register.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Register extends React.Component { 4 | render() { 5 | return

Register

; 6 | } 7 | } 8 | 9 | export default Register; -------------------------------------------------------------------------------- /47-protected-route/users/src/components/user.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import queryString from 'query-string'; 4 | 5 | const User = (props) => { 6 | const [user, setUser] = useState({}); 7 | console.log(queryString.parse(props.location.search)); 8 | 9 | useEffect(async () => { 10 | const response = await axios.get( 11 | `https://reqres.in/api/users/${props.match.params.id}` 12 | ); 13 | setUser(response.data.data); 14 | },[]); 15 | 16 | return ( 17 | <> 18 | 23 |

24 | {user.first_name} {user.last_name} 25 |

26 |
{user.email}
27 | 28 | 29 | ); 30 | }; 31 | 32 | export default User; 33 | -------------------------------------------------------------------------------- /47-protected-route/users/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import App from "./app"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | --------------------------------------------------------------------------------