first commit

02_lesson
gitdagray 2022-03-15 16:45:07 -05:00
commit d9a812f171
16 changed files with 27421 additions and 0 deletions

23
01_lesson/.gitignore vendored 100644
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

27084
01_lesson/package-lock.json generated 100644

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,35 @@
{
"name": "01_lesson",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.8.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-scripts": "5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

View File

@ -0,0 +1,11 @@
import Counter from "./features/counter/Counter";
function App() {
return (
<main className="App">
<Counter />
</main>
);
}
export default App;

View File

@ -0,0 +1,8 @@
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from '../features/counter/counterSlice';
export const store = configureStore({
reducer: {
counter: counterReducer,
}
})

View File

@ -0,0 +1,44 @@
import { useSelector, useDispatch } from "react-redux";
import {
increment,
decrement,
reset,
incrementByAmount
} from './counterSlice';
import { useState } from "react";
const Counter = () => {
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();
const [incrementAmount, setIncrementAmount] = useState(0);
const addValue = Number(incrementAmount) || 0;
const resetAll = () => {
setIncrementAmount(0);
dispatch(reset());
}
return (
<section>
<p>{count}</p>
<div>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>
</div>
<input
type="text"
value={incrementAmount}
onChange={(e) => setIncrementAmount(e.target.value)}
/>
<div>
<button onClick={() => dispatch(incrementByAmount(addValue))}>Add Amount</button>
<button onClick={resetAll}>Reset</button>
</div>
</section>
)
}
export default Counter

View File

@ -0,0 +1,28 @@
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
count: 0
}
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.count += 1;
},
decrement: (state) => {
state.count -= 1;
},
reset: (state) => {
state.count = 0;
},
incrementByAmount: (state, action) => {
state.count += action.payload;
}
}
});
export const { increment, decrement, reset, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

View File

@ -0,0 +1,44 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-size: 5rem;
display: grid;
place-content: center;
}
input,
button {
font: inherit;
padding: 0.5rem;
}
#root {
width: 100%;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
text-align: center;
max-width: 2.5em;
}
button {
font-size: 2rem;
margin: 0.5em 0 0.5em 0.5em;
min-width: 2em;
}
button:first-child {
margin-left: 0;
}

View File

@ -0,0 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);

58
README.md 100644
View File

@ -0,0 +1,58 @@
# "React Redux Toolkit for Beginners"
### ?? Chapters
---
### Author Links
👋 Hello, I'm Dave Gray.
✅ [Check out my YouTube Channel with all of my tutorials](https://www.youtube.com/DaveGrayTeachesCode).
🚩 [Subscribe to my channel](https://bit.ly/3nGHmNn)
☕ [Buy Me A Coffee](https://buymeacoffee.com/DaveGray)
🚀 Follow Me:
- [Twitter](https://twitter.com/yesdavidgray)
- [LinkedIn](https://www.linkedin.com/in/davidagray/)
- [Blog](https://yesdavidgray.com)
- [Reddit](https://www.reddit.com/user/DaveOnEleven)
---
### Description
📺 [YouTube Playlist](https://www.youtube.com/playlist?list=PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo) for this repository.
🚀 This repository shares ALL of the resources referenced during the React Redux Toolkit tutorial series.
---
### 🎓 Academic Honesty
**DO NOT COPY FOR AN ASSIGNMENT** - Avoid plagiargism and adhere to the spirit of this [Academic Honesty Policy](https://www.freecodecamp.org/news/academic-honesty-policy/).
---
### 📚 References
- 🔗 [Official Site for Redux Toolkit](https://redux-toolkit.js.org/)
### ⚙ VS Code Extensions I Use:
- 🔗 [ES7 React JS Snippets Extension](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
- 🔗 [Prettier VS Code Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- 🔗 [vscode-icons VS Code Extension](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
- 🔗 [Github Themes VS Code Extension](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)
---
### 💻 Source Code
- 🔗 [Chapter 1]()