├── .gitignore ├── .vscode └── settings.json ├── day-1 ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-10 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── PokemonContext.js │ ├── components │ │ ├── PokemonFilter.jsx │ │ ├── PokemonInfo.jsx │ │ ├── PokemonRow.jsx │ │ └── PokemonTable.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── pokemonType.js │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-11 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── PokemonContext.js │ ├── components │ │ ├── PokemonFilter.jsx │ │ ├── PokemonInfo.jsx │ │ ├── PokemonRow.jsx │ │ └── PokemonTable.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── pokemonType.js │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-12 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ │ ├── PokemonFilter.jsx │ │ ├── PokemonInfo.jsx │ │ ├── PokemonRow.jsx │ │ └── PokemonTable.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── pokemonType.js │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-13 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ │ ├── PokemonFilter.jsx │ │ ├── PokemonInfo.jsx │ │ ├── PokemonRow.jsx │ │ └── PokemonTable.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── pokemonType.js │ ├── serviceWorker.js │ ├── setupTests.js │ └── store.js └── yarn.lock ├── day-14 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ │ ├── PokemonFilter.jsx │ │ ├── PokemonInfo.jsx │ │ ├── PokemonRow.jsx │ │ └── PokemonTable.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── pokemonType.js │ ├── serviceWorker.js │ ├── setupTests.js │ └── store.js └── yarn.lock ├── day-14b ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ │ ├── PokemonFilter.jsx │ │ ├── PokemonInfo.jsx │ │ ├── PokemonRow.jsx │ │ └── PokemonTable.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── pokemonType.js │ ├── serviceWorker.js │ ├── setupTests.js │ └── store.js └── yarn.lock ├── day-15 ├── .gitignore ├── README.md ├── components │ ├── PokemonFilter.jsx │ ├── PokemonInfo.jsx │ ├── PokemonRow.jsx │ └── PokemonTable.jsx ├── package.json ├── pages │ ├── index.js │ └── pokemon │ │ └── [id].js ├── public │ ├── favicon.ico │ ├── pokemon.json │ └── zeit.svg ├── src │ ├── pokemonType.js │ └── store.js └── yarn.lock ├── day-16 ├── .gitignore ├── README.md ├── components │ ├── PokemonFilter.jsx │ ├── PokemonInfo.jsx │ ├── PokemonRow.jsx │ └── PokemonTable.jsx ├── package.json ├── pages │ ├── index.js │ └── pokemon │ │ └── [id].js ├── public │ ├── favicon.ico │ ├── pokemon.json │ └── zeit.svg ├── src │ ├── pokemonType.js │ └── store.js └── yarn.lock ├── day-17 ├── .gitignore ├── README.md ├── components │ ├── PokemonFilter.jsx │ ├── PokemonInfo.jsx │ ├── PokemonRow.jsx │ └── PokemonTable.jsx ├── next.config.js ├── package.json ├── pages │ ├── index.js │ └── pokemon │ │ └── [id].js ├── public │ ├── favicon.ico │ └── zeit.svg ├── src │ ├── pokemon.json │ ├── pokemonType.js │ └── store.js └── yarn.lock ├── day-2 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-3 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-4 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-5 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-6 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-7 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── day-8 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── pokemon.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pokemon.json │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock └── day-9 ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── pokemon.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── pokemon.json ├── serviceWorker.js └── setupTests.js └── yarn.lock /.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 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /day-1/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day-1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day-1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /day-1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-1/public/favicon.ico -------------------------------------------------------------------------------- /day-1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-1/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-1/public/logo192.png -------------------------------------------------------------------------------- /day-1/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-1/public/logo512.png -------------------------------------------------------------------------------- /day-1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-1/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-1/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day-1/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 |
9 | logo 10 |

11 | Edit src/App.js and save to reload. 12 |

13 | 19 | Learn React 20 | 21 |
22 |
23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /day-1/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-1/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-1/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-10/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@material-ui/core": "^4.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.3.2", 12 | "@testing-library/user-event": "^7.1.2", 13 | "gh-pages": "^3.1.0", 14 | "react": "^16.13.1", 15 | "react-dom": "^16.13.1", 16 | "react-scripts": "3.4.3" 17 | }, 18 | "scripts": { 19 | "predeploy": "npm run build", 20 | "deploy": "gh-pages -d build", 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": "react-app" 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 | -------------------------------------------------------------------------------- /day-10/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-10/public/favicon.ico -------------------------------------------------------------------------------- /day-10/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-10/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-10/public/logo192.png -------------------------------------------------------------------------------- /day-10/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-10/public/logo512.png -------------------------------------------------------------------------------- /day-10/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-10/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-10/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-10/src/App.css -------------------------------------------------------------------------------- /day-10/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { CssBaseline } from "@material-ui/core"; 4 | 5 | import PokemonInfo from "./components/PokemonInfo"; 6 | import PokemonContext from "./PokemonContext"; 7 | import PokemonFilter from "./components/PokemonFilter"; 8 | import PokemonTable from "./components/PokemonTable"; 9 | 10 | import "./App.css"; 11 | 12 | const Title = styled.h1` 13 | text-align: center; 14 | `; 15 | const PageContainer = styled.div` 16 | margin: auto; 17 | width: 800px; 18 | padding-top: 1em; 19 | `; 20 | const TwoColumnLayout = styled.div` 21 | display: grid; 22 | grid-template-columns: 80% 20%; 23 | grid-column-gap: 1rem; 24 | `; 25 | 26 | function App() { 27 | const [filter, filterSet] = React.useState(""); 28 | const [pokemon, pokemonSet] = React.useState(null); 29 | const [selectedPokemon, selectedPokemonSet] = React.useState(null); 30 | 31 | React.useEffect(() => { 32 | fetch("/starting-react/pokemon.json") 33 | .then((resp) => resp.json()) 34 | .then((data) => pokemonSet(data)); 35 | }, []); 36 | 37 | if (!pokemon) { 38 | return
Loading data
; 39 | } 40 | 41 | return ( 42 | 52 | 53 | 54 | Pokemon Search 55 | 56 |
57 | 58 | 59 |
60 | 61 | 62 | 63 | 64 | ); 65 | } 66 | 67 | export default App; 68 | -------------------------------------------------------------------------------- /day-10/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-10/src/PokemonContext.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const PokemonContext = React.createContext({}); 4 | 5 | export default PokemonContext; 6 | -------------------------------------------------------------------------------- /day-10/src/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import styled from "@emotion/styled"; 3 | 4 | import PokemonContext from "../PokemonContext"; 5 | 6 | const Input = styled.input` 7 | width: 100%; 8 | padding: 0.2rem; 9 | font-size: large; 10 | `; 11 | 12 | const PokemonFilter = () => { 13 | const { filter, filterSet } = useContext(PokemonContext); 14 | 15 | return ( 16 | filterSet(evt.target.value)} 20 | /> 21 | ); 22 | }; 23 | 24 | export default PokemonFilter; 25 | -------------------------------------------------------------------------------- /day-10/src/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | 3 | import PokemonContext from "../PokemonContext"; 4 | 5 | const PokemonInfo = () => { 6 | const { selectedPokemon } = useContext(PokemonContext); 7 | 8 | return selectedPokemon ? ( 9 |
10 |

{selectedPokemon.name.english}

11 | 12 | 13 | {Object.keys(selectedPokemon.base).map((key) => ( 14 | 15 | 16 | 17 | 18 | ))} 19 | 20 |
{key}{selectedPokemon.base[key]}
21 |
22 | ) : null; 23 | }; 24 | 25 | export default PokemonInfo; 26 | -------------------------------------------------------------------------------- /day-10/src/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { Button } from "@material-ui/core"; 4 | 5 | import PokemonType from "../pokemonType"; 6 | 7 | const PokemonRow = ({ pokemon, onClick }) => ( 8 | <> 9 | 10 | {pokemon.name.english} 11 | {pokemon.type.join(", ")} 12 | 13 | 20 | 21 | 22 | 23 | ); 24 | 25 | PokemonRow.propTypes = { 26 | pokemon: PropTypes.arrayOf(PokemonType), 27 | }; 28 | 29 | export default PokemonRow; 30 | -------------------------------------------------------------------------------- /day-10/src/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | 3 | import PokemonRow from "./PokemonRow"; 4 | import PokemonContext from "../PokemonContext"; 5 | 6 | function PokemonTable() { 7 | const { filter, pokemon, selectedPokemonSet } = useContext(PokemonContext); 8 | return ( 9 | 10 | 11 | {pokemon 12 | .filter(({ name: { english } }) => 13 | english.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) 14 | ) 15 | .slice(0, 20) 16 | .map((pokemon) => ( 17 | selectedPokemonSet(pokemon)} 20 | /> 21 | ))} 22 | 23 |
24 | ); 25 | } 26 | 27 | export default PokemonTable; 28 | -------------------------------------------------------------------------------- /day-10/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-10/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-10/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-10/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.string.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-10/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-11/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@material-ui/core": "^4.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.3.2", 12 | "@testing-library/user-event": "^7.1.2", 13 | "gh-pages": "^3.1.0", 14 | "react": "^16.13.1", 15 | "react-dom": "^16.13.1", 16 | "react-scripts": "3.4.3" 17 | }, 18 | "scripts": { 19 | "predeploy": "npm run build", 20 | "deploy": "gh-pages -d build", 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": "react-app" 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 | -------------------------------------------------------------------------------- /day-11/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-11/public/favicon.ico -------------------------------------------------------------------------------- /day-11/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-11/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-11/public/logo192.png -------------------------------------------------------------------------------- /day-11/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-11/public/logo512.png -------------------------------------------------------------------------------- /day-11/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-11/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-11/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-11/src/App.css -------------------------------------------------------------------------------- /day-11/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { CssBaseline } from "@material-ui/core"; 4 | 5 | import PokemonInfo from "./components/PokemonInfo"; 6 | import PokemonContext from "./PokemonContext"; 7 | import PokemonFilter from "./components/PokemonFilter"; 8 | import PokemonTable from "./components/PokemonTable"; 9 | 10 | import "./App.css"; 11 | 12 | const Title = styled.h1` 13 | text-align: center; 14 | `; 15 | const PageContainer = styled.div` 16 | margin: auto; 17 | width: 800px; 18 | padding-top: 1em; 19 | `; 20 | const TwoColumnLayout = styled.div` 21 | display: grid; 22 | grid-template-columns: 80% 20%; 23 | grid-column-gap: 1rem; 24 | `; 25 | 26 | const stateReducer = (state, { type, payload }) => { 27 | switch (type) { 28 | case "SET_FILTER": 29 | return { 30 | ...state, 31 | filter: payload, 32 | }; 33 | case "SET_POKEMON": 34 | return { 35 | ...state, 36 | pokemon: payload, 37 | }; 38 | case "SET_SELECTED_POKEMON": 39 | return { 40 | ...state, 41 | selectedPokemon: payload, 42 | }; 43 | default: 44 | throw new Error(); 45 | } 46 | }; 47 | 48 | function App() { 49 | const [state, dispatch] = React.useReducer(stateReducer, { 50 | filter: "", 51 | pokemon: [], 52 | selectedPokemon: null, 53 | }); 54 | 55 | React.useEffect(() => { 56 | fetch("/starting-react/pokemon.json") 57 | .then((resp) => resp.json()) 58 | .then((payload) => 59 | dispatch({ 60 | type: "SET_POKEMON", 61 | payload, 62 | }) 63 | ); 64 | }, []); 65 | 66 | if (!state.pokemon) { 67 | return
Loading data
; 68 | } 69 | 70 | return ( 71 | 77 | 78 | 79 | Pokemon Search 80 | 81 |
82 | 83 | 84 |
85 | 86 | 87 | 88 | 89 | ); 90 | } 91 | 92 | export default App; 93 | -------------------------------------------------------------------------------- /day-11/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-11/src/PokemonContext.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const PokemonContext = React.createContext({}); 4 | 5 | export default PokemonContext; 6 | -------------------------------------------------------------------------------- /day-11/src/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import styled from "@emotion/styled"; 3 | 4 | import PokemonContext from "../PokemonContext"; 5 | 6 | const Input = styled.input` 7 | width: 100%; 8 | padding: 0.2rem; 9 | font-size: large; 10 | `; 11 | 12 | const PokemonFilter = () => { 13 | const { state, dispatch } = useContext(PokemonContext); 14 | 15 | return ( 16 | 20 | dispatch({ 21 | type: "SET_FILTER", 22 | payload: evt.target.value, 23 | }) 24 | } 25 | /> 26 | ); 27 | }; 28 | 29 | export default PokemonFilter; 30 | -------------------------------------------------------------------------------- /day-11/src/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | 3 | import PokemonContext from "../PokemonContext"; 4 | 5 | const PokemonInfo = () => { 6 | const { 7 | state: { selectedPokemon }, 8 | } = useContext(PokemonContext); 9 | 10 | return selectedPokemon ? ( 11 |
12 |

{selectedPokemon.name.english}

13 | 14 | 15 | {Object.keys(selectedPokemon.base).map((key) => ( 16 | 17 | 18 | 19 | 20 | ))} 21 | 22 |
{key}{selectedPokemon.base[key]}
23 |
24 | ) : null; 25 | }; 26 | 27 | export default PokemonInfo; 28 | -------------------------------------------------------------------------------- /day-11/src/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { Button } from "@material-ui/core"; 4 | 5 | import PokemonType from "../pokemonType"; 6 | 7 | const PokemonRow = ({ pokemon, onClick }) => ( 8 | <> 9 | 10 | {pokemon.name.english} 11 | {pokemon.type.join(", ")} 12 | 13 | 20 | 21 | 22 | 23 | ); 24 | 25 | PokemonRow.propTypes = { 26 | pokemon: PropTypes.arrayOf(PokemonType), 27 | }; 28 | 29 | export default PokemonRow; 30 | -------------------------------------------------------------------------------- /day-11/src/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | 3 | import PokemonRow from "./PokemonRow"; 4 | import PokemonContext from "../PokemonContext"; 5 | 6 | function PokemonTable() { 7 | const { 8 | state: { filter, pokemon }, 9 | dispatch, 10 | } = useContext(PokemonContext); 11 | return ( 12 | 13 | 14 | {pokemon 15 | .filter(({ name: { english } }) => 16 | english.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) 17 | ) 18 | .slice(0, 20) 19 | .map((pokemon) => ( 20 | 23 | dispatch({ 24 | type: "SET_SELECTED_POKEMON", 25 | payload: pokemon, 26 | }) 27 | } 28 | /> 29 | ))} 30 | 31 |
32 | ); 33 | } 34 | 35 | export default PokemonTable; 36 | -------------------------------------------------------------------------------- /day-11/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-11/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-11/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-11/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.string.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-11/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-12/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@material-ui/core": "^4.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.3.2", 12 | "@testing-library/user-event": "^7.1.2", 13 | "gh-pages": "^3.1.0", 14 | "react": "^16.13.1", 15 | "react-dom": "^16.13.1", 16 | "react-redux": "^7.2.1", 17 | "react-scripts": "3.4.3", 18 | "redux": "^4.0.5" 19 | }, 20 | "scripts": { 21 | "predeploy": "npm run build", 22 | "deploy": "gh-pages -d build", 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": "react-app" 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 | -------------------------------------------------------------------------------- /day-12/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-12/public/favicon.ico -------------------------------------------------------------------------------- /day-12/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-12/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-12/public/logo192.png -------------------------------------------------------------------------------- /day-12/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-12/public/logo512.png -------------------------------------------------------------------------------- /day-12/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-12/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-12/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-12/src/App.css -------------------------------------------------------------------------------- /day-12/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { CssBaseline } from "@material-ui/core"; 4 | import { createStore } from "redux"; 5 | import { Provider, useSelector, useDispatch } from "react-redux"; 6 | 7 | import PokemonInfo from "./components/PokemonInfo"; 8 | import PokemonFilter from "./components/PokemonFilter"; 9 | import PokemonTable from "./components/PokemonTable"; 10 | 11 | import "./App.css"; 12 | 13 | const Title = styled.h1` 14 | text-align: center; 15 | `; 16 | const PageContainer = styled.div` 17 | margin: auto; 18 | width: 800px; 19 | padding-top: 1em; 20 | `; 21 | const TwoColumnLayout = styled.div` 22 | display: grid; 23 | grid-template-columns: 80% 20%; 24 | grid-column-gap: 1rem; 25 | `; 26 | 27 | const stateReducer = ( 28 | state = { pokemon: [], filter: "", selectedPokemon: null }, 29 | { type, payload } 30 | ) => { 31 | switch (type) { 32 | case "SET_FILTER": 33 | return { 34 | ...state, 35 | filter: payload, 36 | }; 37 | case "SET_POKEMON": 38 | return { 39 | ...state, 40 | pokemon: payload, 41 | }; 42 | case "SET_SELECTED_POKEMON": 43 | return { 44 | ...state, 45 | selectedPokemon: payload, 46 | }; 47 | default: 48 | return state; 49 | } 50 | }; 51 | 52 | const store = createStore(stateReducer); 53 | 54 | function App() { 55 | const pokemon = useSelector(({ pokemon }) => pokemon); 56 | const dispatch = useDispatch(); 57 | 58 | React.useEffect(() => { 59 | fetch("/starting-react/pokemon.json") 60 | .then((resp) => resp.json()) 61 | .then((payload) => 62 | dispatch({ 63 | type: "SET_POKEMON", 64 | payload, 65 | }) 66 | ); 67 | }, []); 68 | 69 | if (!pokemon) { 70 | return
Loading data
; 71 | } 72 | 73 | return ( 74 | 75 | 76 | Pokemon Search 77 | 78 |
79 | 80 | 81 |
82 | 83 | 84 | 85 | ); 86 | } 87 | 88 | export default () => ( 89 | 90 | 91 | 92 | ); 93 | -------------------------------------------------------------------------------- /day-12/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-12/src/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { useSelector, useDispatch } from "react-redux"; 4 | 5 | const Input = styled.input` 6 | width: 100%; 7 | padding: 0.2rem; 8 | font-size: large; 9 | `; 10 | 11 | const PokemonFilter = () => { 12 | const filter = useSelector(({ filter }) => filter); 13 | const dispatch = useDispatch(); 14 | 15 | return ( 16 | 20 | dispatch({ 21 | type: "SET_FILTER", 22 | payload: evt.target.value, 23 | }) 24 | } 25 | /> 26 | ); 27 | }; 28 | 29 | export default PokemonFilter; 30 | -------------------------------------------------------------------------------- /day-12/src/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector } from "react-redux"; 3 | 4 | const PokemonInfo = () => { 5 | const selectedPokemon = useSelector(({ selectedPokemon }) => selectedPokemon); 6 | 7 | return selectedPokemon ? ( 8 |
9 |

{selectedPokemon.name.english}

10 | 11 | 12 | {Object.keys(selectedPokemon.base).map((key) => ( 13 | 14 | 15 | 16 | 17 | ))} 18 | 19 |
{key}{selectedPokemon.base[key]}
20 |
21 | ) : null; 22 | }; 23 | 24 | export default PokemonInfo; 25 | -------------------------------------------------------------------------------- /day-12/src/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { Button } from "@material-ui/core"; 4 | 5 | import PokemonType from "../pokemonType"; 6 | 7 | const PokemonRow = ({ pokemon, onClick }) => ( 8 | <> 9 | 10 | {pokemon.name.english} 11 | {pokemon.type.join(", ")} 12 | 13 | 20 | 21 | 22 | 23 | ); 24 | 25 | PokemonRow.propTypes = { 26 | pokemon: PropTypes.arrayOf(PokemonType), 27 | }; 28 | 29 | export default PokemonRow; 30 | -------------------------------------------------------------------------------- /day-12/src/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector, useDispatch } from "react-redux"; 3 | 4 | import PokemonRow from "./PokemonRow"; 5 | 6 | function PokemonTable() { 7 | const { filter, pokemon } = useSelector(({ filter, pokemon }) => ({ 8 | filter, 9 | pokemon, 10 | })); 11 | const dispatch = useDispatch(); 12 | 13 | return ( 14 | 15 | 16 | {pokemon 17 | .filter(({ name: { english } }) => 18 | english.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) 19 | ) 20 | .slice(0, 20) 21 | .map((pokemon) => ( 22 | 25 | dispatch({ 26 | type: "SET_SELECTED_POKEMON", 27 | payload: pokemon, 28 | }) 29 | } 30 | /> 31 | ))} 32 | 33 |
34 | ); 35 | } 36 | 37 | export default PokemonTable; 38 | -------------------------------------------------------------------------------- /day-12/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-12/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-12/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-12/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.string.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-12/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-13/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@material-ui/core": "^4.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.3.2", 12 | "@testing-library/user-event": "^7.1.2", 13 | "gh-pages": "^3.1.0", 14 | "react": "^16.13.1", 15 | "react-dom": "^16.13.1", 16 | "react-scripts": "3.4.3", 17 | "zustand": "^3.1.3" 18 | }, 19 | "scripts": { 20 | "predeploy": "npm run build", 21 | "deploy": "gh-pages -d build", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 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 | -------------------------------------------------------------------------------- /day-13/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-13/public/favicon.ico -------------------------------------------------------------------------------- /day-13/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-13/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-13/public/logo192.png -------------------------------------------------------------------------------- /day-13/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-13/public/logo512.png -------------------------------------------------------------------------------- /day-13/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-13/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-13/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-13/src/App.css -------------------------------------------------------------------------------- /day-13/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { CssBaseline } from "@material-ui/core"; 4 | 5 | import PokemonInfo from "./components/PokemonInfo"; 6 | import PokemonFilter from "./components/PokemonFilter"; 7 | import PokemonTable from "./components/PokemonTable"; 8 | 9 | import "./App.css"; 10 | 11 | const Title = styled.h1` 12 | text-align: center; 13 | `; 14 | const PageContainer = styled.div` 15 | margin: auto; 16 | width: 800px; 17 | padding-top: 1em; 18 | `; 19 | const TwoColumnLayout = styled.div` 20 | display: grid; 21 | grid-template-columns: 80% 20%; 22 | grid-column-gap: 1rem; 23 | `; 24 | 25 | function App() { 26 | return ( 27 | 28 | 29 | Pokemon Search 30 | 31 |
32 | 33 | 34 |
35 | 36 | 37 | 38 | ); 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /day-13/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-13/src/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | 4 | import useStore from "../store"; 5 | 6 | const Input = styled.input` 7 | width: 100%; 8 | padding: 0.2rem; 9 | font-size: large; 10 | `; 11 | 12 | const PokemonFilter = () => { 13 | const filter = useStore((state) => state.filter); 14 | const setFilter = useStore((state) => state.setFilter); 15 | 16 | return ( 17 | setFilter(evt.target.value)} 21 | /> 22 | ); 23 | }; 24 | 25 | export default PokemonFilter; 26 | -------------------------------------------------------------------------------- /day-13/src/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import useStore from "../store"; 4 | 5 | const PokemonInfo = () => { 6 | const selectedPokemon = useStore((state) => state.selectedPokemon); 7 | 8 | return selectedPokemon ? ( 9 |
10 |

{selectedPokemon.name.english}

11 | 12 | 13 | {Object.keys(selectedPokemon.base).map((key) => ( 14 | 15 | 16 | 17 | 18 | ))} 19 | 20 |
{key}{selectedPokemon.base[key]}
21 |
22 | ) : null; 23 | }; 24 | 25 | export default PokemonInfo; 26 | -------------------------------------------------------------------------------- /day-13/src/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { Button } from "@material-ui/core"; 4 | 5 | import PokemonType from "../pokemonType"; 6 | 7 | const PokemonRow = ({ pokemon, onClick }) => ( 8 | <> 9 | 10 | {pokemon.name.english} 11 | {pokemon.type.join(", ")} 12 | 13 | 20 | 21 | 22 | 23 | ); 24 | 25 | PokemonRow.propTypes = { 26 | pokemon: PropTypes.arrayOf(PokemonType), 27 | }; 28 | 29 | export default PokemonRow; 30 | -------------------------------------------------------------------------------- /day-13/src/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import PokemonRow from "./PokemonRow"; 4 | import useStore from "../store"; 5 | 6 | function PokemonTable() { 7 | const filter = useStore((state) => state.filter); 8 | const pokemon = useStore((state) => state.pokemon); 9 | const setSelectedPokemon = useStore((state) => state.setSelectedPokemon); 10 | 11 | return ( 12 | 13 | 14 | {pokemon 15 | .filter(({ name: { english } }) => 16 | english.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) 17 | ) 18 | .slice(0, 20) 19 | .map((pokemon) => ( 20 | setSelectedPokemon(pokemon)} 23 | /> 24 | ))} 25 | 26 |
27 | ); 28 | } 29 | 30 | export default PokemonTable; 31 | -------------------------------------------------------------------------------- /day-13/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-13/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-13/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-13/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.string.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-13/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-13/src/store.js: -------------------------------------------------------------------------------- 1 | import create from "zustand"; 2 | 3 | const useStore = create((set) => ({ 4 | pokemon: [], 5 | filter: "", 6 | selectedPokemon: null, 7 | setPokemon: (pokemon) => set((state) => ({ ...state, pokemon })), 8 | setFilter: (filter) => set((state) => ({ ...state, filter })), 9 | setSelectedPokemon: (selectedPokemon) => 10 | set((state) => ({ ...state, selectedPokemon })), 11 | })); 12 | 13 | fetch("/starting-react/pokemon.json") 14 | .then((resp) => resp.json()) 15 | .then((pokemon) => useStore.setState((state) => ({ ...state, pokemon }))); 16 | 17 | export default useStore; 18 | -------------------------------------------------------------------------------- /day-14/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@material-ui/core": "^4.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.3.2", 12 | "@testing-library/user-event": "^7.1.2", 13 | "gh-pages": "^3.1.0", 14 | "mobx": "^6.0.1", 15 | "mobx-react": "^7.0.0", 16 | "react": "^16.13.1", 17 | "react-dom": "^16.13.1", 18 | "react-scripts": "3.4.3" 19 | }, 20 | "scripts": { 21 | "predeploy": "npm run build", 22 | "deploy": "gh-pages -d build", 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": "react-app" 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 | -------------------------------------------------------------------------------- /day-14/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-14/public/favicon.ico -------------------------------------------------------------------------------- /day-14/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-14/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-14/public/logo192.png -------------------------------------------------------------------------------- /day-14/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-14/public/logo512.png -------------------------------------------------------------------------------- /day-14/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-14/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-14/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-14/src/App.css -------------------------------------------------------------------------------- /day-14/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { CssBaseline } from "@material-ui/core"; 4 | 5 | import PokemonInfo from "./components/PokemonInfo"; 6 | import PokemonFilter from "./components/PokemonFilter"; 7 | import PokemonTable from "./components/PokemonTable"; 8 | 9 | import "./App.css"; 10 | 11 | const Title = styled.h1` 12 | text-align: center; 13 | `; 14 | const PageContainer = styled.div` 15 | margin: auto; 16 | width: 800px; 17 | padding-top: 1em; 18 | `; 19 | const TwoColumnLayout = styled.div` 20 | display: grid; 21 | grid-template-columns: 80% 20%; 22 | grid-column-gap: 1rem; 23 | `; 24 | 25 | function App() { 26 | return ( 27 | 28 | 29 | Pokemon Search 30 | 31 |
32 | 33 | 34 |
35 | 36 | 37 | 38 | ); 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /day-14/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-14/src/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { observer } from "mobx-react"; 4 | 5 | import store from "../store"; 6 | 7 | const Input = styled.input` 8 | width: 100%; 9 | padding: 0.2rem; 10 | font-size: large; 11 | `; 12 | 13 | const PokemonFilter = () => { 14 | return ( 15 | store.setFilter(evt.target.value)} 19 | /> 20 | ); 21 | }; 22 | 23 | export default observer(PokemonFilter); 24 | -------------------------------------------------------------------------------- /day-14/src/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import store from "../store"; 5 | 6 | const PokemonInfo = () => { 7 | return store.selectedPokemon ? ( 8 |
9 |

{store.selectedPokemon.name.english}

10 | 11 | 12 | {Object.keys(store.selectedPokemon.base).map((key) => ( 13 | 14 | 15 | 16 | 17 | ))} 18 | 19 |
{key}{store.selectedPokemon.base[key]}
20 |
21 | ) : null; 22 | }; 23 | 24 | export default observer(PokemonInfo); 25 | -------------------------------------------------------------------------------- /day-14/src/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { Button } from "@material-ui/core"; 4 | 5 | import PokemonType from "../pokemonType"; 6 | 7 | const PokemonRow = ({ pokemon, onClick }) => ( 8 | <> 9 | 10 | {pokemon.name.english} 11 | {pokemon.type.join(", ")} 12 | 13 | 20 | 21 | 22 | 23 | ); 24 | 25 | PokemonRow.propTypes = { 26 | pokemon: PropTypes.arrayOf(PokemonType), 27 | }; 28 | 29 | export default PokemonRow; 30 | -------------------------------------------------------------------------------- /day-14/src/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import PokemonRow from "./PokemonRow"; 5 | import store from "../store"; 6 | 7 | function PokemonTable() { 8 | return ( 9 | 10 | 11 | {store.filteredPokemon.map((pokemon) => ( 12 | store.setSelectedPokemon(pokemon)} 15 | /> 16 | ))} 17 | 18 |
19 | ); 20 | } 21 | 22 | export default observer(PokemonTable); 23 | -------------------------------------------------------------------------------- /day-14/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-14/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-14/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-14/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.string.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-14/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-14/src/store.js: -------------------------------------------------------------------------------- 1 | import { makeObservable, observable, computed } from "mobx"; 2 | 3 | class Store { 4 | pokemon = []; 5 | filter = ""; 6 | selectedPokemon = null; 7 | 8 | constructor() { 9 | makeObservable(this, { 10 | pokemon: observable, 11 | filter: observable, 12 | selectedPokemon: observable, 13 | filteredPokemon: computed, 14 | }); 15 | } 16 | 17 | get filteredPokemon() { 18 | return this.pokemon 19 | .filter(({ name: { english } }) => 20 | english.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()) 21 | ) 22 | .slice(0, 20); 23 | } 24 | 25 | setPokemon(pokemon) { 26 | this.pokemon = pokemon; 27 | } 28 | setFilter(filter) { 29 | this.filter = filter; 30 | } 31 | setSelectedPokemon(selectedPokemon) { 32 | this.selectedPokemon = selectedPokemon; 33 | } 34 | } 35 | 36 | const store = new Store(); 37 | 38 | fetch("/starting-react/pokemon.json") 39 | .then((resp) => resp.json()) 40 | .then((pokemon) => store.setPokemon(pokemon)); 41 | 42 | export default store; 43 | -------------------------------------------------------------------------------- /day-14b/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@material-ui/core": "^4.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.3.2", 12 | "@testing-library/user-event": "^7.1.2", 13 | "gh-pages": "^3.1.0", 14 | "mobx": "^6.0.1", 15 | "mobx-react": "^7.0.0", 16 | "mobx-state-tree": "^3.17.2", 17 | "react": "^16.13.1", 18 | "react-dom": "^16.13.1", 19 | "react-scripts": "3.4.3" 20 | }, 21 | "scripts": { 22 | "predeploy": "npm run build", 23 | "deploy": "gh-pages -d build", 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": "react-app" 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 | -------------------------------------------------------------------------------- /day-14b/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-14b/public/favicon.ico -------------------------------------------------------------------------------- /day-14b/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-14b/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-14b/public/logo192.png -------------------------------------------------------------------------------- /day-14b/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-14b/public/logo512.png -------------------------------------------------------------------------------- /day-14b/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-14b/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-14b/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-14b/src/App.css -------------------------------------------------------------------------------- /day-14b/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { CssBaseline } from "@material-ui/core"; 4 | 5 | import PokemonInfo from "./components/PokemonInfo"; 6 | import PokemonFilter from "./components/PokemonFilter"; 7 | import PokemonTable from "./components/PokemonTable"; 8 | 9 | import "./App.css"; 10 | 11 | const Title = styled.h1` 12 | text-align: center; 13 | `; 14 | const PageContainer = styled.div` 15 | margin: auto; 16 | width: 800px; 17 | padding-top: 1em; 18 | `; 19 | const TwoColumnLayout = styled.div` 20 | display: grid; 21 | grid-template-columns: 80% 20%; 22 | grid-column-gap: 1rem; 23 | `; 24 | 25 | function App({ store }) { 26 | return ( 27 | 28 | 29 | Pokemon Search 30 | 31 |
32 | 33 | {/* 34 | */} 35 |
36 | {/* */} 37 | 38 | 39 | ); 40 | } 41 | 42 | export default App; 43 | -------------------------------------------------------------------------------- /day-14b/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-14b/src/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { observer } from "mobx-react"; 4 | 5 | const Input = styled.input` 6 | width: 100%; 7 | padding: 0.2rem; 8 | font-size: large; 9 | `; 10 | 11 | const PokemonFilter = ({ store }) => { 12 | return ( 13 | store.setFilter(evt.target.value)} 17 | /> 18 | ); 19 | }; 20 | 21 | export default observer(PokemonFilter); 22 | -------------------------------------------------------------------------------- /day-14b/src/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import store from "../store"; 5 | 6 | const PokemonInfo = () => { 7 | return store.selectedPokemon ? ( 8 |
9 |

{store.selectedPokemon.name.english}

10 | 11 | 12 | {Object.keys(store.selectedPokemon.base).map((key) => ( 13 | 14 | 15 | 16 | 17 | ))} 18 | 19 |
{key}{store.selectedPokemon.base[key]}
20 |
21 | ) : null; 22 | }; 23 | 24 | export default observer(PokemonInfo); 25 | -------------------------------------------------------------------------------- /day-14b/src/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { Button } from "@material-ui/core"; 4 | 5 | import PokemonType from "../pokemonType"; 6 | 7 | const PokemonRow = ({ pokemon, onClick }) => ( 8 | <> 9 | 10 | {pokemon.name.english} 11 | {pokemon.type.join(", ")} 12 | 13 | 20 | 21 | 22 | 23 | ); 24 | 25 | PokemonRow.propTypes = { 26 | pokemon: PropTypes.arrayOf(PokemonType), 27 | }; 28 | 29 | export default PokemonRow; 30 | -------------------------------------------------------------------------------- /day-14b/src/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import PokemonRow from "./PokemonRow"; 5 | import store from "../store"; 6 | 7 | function PokemonTable() { 8 | return ( 9 | 10 | 11 | {store.filteredPokemon.map((pokemon) => ( 12 | store.setSelectedPokemon(pokemon)} 15 | /> 16 | ))} 17 | 18 |
19 | ); 20 | } 21 | 22 | export default observer(PokemonTable); 23 | -------------------------------------------------------------------------------- /day-14b/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-14b/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | import storeInstance from "./store"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById("root") 13 | ); 14 | 15 | // If you want your app to work offline and load faster, you can change 16 | // unregister() to register() below. Note this comes with some pitfalls. 17 | // Learn more about service workers: https://bit.ly/CRA-PWA 18 | serviceWorker.unregister(); 19 | -------------------------------------------------------------------------------- /day-14b/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.string.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-14b/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-14b/src/store.js: -------------------------------------------------------------------------------- 1 | import { types } from "mobx-state-tree"; 2 | import { observable } from "mobx"; 3 | 4 | const PokemonAttribute = types.model("PokemonAttribute", { 5 | attribute: types.string, 6 | value: types.string, 7 | }); 8 | 9 | const Pokemon = types.model("Pokemon", { 10 | name: types.string, 11 | types: types.array(types.string), 12 | base: types.array(PokemonAttribute), 13 | }); 14 | 15 | const PokemonList = types 16 | .model("PokemonList", { 17 | pokemon: types.optional(types.array(Pokemon), []), 18 | filter: types.optional(types.string, ""), 19 | selectedPokemon: types.maybeNull(types.reference(Pokemon)), 20 | }) 21 | .views((self) => ({ 22 | get filteredPokemon() { 23 | const filterLC = self.filter.toLowerCase(); 24 | return self.pokemon.filter(({ name }) => 25 | name.toLowerCase().includes(filterLC) 26 | ); 27 | }, 28 | })) 29 | .actions((self) => ({ 30 | addPokemon(pokemon) { 31 | self.pokemon.push(pokemon); 32 | }, 33 | setFilter(filter) { 34 | self.filter = filter; 35 | }, 36 | setSelectedPokemon(selected) { 37 | self.selectedPokemon = selected; 38 | }, 39 | })); 40 | 41 | const store = PokemonList.create({ 42 | filter: "", 43 | pokemon: [], 44 | selectedPokemon: null, 45 | }); 46 | console.log(store); 47 | 48 | // fetch("/starting-react/pokemon.json") 49 | // .then((resp) => resp.json()) 50 | // .then((pokemonList) => { 51 | // pokemonList.forEach((pokemon) => { 52 | // const base = []; 53 | // Object.entries(pokemon.base).forEach(([attribute, value]) => { 54 | // base.push( 55 | // PokemonAttribute.create({ 56 | // attribute, 57 | // value, 58 | // }) 59 | // ); 60 | // }); 61 | // store.addPokemon( 62 | // Pokemon.create({ 63 | // name: pokemon.name.english, 64 | // types: pokemon.types, 65 | // base, 66 | // }) 67 | // ); 68 | // }); 69 | // }); 70 | 71 | const storeInstance = observable.box(store); 72 | 73 | export default storeInstance; 74 | -------------------------------------------------------------------------------- /day-15/.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | -------------------------------------------------------------------------------- /day-15/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | ## Learn More 18 | 19 | To learn more about Next.js, take a look at the following resources: 20 | 21 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 22 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 23 | 24 | You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome! 25 | 26 | ## Deploy on ZEIT Now 27 | 28 | The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 29 | 30 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 31 | -------------------------------------------------------------------------------- /day-15/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { observer } from "mobx-react"; 4 | 5 | import store from "../src/store"; 6 | 7 | const Input = styled.input` 8 | width: 100%; 9 | padding: 0.2rem; 10 | font-size: large; 11 | `; 12 | 13 | const PokemonFilter = () => { 14 | return ( 15 | store.setFilter(evt.target.value)} 19 | /> 20 | ); 21 | }; 22 | 23 | export default observer(PokemonFilter); 24 | -------------------------------------------------------------------------------- /day-15/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import store from "../src/store"; 5 | 6 | const PokemonInfo = () => { 7 | return store.selectedPokemon ? ( 8 |
9 |

{store.selectedPokemon.name.english}

10 | 11 | 12 | {Object.keys(store.selectedPokemon.base).map((key) => ( 13 | 14 | 15 | 16 | 17 | ))} 18 | 19 |
{key}{store.selectedPokemon.base[key]}
20 |
21 | ) : null; 22 | }; 23 | 24 | export default observer(PokemonInfo); 25 | -------------------------------------------------------------------------------- /day-15/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import React from "react"; 3 | import PropTypes from "prop-types"; 4 | import { Button } from "@material-ui/core"; 5 | 6 | import PokemonType from "../src/pokemonType"; 7 | 8 | const PokemonRow = ({ pokemon, onClick }) => ( 9 | <> 10 | 11 | 12 | 13 | {pokemon.name.english} 14 | 15 | 16 | {pokemon.type.join(", ")} 17 | 18 | 25 | 26 | 27 | 28 | ); 29 | 30 | PokemonRow.propTypes = { 31 | pokemon: PokemonType, 32 | }; 33 | 34 | export default PokemonRow; 35 | -------------------------------------------------------------------------------- /day-15/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import PokemonRow from "./PokemonRow"; 5 | import store from "../src/store"; 6 | 7 | function PokemonTable() { 8 | return ( 9 | 10 | 11 | {store.pokemon 12 | .filter(({ name: { english } }) => 13 | english 14 | .toLocaleLowerCase() 15 | .includes(store.filter.toLocaleLowerCase()) 16 | ) 17 | .slice(0, 20) 18 | .map((pokemon) => ( 19 | store.setSelectedPokemon(pokemon)} 23 | /> 24 | ))} 25 | 26 |
27 | ); 28 | } 29 | 30 | export default observer(PokemonTable); 31 | -------------------------------------------------------------------------------- /day-15/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day-15", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "@emotion/core": "^10.0.35", 12 | "@emotion/styled": "^10.0.27", 13 | "@material-ui/core": "^4.11.0", 14 | "mobx": "^6.0.1", 15 | "mobx-react": "^7.0.0", 16 | "next": "9.5.5", 17 | "react": "16.14.0", 18 | "react-dom": "16.14.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /day-15/pages/index.js: -------------------------------------------------------------------------------- 1 | import styled from "@emotion/styled"; 2 | import { CssBaseline } from "@material-ui/core"; 3 | 4 | import PokemonInfo from "../components/PokemonInfo"; 5 | import PokemonFilter from "../components/PokemonFilter"; 6 | import PokemonTable from "../components/PokemonTable"; 7 | 8 | const Title = styled.h1` 9 | text-align: center; 10 | `; 11 | const PageContainer = styled.div` 12 | margin: auto; 13 | width: 800px; 14 | padding-top: 1em; 15 | `; 16 | const TwoColumnLayout = styled.div` 17 | display: grid; 18 | grid-template-columns: 80% 20%; 19 | grid-column-gap: 1rem; 20 | `; 21 | 22 | const Home = () => ( 23 | 24 | 25 | Pokemon Search 26 | 27 |
28 | 29 | 30 |
31 | 32 | 33 | 34 | ); 35 | 36 | export default Home; 37 | -------------------------------------------------------------------------------- /day-15/pages/pokemon/[id].js: -------------------------------------------------------------------------------- 1 | import { useRouter } from "next/router"; 2 | import { observer } from "mobx-react"; 3 | import { 4 | CssBaseline, 5 | Table, 6 | TableBody, 7 | TableCell, 8 | TableHead, 9 | TableRow, 10 | } from "@material-ui/core"; 11 | import styled from "@emotion/styled"; 12 | 13 | import store from "../../src/store"; 14 | 15 | const PageContainer = styled.div` 16 | margin: auto; 17 | width: 800px; 18 | padding-top: 1em; 19 | `; 20 | const TypeHeader = styled.span` 21 | font-weight: bold; 22 | `; 23 | 24 | export default observer(() => { 25 | const router = useRouter(); 26 | const pokemon = store.pokemon.find((p) => p.id === parseInt(router.query.id)); 27 | return ( 28 | 29 | 30 | 31 |
32 | {pokemon && ( 33 | <> 34 |

{pokemon.name.english}

35 |

36 | Type: {" " + pokemon.type.join(", ")} 37 |

38 | 39 | 40 | 41 | Attribute 42 | Value 43 | 44 | 45 | 46 | {Object.keys(pokemon.base).map((key) => ( 47 | 48 | {key} 49 | {pokemon.base[key]} 50 | 51 | ))} 52 | 53 |
54 | 55 | )} 56 |
57 | 58 | ); 59 | }); 60 | -------------------------------------------------------------------------------- /day-15/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-15/public/favicon.ico -------------------------------------------------------------------------------- /day-15/public/zeit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /day-15/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.number.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-15/src/store.js: -------------------------------------------------------------------------------- 1 | import { makeAutoObservable } from "mobx"; 2 | 3 | class Store { 4 | pokemon = []; 5 | filter = ""; 6 | selectedPokemon = null; 7 | 8 | constructor() { 9 | makeAutoObservable(this); 10 | } 11 | 12 | setPokemon(pokemon) { 13 | this.pokemon = pokemon; 14 | } 15 | setFilter(filter) { 16 | this.filter = filter; 17 | } 18 | setSelectedPokemon(selectedPokemon) { 19 | this.selectedPokemon = selectedPokemon; 20 | } 21 | } 22 | 23 | const store = new Store(); 24 | 25 | if (typeof window !== "undefined") { 26 | fetch("/pokemon.json") 27 | .then((resp) => resp.json()) 28 | .then((pokemon) => store.setPokemon(pokemon)); 29 | } 30 | 31 | export default store; 32 | -------------------------------------------------------------------------------- /day-16/.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | -------------------------------------------------------------------------------- /day-16/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | ## Learn More 18 | 19 | To learn more about Next.js, take a look at the following resources: 20 | 21 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 22 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 23 | 24 | You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome! 25 | 26 | ## Deploy on ZEIT Now 27 | 28 | The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 29 | 30 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 31 | -------------------------------------------------------------------------------- /day-16/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { observer } from "mobx-react"; 4 | 5 | import store from "../src/store"; 6 | 7 | const Input = styled.input` 8 | width: 100%; 9 | padding: 0.2rem; 10 | font-size: large; 11 | `; 12 | 13 | const PokemonFilter = () => { 14 | return ( 15 | store.setFilter(evt.target.value)} 19 | /> 20 | ); 21 | }; 22 | 23 | export default observer(PokemonFilter); 24 | -------------------------------------------------------------------------------- /day-16/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import store from "../src/store"; 5 | 6 | const PokemonInfo = () => { 7 | return store.selectedPokemon ? ( 8 |
9 |

{store.selectedPokemon.name.english}

10 | 11 | 12 | {Object.keys(store.selectedPokemon.base).map((key) => ( 13 | 14 | 15 | 16 | 17 | ))} 18 | 19 |
{key}{store.selectedPokemon.base[key]}
20 |
21 | ) : null; 22 | }; 23 | 24 | export default observer(PokemonInfo); 25 | -------------------------------------------------------------------------------- /day-16/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import React from "react"; 3 | import PropTypes from "prop-types"; 4 | import { Button } from "@material-ui/core"; 5 | 6 | import PokemonType from "../src/pokemonType"; 7 | 8 | const PokemonRow = ({ pokemon, onClick }) => ( 9 | <> 10 | 11 | 12 | 13 | {pokemon.name.english} 14 | 15 | 16 | {pokemon.type.join(", ")} 17 | 18 | 25 | 26 | 27 | 28 | ); 29 | 30 | PokemonRow.propTypes = { 31 | pokemon: PokemonType, 32 | }; 33 | 34 | export default PokemonRow; 35 | -------------------------------------------------------------------------------- /day-16/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import PokemonRow from "./PokemonRow"; 5 | import store from "../src/store"; 6 | 7 | function PokemonTable() { 8 | return ( 9 | 10 | 11 | {store.pokemon 12 | .filter(({ name: { english } }) => 13 | english 14 | .toLocaleLowerCase() 15 | .includes(store.filter.toLocaleLowerCase()) 16 | ) 17 | .slice(0, 20) 18 | .map((pokemon) => ( 19 | store.setSelectedPokemon(pokemon)} 23 | /> 24 | ))} 25 | 26 |
27 | ); 28 | } 29 | 30 | export default observer(PokemonTable); 31 | -------------------------------------------------------------------------------- /day-16/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day-15", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "@emotion/core": "^10.0.35", 12 | "@emotion/styled": "^10.0.27", 13 | "@material-ui/core": "^4.11.0", 14 | "mobx": "^6.0.1", 15 | "mobx-react": "^7.0.0", 16 | "next": "9.5.5", 17 | "react": "16.14.0", 18 | "react-dom": "16.14.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /day-16/pages/index.js: -------------------------------------------------------------------------------- 1 | import styled from "@emotion/styled"; 2 | import { CssBaseline } from "@material-ui/core"; 3 | 4 | import PokemonInfo from "../components/PokemonInfo"; 5 | import PokemonFilter from "../components/PokemonFilter"; 6 | import PokemonTable from "../components/PokemonTable"; 7 | 8 | import store from "../src/store"; 9 | 10 | const Title = styled.h1` 11 | text-align: center; 12 | `; 13 | const PageContainer = styled.div` 14 | margin: auto; 15 | width: 800px; 16 | padding-top: 1em; 17 | `; 18 | const TwoColumnLayout = styled.div` 19 | display: grid; 20 | grid-template-columns: 80% 20%; 21 | grid-column-gap: 1rem; 22 | `; 23 | 24 | export const getServerSideProps = async () => { 25 | const pokemon = await ( 26 | await fetch("http://localhost:3000/pokemon.json") 27 | ).json(); 28 | return { 29 | props: { pokemon }, 30 | }; 31 | }; 32 | 33 | const Home = ({ pokemon }) => { 34 | store.setPokemon(pokemon); 35 | return ( 36 | 37 | 38 | Pokemon Search 39 | 40 |
41 | 42 | 43 |
44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export default Home; 51 | -------------------------------------------------------------------------------- /day-16/pages/pokemon/[id].js: -------------------------------------------------------------------------------- 1 | import { useRouter } from "next/router"; 2 | import { observer } from "mobx-react"; 3 | import { 4 | CssBaseline, 5 | Table, 6 | TableBody, 7 | TableCell, 8 | TableHead, 9 | TableRow, 10 | } from "@material-ui/core"; 11 | import styled from "@emotion/styled"; 12 | 13 | import store from "../../src/store"; 14 | 15 | const PageContainer = styled.div` 16 | margin: auto; 17 | width: 800px; 18 | padding-top: 1em; 19 | `; 20 | const TypeHeader = styled.span` 21 | font-weight: bold; 22 | `; 23 | 24 | export const getServerSideProps = async (context) => { 25 | const allPokemon = await ( 26 | await fetch("http://localhost:3000/pokemon.json") 27 | ).json(); 28 | const pokemon = allPokemon.find((p) => p.id === parseInt(context.query.id)); 29 | return { 30 | props: { pokemon }, 31 | }; 32 | }; 33 | 34 | export default observer(({ pokemon }) => { 35 | return ( 36 | 37 | 38 | 39 |
40 | {pokemon && ( 41 | <> 42 |

{pokemon.name.english}

43 |

44 | Type: {" " + pokemon.type.join(", ")} 45 |

46 | 47 | 48 | 49 | Attribute 50 | Value 51 | 52 | 53 | 54 | {Object.keys(pokemon.base).map((key) => ( 55 | 56 | {key} 57 | {pokemon.base[key]} 58 | 59 | ))} 60 | 61 |
62 | 63 | )} 64 |
65 | 66 | ); 67 | }); 68 | -------------------------------------------------------------------------------- /day-16/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-16/public/favicon.ico -------------------------------------------------------------------------------- /day-16/public/zeit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /day-16/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.number.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-16/src/store.js: -------------------------------------------------------------------------------- 1 | import { makeAutoObservable } from "mobx"; 2 | 3 | class Store { 4 | pokemon = []; 5 | filter = ""; 6 | selectedPokemon = null; 7 | 8 | constructor() { 9 | makeAutoObservable(this); 10 | } 11 | 12 | setPokemon(pokemon) { 13 | this.pokemon = pokemon; 14 | } 15 | setFilter(filter) { 16 | this.filter = filter; 17 | } 18 | setSelectedPokemon(selectedPokemon) { 19 | this.selectedPokemon = selectedPokemon; 20 | } 21 | } 22 | 23 | const store = new Store(); 24 | 25 | export default store; 26 | -------------------------------------------------------------------------------- /day-17/.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | -------------------------------------------------------------------------------- /day-17/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Build 4 | 5 | ``` 6 | yarn build 7 | yarn export 8 | ``` 9 | 10 | ## Getting Started 11 | 12 | First, run the development server: 13 | 14 | ```bash 15 | npm run dev 16 | # or 17 | yarn dev 18 | ``` 19 | 20 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 21 | 22 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 23 | 24 | ## Learn More 25 | 26 | To learn more about Next.js, take a look at the following resources: 27 | 28 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 29 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 30 | 31 | You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome! 32 | 33 | ## Deploy on ZEIT Now 34 | 35 | The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 36 | 37 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 38 | -------------------------------------------------------------------------------- /day-17/components/PokemonFilter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import { observer } from "mobx-react"; 4 | 5 | import store from "../src/store"; 6 | 7 | const Input = styled.input` 8 | width: 100%; 9 | padding: 0.2rem; 10 | font-size: large; 11 | `; 12 | 13 | const PokemonFilter = () => { 14 | return ( 15 | store.setFilter(evt.target.value)} 19 | /> 20 | ); 21 | }; 22 | 23 | export default observer(PokemonFilter); 24 | -------------------------------------------------------------------------------- /day-17/components/PokemonInfo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import store from "../src/store"; 5 | 6 | const PokemonInfo = () => { 7 | return store.selectedPokemon ? ( 8 |
9 |

{store.selectedPokemon.name.english}

10 | 11 | 12 | {Object.keys(store.selectedPokemon.base).map((key) => ( 13 | 14 | 15 | 16 | 17 | ))} 18 | 19 |
{key}{store.selectedPokemon.base[key]}
20 |
21 | ) : null; 22 | }; 23 | 24 | export default observer(PokemonInfo); 25 | -------------------------------------------------------------------------------- /day-17/components/PokemonRow.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import React from "react"; 3 | import PropTypes from "prop-types"; 4 | import { Button } from "@material-ui/core"; 5 | 6 | import PokemonType from "../src/pokemonType"; 7 | 8 | const PokemonRow = ({ pokemon, onClick }) => ( 9 | <> 10 | 11 | 12 | 13 | {pokemon.name.english} 14 | 15 | 16 | {pokemon.type.join(", ")} 17 | 18 | 25 | 26 | 27 | 28 | ); 29 | 30 | PokemonRow.propTypes = { 31 | pokemon: PokemonType, 32 | }; 33 | 34 | export default PokemonRow; 35 | -------------------------------------------------------------------------------- /day-17/components/PokemonTable.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer } from "mobx-react"; 3 | 4 | import PokemonRow from "./PokemonRow"; 5 | import store from "../src/store"; 6 | 7 | function PokemonTable() { 8 | return ( 9 | 10 | 11 | {store.pokemon 12 | .filter(({ name: { english } }) => 13 | english 14 | .toLocaleLowerCase() 15 | .includes(store.filter.toLocaleLowerCase()) 16 | ) 17 | .slice(0, 20) 18 | .map((pokemon) => ( 19 | store.setSelectedPokemon(pokemon)} 23 | /> 24 | ))} 25 | 26 |
27 | ); 28 | } 29 | 30 | export default observer(PokemonTable); 31 | -------------------------------------------------------------------------------- /day-17/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | basePath: "/introducing-react-17", 3 | assetPrefix: "/introducing-react-17/", 4 | }; 5 | -------------------------------------------------------------------------------- /day-17/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day-15", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "export": "next export", 9 | "start": "next start" 10 | }, 11 | "dependencies": { 12 | "@emotion/core": "^10.0.35", 13 | "@emotion/styled": "^10.0.27", 14 | "@material-ui/core": "^4.11.0", 15 | "mobx": "^6.0.1", 16 | "mobx-react": "^7.0.0", 17 | "next": "9.5.5", 18 | "react": "16.14.0", 19 | "react-dom": "16.14.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /day-17/pages/index.js: -------------------------------------------------------------------------------- 1 | import styled from "@emotion/styled"; 2 | import { CssBaseline } from "@material-ui/core"; 3 | 4 | import PokemonInfo from "../components/PokemonInfo"; 5 | import PokemonFilter from "../components/PokemonFilter"; 6 | import PokemonTable from "../components/PokemonTable"; 7 | 8 | import store from "../src/store"; 9 | 10 | const Title = styled.h1` 11 | text-align: center; 12 | `; 13 | const PageContainer = styled.div` 14 | margin: auto; 15 | width: 800px; 16 | padding-top: 1em; 17 | `; 18 | const TwoColumnLayout = styled.div` 19 | display: grid; 20 | grid-template-columns: 80% 20%; 21 | grid-column-gap: 1rem; 22 | `; 23 | 24 | const Home = () => { 25 | return ( 26 | 27 | 28 | Pokemon Search 29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 | 37 | ); 38 | }; 39 | 40 | export default Home; 41 | -------------------------------------------------------------------------------- /day-17/pages/pokemon/[id].js: -------------------------------------------------------------------------------- 1 | import { 2 | CssBaseline, 3 | Table, 4 | TableBody, 5 | TableCell, 6 | TableHead, 7 | TableRow, 8 | } from "@material-ui/core"; 9 | import styled from "@emotion/styled"; 10 | 11 | export const getStaticPaths = async () => { 12 | const pokemon = require("../../src/pokemon.json"); 13 | const paths = pokemon.map((p) => ({ 14 | params: { 15 | id: p.id.toString(), 16 | }, 17 | })); 18 | return { 19 | paths, 20 | fallback: false, 21 | }; 22 | }; 23 | 24 | export const getStaticProps = async (context) => { 25 | const allPokemon = require("../../src/pokemon.json"); 26 | const pokemon = allPokemon.find((p) => p.id === parseInt(context.params.id)); 27 | return { 28 | props: { pokemon }, 29 | }; 30 | }; 31 | 32 | const PageContainer = styled.div` 33 | margin: auto; 34 | width: 800px; 35 | padding-top: 1em; 36 | `; 37 | const TypeHeader = styled.span` 38 | font-weight: bold; 39 | `; 40 | 41 | export default ({ pokemon }) => { 42 | return ( 43 | 44 | 45 | 46 |
47 | {pokemon && ( 48 | <> 49 |

{pokemon.name.english}

50 |

51 | Type: {" " + pokemon.type.join(", ")} 52 |

53 | 54 | 55 | 56 | Attribute 57 | Value 58 | 59 | 60 | 61 | {Object.keys(pokemon.base).map((key) => ( 62 | 63 | {key} 64 | {pokemon.base[key]} 65 | 66 | ))} 67 | 68 |
69 | 70 | )} 71 |
72 | 73 | ); 74 | }; 75 | -------------------------------------------------------------------------------- /day-17/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-17/public/favicon.ico -------------------------------------------------------------------------------- /day-17/public/zeit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /day-17/src/pokemonType.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const PokemonType = PropTypes.shape({ 4 | id: PropTypes.number.isRequired, 5 | name: PropTypes.shape({ 6 | english: PropTypes.string.isRequired, 7 | japanese: PropTypes.string.isRequired, 8 | chinese: PropTypes.string.isRequired, 9 | french: PropTypes.string.isRequired, 10 | }), 11 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 12 | base: PropTypes.shape({ 13 | HP: PropTypes.number.isRequired, 14 | Attack: PropTypes.number.isRequired, 15 | Defense: PropTypes.number.isRequired, 16 | "Sp. Attack": PropTypes.number.isRequired, 17 | "Sp. Defense": PropTypes.number.isRequired, 18 | Speed: PropTypes.number.isRequired, 19 | }), 20 | }); 21 | 22 | export default PokemonType; 23 | -------------------------------------------------------------------------------- /day-17/src/store.js: -------------------------------------------------------------------------------- 1 | import { makeAutoObservable } from "mobx"; 2 | 3 | class Store { 4 | pokemon = require("../src/pokemon.json"); 5 | filter = ""; 6 | selectedPokemon = null; 7 | 8 | constructor() { 9 | makeAutoObservable(this); 10 | } 11 | 12 | setFilter(filter) { 13 | this.filter = filter; 14 | } 15 | setSelectedPokemon(selectedPokemon) { 16 | this.selectedPokemon = selectedPokemon; 17 | } 18 | } 19 | 20 | const store = new Store(); 21 | 22 | export default store; 23 | -------------------------------------------------------------------------------- /day-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "gh-pages": "^3.1.0", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-scripts": "3.4.3" 14 | }, 15 | "scripts": { 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build", 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": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day-2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-2/public/favicon.ico -------------------------------------------------------------------------------- /day-2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-2/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-2/public/logo192.png -------------------------------------------------------------------------------- /day-2/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-2/public/logo512.png -------------------------------------------------------------------------------- /day-2/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-2/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-2/src/App.css: -------------------------------------------------------------------------------- 1 | .title { 2 | text-align: center; 3 | } 4 | 5 | input { 6 | width: 100%; 7 | padding: 0.2rem; 8 | font-size: large; 9 | } -------------------------------------------------------------------------------- /day-2/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./App.css"; 4 | 5 | function App() { 6 | return ( 7 |
14 |

Pokemon Search

15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
BulbasaurGrass, Poison
23 |
24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /day-2/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-2/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-2/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-2/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "gh-pages": "^3.1.0", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-scripts": "3.4.3" 14 | }, 15 | "scripts": { 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build", 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": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day-3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-3/public/favicon.ico -------------------------------------------------------------------------------- /day-3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-3/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-3/public/logo192.png -------------------------------------------------------------------------------- /day-3/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-3/public/logo512.png -------------------------------------------------------------------------------- /day-3/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-3/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-3/src/App.css: -------------------------------------------------------------------------------- 1 | .title { 2 | text-align: center; 3 | } 4 | 5 | input { 6 | width: 100%; 7 | padding: 0.2rem; 8 | font-size: large; 9 | } -------------------------------------------------------------------------------- /day-3/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import pokemon from "./pokemon.json"; 3 | 4 | import "./App.css"; 5 | 6 | function App() { 7 | return ( 8 |
15 |

Pokemon Search

16 | 17 | 18 | {pokemon.slice(0, 20).map((pokemon) => ( 19 | 20 | 21 | 22 | 23 | ))} 24 | 25 |
{pokemon.name.english}{pokemon.type.join(", ")}
26 |
27 | ); 28 | } 29 | 30 | export default App; 31 | -------------------------------------------------------------------------------- /day-3/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-3/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-3/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-3/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-3/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "gh-pages": "^3.1.0", 11 | "prop-types": "^15.7.2", 12 | "react": "^16.13.1", 13 | "react-dom": "^16.13.1", 14 | "react-scripts": "3.4.3" 15 | }, 16 | "scripts": { 17 | "predeploy": "npm run build", 18 | "deploy": "gh-pages -d build", 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": "react-app" 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 | -------------------------------------------------------------------------------- /day-4/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-4/public/favicon.ico -------------------------------------------------------------------------------- /day-4/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-4/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-4/public/logo192.png -------------------------------------------------------------------------------- /day-4/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-4/public/logo512.png -------------------------------------------------------------------------------- /day-4/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-4/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-4/src/App.css: -------------------------------------------------------------------------------- 1 | .title { 2 | text-align: center; 3 | } 4 | 5 | input { 6 | width: 100%; 7 | padding: 0.2rem; 8 | font-size: large; 9 | } -------------------------------------------------------------------------------- /day-4/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import pokemon from "./pokemon.json"; 3 | import PropTypes from "prop-types"; 4 | 5 | import "./App.css"; 6 | 7 | const PokemonRow = ({ pokemon }) => ( 8 | <> 9 | 10 | {pokemon.name.english} 11 | {pokemon.type.join(", ")} 12 | 13 | 14 | ); 15 | 16 | PokemonRow.propTypes = { 17 | pokemon: PropTypes.arrayOf( 18 | PropTypes.shape({ 19 | id: PropTypes.string.isRequired, 20 | name: PropTypes.shape({ 21 | english: PropTypes.string.isRequired, 22 | }), 23 | type: PropTypes.arrayOf(PropTypes.string.isRequired), 24 | }) 25 | ), 26 | }; 27 | 28 | function App() { 29 | return ( 30 |
37 |

Pokemon Search

38 | 39 | 40 | {pokemon.slice(0, 20).map((pokemon) => ( 41 | 42 | ))} 43 | 44 |
45 |
46 | ); 47 | } 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /day-4/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-4/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-4/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-4/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-4/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "gh-pages": "^3.1.0", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-scripts": "3.4.3" 14 | }, 15 | "scripts": { 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build", 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": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | }, 38 | "devDependencies": { 39 | "prop-types": "^15.7.2" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /day-5/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-5/public/favicon.ico -------------------------------------------------------------------------------- /day-5/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-5/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-5/public/logo192.png -------------------------------------------------------------------------------- /day-5/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-5/public/logo512.png -------------------------------------------------------------------------------- /day-5/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-5/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-5/src/App.css: -------------------------------------------------------------------------------- 1 | .title { 2 | text-align: center; 3 | } 4 | 5 | input { 6 | width: 100%; 7 | padding: 0.2rem; 8 | font-size: large; 9 | } -------------------------------------------------------------------------------- /day-5/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-5/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-5/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-5/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-5/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "gh-pages": "^3.1.0", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-scripts": "3.4.3" 14 | }, 15 | "scripts": { 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build", 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": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day-6/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-6/public/favicon.ico -------------------------------------------------------------------------------- /day-6/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-6/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-6/public/logo192.png -------------------------------------------------------------------------------- /day-6/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-6/public/logo512.png -------------------------------------------------------------------------------- /day-6/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-6/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-6/src/App.css: -------------------------------------------------------------------------------- 1 | .title { 2 | text-align: center; 3 | } 4 | 5 | input { 6 | width: 100%; 7 | padding: 0.2rem; 8 | font-size: large; 9 | } -------------------------------------------------------------------------------- /day-6/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-6/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-6/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-6/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /day-6/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-7/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@testing-library/jest-dom": "^4.2.4", 10 | "@testing-library/react": "^9.3.2", 11 | "@testing-library/user-event": "^7.1.2", 12 | "gh-pages": "^3.1.0", 13 | "react": "^16.13.1", 14 | "react-dom": "^16.13.1", 15 | "react-scripts": "3.4.3" 16 | }, 17 | "scripts": { 18 | "predeploy": "npm run build", 19 | "deploy": "gh-pages -d build", 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": "react-app" 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 | -------------------------------------------------------------------------------- /day-7/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-7/public/favicon.ico -------------------------------------------------------------------------------- /day-7/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-7/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-7/public/logo192.png -------------------------------------------------------------------------------- /day-7/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-7/public/logo512.png -------------------------------------------------------------------------------- /day-7/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-7/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-7/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-7/src/App.css -------------------------------------------------------------------------------- /day-7/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-7/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-7/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-7/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-8/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@material-ui/core": "^4.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.3.2", 12 | "@testing-library/user-event": "^7.1.2", 13 | "gh-pages": "^3.1.0", 14 | "react": "^16.13.1", 15 | "react-dom": "^16.13.1", 16 | "react-scripts": "3.4.3" 17 | }, 18 | "scripts": { 19 | "predeploy": "npm run build", 20 | "deploy": "gh-pages -d build", 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": "react-app" 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 | -------------------------------------------------------------------------------- /day-8/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-8/public/favicon.ico -------------------------------------------------------------------------------- /day-8/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-8/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-8/public/logo192.png -------------------------------------------------------------------------------- /day-8/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-8/public/logo512.png -------------------------------------------------------------------------------- /day-8/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-8/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-8/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-8/src/App.css -------------------------------------------------------------------------------- /day-8/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-8/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-8/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-8/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /day-9/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starting-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://jherr.github.io/starting-react", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@material-ui/core": "^4.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.3.2", 12 | "@testing-library/user-event": "^7.1.2", 13 | "gh-pages": "^3.1.0", 14 | "react": "^16.13.1", 15 | "react-dom": "^16.13.1", 16 | "react-scripts": "3.4.3" 17 | }, 18 | "scripts": { 19 | "predeploy": "npm run build", 20 | "deploy": "gh-pages -d build", 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": "react-app" 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 | -------------------------------------------------------------------------------- /day-9/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-9/public/favicon.ico -------------------------------------------------------------------------------- /day-9/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-9/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-9/public/logo192.png -------------------------------------------------------------------------------- /day-9/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-9/public/logo512.png -------------------------------------------------------------------------------- /day-9/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /day-9/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day-9/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/intro-to-react-by-day/c6a565421d0565f2c669d00066dd0864af56a4b4/day-9/src/App.css -------------------------------------------------------------------------------- /day-9/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /day-9/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /day-9/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /day-9/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | --------------------------------------------------------------------------------