├── .gitignore
├── 01-starter
├── dist
│ ├── index.html
│ ├── main.css
│ └── main.js
├── package-lock.json
├── package.json
├── src
│ └── index.js
└── webpack.config.js
├── 02-finished-reference
├── dist
│ ├── index.html
│ ├── main.css
│ └── main.js
├── package-lock.json
├── package.json
├── src
│ └── index.js
└── webpack.config.js
├── 03-separate-files-starter
├── dist
│ ├── index.html
│ ├── main.css
│ └── main.js
├── package-lock.json
├── package.json
├── src
│ ├── components
│ │ ├── Footer.js
│ │ ├── MainArea.js
│ │ └── Sidebar.js
│ └── index.js
└── webpack.config.js
├── 04-separate-files-finished-reference
├── dist
│ ├── index.html
│ ├── main.css
│ └── main.js
├── package-lock.json
├── package.json
├── src
│ ├── components
│ │ ├── Footer.js
│ │ ├── MainArea.js
│ │ └── Sidebar.js
│ └── index.js
└── webpack.config.js
├── 05-context
├── dist
│ ├── index.html
│ ├── main.css
│ └── main.js
├── package-lock.json
├── package.json
├── src
│ ├── OurContext.js
│ ├── components
│ │ ├── Footer.js
│ │ ├── MainArea.js
│ │ └── Sidebar.js
│ └── index.js
└── webpack.config.js
└── 06-reducer
├── dist
├── index.html
├── main.css
└── main.js
├── package-lock.json
├── package.json
├── src
├── DispatchContext.js
├── OurContext.js
├── components
│ ├── Footer.js
│ ├── MainArea.js
│ └── Sidebar.js
└── index.js
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
--------------------------------------------------------------------------------
/01-starter/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | State in React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/01-starter/dist/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: sans-serif;
3 | color: #333;
4 | padding: 30px;
5 | margin: 0;
6 | background-color: #dedede;
7 | line-height: 1.65;
8 | }
9 |
10 | h1,
11 | p {
12 | margin: 0;
13 | }
14 |
15 | .grid-parent {
16 | display: grid;
17 | gap: 30px;
18 | }
19 |
20 | @media screen and (min-width: 768px) {
21 | .grid-parent {
22 | display: grid;
23 | grid-template-columns: 300px 1fr;
24 | }
25 |
26 | .header,
27 | .footer {
28 | grid-column: 1 / 3;
29 | }
30 | }
31 |
32 | .header,
33 | .sidebar,
34 | .main-area {
35 | background-color: #fff;
36 | padding: 30px;
37 | border-radius: 4px;
38 | }
39 |
40 | .footer {
41 | background-color: #333;
42 | color: #fff;
43 | padding: 30px;
44 | border-radius: 4px;
45 | }
46 |
--------------------------------------------------------------------------------
/01-starter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "simple-starter",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "webpack.config.js",
6 | "scripts": {
7 | "start": "webpack --watch",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "@babel/core": "^7.17.10",
15 | "@babel/preset-react": "^7.16.7",
16 | "babel-loader": "^8.2.5",
17 | "react": "^18.1.0",
18 | "react-dom": "^18.1.0",
19 | "webpack": "^5.72.0",
20 | "webpack-cli": "^4.9.2"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/01-starter/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { createRoot } from "react-dom/client"
3 |
4 | function App() {
5 | return (
6 |
7 |
8 |
Welcome To Our App
9 |
The current size is x and the current color is x.
10 |
11 | This page has been liked 0 times.
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quod obcaecati dolore debitis amet aut, excepturi voluptas ratione quibusdam laboriosam, optio pariatur provident doloremque consequatur animi? Consequuntur, officiis. Explicabo, vel.
21 |
22 |
30 |
20 |
21 |
Welcome To Our App!!!
22 |
23 | The current size is {size} and the current color is {color}.
24 |
25 |
26 | This page has been liked {likeCount} times.
27 |
28 |
29 |
30 |
31 | setColor(e.target.value)} />
32 |
33 |
34 |
35 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quod obcaecati dolore debitis amet aut, excepturi voluptas ratione quibusdam laboriosam, optio pariatur provident doloremque consequatur animi? Consequuntur, officiis. Explicabo, vel.
36 |
37 |
45 |
6 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quod obcaecati dolore debitis amet aut, excepturi voluptas ratione quibusdam laboriosam, optio pariatur provident doloremque consequatur animi? Consequuntur, officiis. Explicabo, vel.
7 |
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
13 | export default Sidebar
14 |
--------------------------------------------------------------------------------
/03-separate-files-starter/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react"
2 | import { createRoot } from "react-dom/client"
3 |
4 | import Sidebar from "./components/Sidebar"
5 | import MainArea from "./components/MainArea"
6 | import Footer from "./components/Footer"
7 |
8 | function App() {
9 | const [size, setSize] = useState(25)
10 | const [color, setColor] = useState("skyblue")
11 | const [likeCount, setLikeCount] = useState(0)
12 |
13 | return (
14 |
15 |
16 |
Welcome To Our App
17 |
The current size is x and the current color is x.
18 |
19 | This page has been liked 0 times.
20 |
21 |
22 |
23 |
24 |
25 |
6 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quod obcaecati dolore debitis amet aut, excepturi voluptas ratione quibusdam laboriosam, optio pariatur provident doloremque consequatur animi? Consequuntur, officiis. Explicabo, vel.
7 |
6 | props.setSize(e.target.value)} />
7 | props.setColor(e.target.value)} />
8 |
16 |
17 | )
18 | }
19 |
20 | export default Sidebar
21 |
--------------------------------------------------------------------------------
/04-separate-files-finished-reference/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react"
2 | import { createRoot } from "react-dom/client"
3 |
4 | import Sidebar from "./components/Sidebar"
5 | import MainArea from "./components/MainArea"
6 | import Footer from "./components/Footer"
7 |
8 | function App() {
9 | const [size, setSize] = useState(25)
10 | const [color, setColor] = useState("skyblue")
11 | const [likeCount, setLikeCount] = useState(0)
12 |
13 | return (
14 |
15 |
16 |
Welcome To Our App
17 |
18 | The current size is {size} and the current color is {color}.
19 |
20 |
21 | This page has been liked {likeCount} times.
22 |
23 |
24 |
25 |
26 |
27 |
9 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quod obcaecati dolore debitis amet aut, excepturi voluptas ratione quibusdam laboriosam, optio pariatur provident doloremque consequatur animi? Consequuntur, officiis. Explicabo, vel.
10 |
9 | state.setSize(e.target.value)} />
10 | state.setColor(e.target.value)} />
11 |
19 |
20 | )
21 | }
22 |
23 | export default Sidebar
24 |
--------------------------------------------------------------------------------
/05-context/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, createContext } from "react"
2 | import { createRoot } from "react-dom/client"
3 |
4 | import Sidebar from "./components/Sidebar"
5 | import MainArea from "./components/MainArea"
6 | import Footer from "./components/Footer"
7 |
8 | import OurContext from "./OurContext"
9 |
10 | const AnimalNamesContext = createContext()
11 |
12 | function App() {
13 | const [size, setSize] = useState(25)
14 | const [color, setColor] = useState("skyblue")
15 | const [likeCount, setLikeCount] = useState(0)
16 | const [names, setNames] = useState({ catName: "Meowsalot", dogName: "Barksalot" })
17 |
18 | return (
19 |
20 |
21 |
22 |
23 |
Welcome To Our App
24 |
25 | The current size is {size} and the current color is {color}.
26 |
27 |
28 | This page has been liked {likeCount} times.
29 |
30 |
31 |
32 |
33 |
34 |
35 |
49 |
Cat name: {names.catName}
50 |
Dog name: {names.dogName}
51 |
9 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quod obcaecati dolore debitis amet aut, excepturi voluptas ratione quibusdam laboriosam, optio pariatur provident doloremque consequatur animi? Consequuntur, officiis. Explicabo, vel.
10 |
11 | dispatch({ type: "changeSize", value: e.target.value })} />
12 | dispatch({ type: "changeColor", value: e.target.value })} />
13 |
20 |
21 | )
22 | }
23 |
24 | export default Sidebar
25 |
--------------------------------------------------------------------------------
/06-reducer/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { useReducer, useState, createContext } from "react"
2 | import { createRoot } from "react-dom/client"
3 |
4 | import Sidebar from "./components/Sidebar"
5 | import MainArea from "./components/MainArea"
6 | import Footer from "./components/Footer"
7 |
8 | import OurContext from "./OurContext"
9 | import DispatchContext from "./DispatchContext"
10 |
11 | const AnimalNamesContext = createContext()
12 |
13 | function ourReducerFunction(state, action) {
14 | switch (action.type) {
15 | case "incrementLikes":
16 | return { ...state, likeCount: state.likeCount + 1 }
17 | case "changeSize":
18 | return { ...state, size: action.value }
19 | case "changeColor":
20 | return { ...state, color: action.value }
21 | case "changeColorAndSize":
22 | return { ...state, color: action.value.color, size: action.value.size }
23 | }
24 | }
25 |
26 | const initialState = {
27 | size: 25,
28 | color: "skyblue",
29 | likeCount: 0
30 | }
31 |
32 | function App() {
33 | const [state, dispatch] = useReducer(ourReducerFunction, initialState)
34 | const [names, setNames] = useState({ catName: "Meowsalot", dogName: "Barksalot" })
35 |
36 | return (
37 |
38 |
39 |
40 |
41 |
42 |
Welcome To Our App
43 |
44 | The current size is {state.size} and the current color is {state.color}.
45 |
46 |
47 | This page has been liked {state.likeCount} times.
48 |
49 |
50 |
51 |
52 |
53 |
54 |
69 |
Cat name: {names.catName}
70 |
Dog name: {names.dogName}
71 |