├── 2019 ├── .gitignore ├── Introduction Lessons 1-7 │ ├── Section 3 - Understanding the base Features and Syntax │ │ └── section-3 │ │ │ ├── .gitignore │ │ │ ├── README.md │ │ │ ├── package.json │ │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ │ └── src │ │ │ └── logo.svg │ ├── Section 4 - Working with Lists and Conditionals │ │ └── section-4 │ │ │ ├── .gitignore │ │ │ ├── README.md │ │ │ ├── package.json │ │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ │ └── src │ │ │ └── logo.svg │ ├── Section 5 - Styling React Components & Elements │ │ └── section-5 │ │ │ ├── .gitignore │ │ │ ├── README.md │ │ │ ├── package.json │ │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ │ └── src │ │ │ └── logo.svg │ ├── Section 6 - Debugging React Apps │ │ └── section-6 │ │ │ ├── .gitignore │ │ │ ├── README.md │ │ │ ├── package.json │ │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ │ └── src │ │ │ └── logo.svg │ └── Section 7 - Diving Deeper Into Components & React Internals │ │ └── section-7 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ └── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt ├── Section 10 - Burger Builder Project - Accessing the Server │ └── section10 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 11 - Multi-Page-Feeling in a Single-Page-App Routing │ ├── routing--react-suspense │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ └── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ └── routing │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ └── logo.svg ├── Section 12 - Adding Routing to our Burger Project │ └── section12npx │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 13 - Forms and Form Validation │ └── section13 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 14 - Redux │ ├── redux--assignment-2 │ │ ├── README.md │ │ ├── package.json │ │ └── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ ├── redux--in-practice │ │ ├── README.md │ │ ├── how-to-use.txt │ │ ├── package.json │ │ └── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ └── redux │ │ ├── README.md │ │ ├── package.json │ │ └── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json ├── Section 15 - Adding Redux to our Project │ └── section15 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 16 - Redux Advanced │ └── section16 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 17 - Redux Advanced Burger Project │ └── section17 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 18 - Adding Authentication to our Burger Project │ └── section18 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 19 - Improving our Burger Project │ └── section19 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── images │ │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 20 - Testing │ └── section20 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 21 - Deploying the App to the Web │ └── section21 │ │ ├── .firebase │ │ └── hosting.YnVpbGQ.cache │ │ ├── .firebaserc │ │ ├── .gitignore │ │ ├── README.md │ │ ├── firebase.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── assets │ │ └── burger-logo.png │ │ └── logo.svg ├── Section 8 - A Real App - The Burger Builder (Basic Version) │ └── the-burger-builder │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ └── assets │ │ └── burger-logo.png └── Section 9 - Reaching out to the web (Http, Ajax) │ ├── http-01 │ ├── .gitignore │ ├── README.md │ ├── how-to-use.txt │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ └── logo.svg │ └── the-burger-builder-with-ajax │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ └── assets │ └── burger-logo.png ├── 2023 ├── .DS_Store ├── 01-expense-manager │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── Chart │ │ │ ├── Chart.css │ │ │ ├── Chart.js │ │ │ ├── ChartBar.css │ │ │ └── ChartBar.js │ │ ├── Expenses │ │ │ ├── ExpenseDate.css │ │ │ ├── ExpenseDate.js │ │ │ ├── ExpenseFilter.css │ │ │ ├── ExpenseFilter.js │ │ │ ├── ExpenseItem.css │ │ │ ├── ExpenseItem.js │ │ │ ├── Expenses.css │ │ │ ├── Expenses.js │ │ │ ├── ExpensesChart.js │ │ │ ├── ExpensesList.css │ │ │ └── ExpensesList.js │ │ ├── NewExpense │ │ │ ├── ExpenseForm.css │ │ │ ├── ExpenseForm.js │ │ │ ├── NewExpense.css │ │ │ └── NewExpense.js │ │ └── UI │ │ │ ├── Card.css │ │ │ └── Card.js │ │ ├── index.css │ │ └── index.js ├── 02-React-key-concepts │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── assets │ │ └── images │ │ │ ├── components.png │ │ │ ├── events.png │ │ │ ├── key-concepts.png │ │ │ └── state.png │ │ ├── components │ │ ├── Concept.js │ │ └── Header.js │ │ ├── index.css │ │ └── index.js ├── 03-styling-practice │ ├── package-lock.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ ├── CourseGoals │ │ │ ├── CourseGoalItem │ │ │ │ ├── CourseGoalItem.css │ │ │ │ └── CourseGoalItem.js │ │ │ ├── CourseGoalList │ │ │ │ ├── CourseGoalList.css │ │ │ │ └── CourseGoalList.js │ │ │ └── CourseInput │ │ │ │ ├── CourseInput.css │ │ │ │ └── CourseInput.js │ │ └── UI │ │ │ └── Button │ │ │ └── Button.js │ │ ├── index.css │ │ └── index.js ├── 04-investment-calculator │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── assets │ │ └── investment-calculator-logo.png │ │ ├── components │ │ ├── Header │ │ │ ├── Header.js │ │ │ └── Header.module.css │ │ ├── ResultsTable │ │ │ ├── ResultsTable.js │ │ │ └── ResultsTable.module.css │ │ └── UserInputs │ │ │ ├── UserInputs.js │ │ │ └── UserInputs.module.css │ │ ├── index.css │ │ └── index.js ├── 05-Add-User-WithModal │ ├── package-lock.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── UI │ │ │ ├── Button.js │ │ │ ├── Button.module.css │ │ │ ├── Card.js │ │ │ ├── Card.module.css │ │ │ ├── ErrorModal.js │ │ │ └── ErrorModal.module.css │ │ └── Users │ │ │ ├── AddUser.js │ │ │ ├── AddUser.module.css │ │ │ ├── UsersList.js │ │ │ └── UsersList.module.css │ │ ├── index.css │ │ └── index.js ├── 06-dummy-login-useEffect │ ├── .gitignore │ ├── package-lock.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── Home │ │ │ ├── Home.js │ │ │ └── Home.module.css │ │ ├── Login │ │ │ ├── Login.js │ │ │ └── Login.module.css │ │ ├── MainHeader │ │ │ ├── MainHeader.js │ │ │ ├── MainHeader.module.css │ │ │ ├── Navigation.js │ │ │ └── Navigation.module.css │ │ └── UI │ │ │ ├── Button │ │ │ ├── Button.js │ │ │ └── Button.module.css │ │ │ └── Card │ │ │ ├── Card.js │ │ │ └── Card.module.css │ │ ├── index.css │ │ └── index.js ├── 07-food-ordering-app │ ├── package-lock.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── .DS_Store │ │ ├── App.js │ │ ├── assets │ │ └── meals.jpg │ │ ├── components │ │ ├── .DS_Store │ │ ├── Cart │ │ │ ├── Cart.js │ │ │ ├── Cart.module.css │ │ │ ├── CartIcon.js │ │ │ ├── CartItem.js │ │ │ └── CartItem.module.css │ │ ├── Layout │ │ │ ├── Header.js │ │ │ ├── Header.module.css │ │ │ ├── HeaderCartButton.js │ │ │ └── HeaderCartButton.module.css │ │ ├── Meals │ │ │ ├── AvailableMeals.js │ │ │ ├── AvailableMeals.module.css │ │ │ ├── MealItem │ │ │ │ ├── MealItem.js │ │ │ │ ├── MealItem.module.css │ │ │ │ ├── MealItemForm.js │ │ │ │ └── MealItemForm.module.css │ │ │ ├── Meals.js │ │ │ ├── MealsSummary.js │ │ │ └── MealsSummary.module.css │ │ └── UI │ │ │ ├── Card.js │ │ │ ├── Card.module.css │ │ │ ├── Input.js │ │ │ ├── Input.module.css │ │ │ ├── Modal.js │ │ │ └── Modal.module.css │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── CartProvider.js │ │ └── cart-context.js ├── 08-custom-hooks │ ├── .DS_Store │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── BackwardCounter.js │ │ ├── Card.js │ │ ├── Card.module.css │ │ └── ForwardCounter.js │ │ ├── hooks │ │ └── use-counter.js │ │ ├── index.css │ │ └── index.js ├── 09-onwards-to-a-more-realistic-example │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── NewTask │ │ │ ├── NewTask.js │ │ │ ├── TaskForm.js │ │ │ └── TaskForm.module.css │ │ ├── Tasks │ │ │ ├── TaskItem.js │ │ │ ├── TaskItem.module.css │ │ │ ├── Tasks.js │ │ │ └── Tasks.module.css │ │ └── UI │ │ │ ├── Section.js │ │ │ └── Section.module.css │ │ ├── hooks │ │ └── use-http.js │ │ ├── index.css │ │ └── index.js ├── 10-forms │ ├── .DS_Store │ ├── package-lock.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── .DS_Store │ │ ├── App.js │ │ ├── components │ │ ├── BasicForm.js │ │ └── SimpleInput.js │ │ ├── hooks │ │ └── use-input.js │ │ ├── index.css │ │ └── index.js ├── 11-food-ordering-app-advanced │ ├── .DS_Store │ ├── package-lock.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── .DS_Store │ │ ├── App.js │ │ ├── assets │ │ └── meals.jpg │ │ ├── components │ │ ├── .DS_Store │ │ ├── Cart │ │ │ ├── Cart.js │ │ │ ├── Cart.module.css │ │ │ ├── CartIcon.js │ │ │ ├── CartItem.js │ │ │ └── CartItem.module.css │ │ ├── Layout │ │ │ ├── Header.js │ │ │ ├── Header.module.css │ │ │ ├── HeaderCartButton.js │ │ │ └── HeaderCartButton.module.css │ │ ├── Meals │ │ │ ├── AvailableMeals.js │ │ │ ├── AvailableMeals.module.css │ │ │ ├── MealItem │ │ │ │ ├── MealItem.js │ │ │ │ ├── MealItem.module.css │ │ │ │ ├── MealItemForm.js │ │ │ │ └── MealItemForm.module.css │ │ │ ├── Meals.js │ │ │ ├── MealsSummary.js │ │ │ └── MealsSummary.module.css │ │ └── UI │ │ │ ├── Card.js │ │ │ ├── Card.module.css │ │ │ ├── Input.js │ │ │ ├── Input.module.css │ │ │ ├── Modal.js │ │ │ └── Modal.module.css │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── CartProvider.js │ │ └── cart-context.js └── 12-Redux │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── components │ ├── Auth.js │ ├── Auth.module.css │ ├── Counter.js │ ├── Counter.module.css │ ├── Header.js │ ├── Header.module.css │ ├── UserProfile.js │ └── UserProfile.module.css │ ├── index.css │ ├── index.js │ └── store │ ├── auth.js │ ├── counter.js │ └── index.js ├── .DS_Store ├── .gitattributes ├── .gitignore └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/.DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | # Ignore node_modules in all apps under 2019 and 2023 folders 4 | /2019/*/node_modules 5 | /2023/*/node_modules 6 | 7 | # Ignore npm-debug.log files globally 8 | npm-debug.log* 9 | 10 | # Ignore yarn.lock files globally 11 | yarn.lock 12 | -------------------------------------------------------------------------------- /2019/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependency directories 2 | node_modules/ 3 | dist/ 4 | build/ 5 | 6 | # Environment files 7 | .env 8 | .env.local 9 | .env.development.local 10 | .env.test.local 11 | .env.production.local 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # Build files 19 | *.log 20 | *.zip 21 | *.gz 22 | *.tar 23 | *.tar.gz 24 | *.tgz 25 | *.map 26 | 27 | # Editor-specific files 28 | .vscode/ 29 | .idea/ 30 | *.sublime-* 31 | 32 | # Compiled output 33 | *.js 34 | *.jsx 35 | *.css 36 | *.min.js 37 | *.min.css 38 | 39 | # Dependency lock files 40 | yarn.lock 41 | package-lock.json 42 | 43 | # macOS specific files 44 | .DS_Store 45 | 46 | # Compiled TypeScript output 47 | *.tsbuildinfo 48 | 49 | # Testing artifacts 50 | coverage/ 51 | 52 | # Cache directories 53 | .cache/ 54 | dist/ 55 | build/ 56 | 57 | # Ignore all local .env files 58 | !.env.example 59 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/.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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section-3", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.10.2", 7 | "react-dom": "^16.10.2", 8 | "react-scripts": "3.2.0" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/public/favicon.ico -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/public/logo192.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/public/logo512.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 3 - Understanding the base Features and Syntax/section-3/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/.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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section-4", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.11.0", 7 | "react-dom": "^16.11.0", 8 | "react-scripts": "3.2.0" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/public/favicon.ico -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/public/logo192.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/public/logo512.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 4 - Working with Lists and Conditionals/section-4/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/.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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section-5", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "radium": "^0.26.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-scripts": "3.2.0" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/public/favicon.ico -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/public/logo192.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/public/logo512.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 5 - Styling React Components & Elements/section-5/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/.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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section-6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "radium": "^0.26.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-scripts": "3.2.0" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/public/favicon.ico -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/public/logo192.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/public/logo512.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 6 - Debugging React Apps/section-6/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/.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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section-7", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "radium": "^0.26.0", 8 | "react": "^16.11.0", 9 | "react-dom": "^16.11.0", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/public/favicon.ico -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/public/logo192.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/public/logo512.png -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-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 | -------------------------------------------------------------------------------- /2019/Introduction Lessons 1-7/Section 7 - Diving Deeper Into Components & React Internals/section-7/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 10 - Burger Builder Project - Accessing the Server/section10/.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 | -------------------------------------------------------------------------------- /2019/Section 10 - Burger Builder Project - Accessing the Server/section10/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section10", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-scripts": "3.2.0" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /2019/Section 10 - Burger Builder Project - Accessing the Server/section10/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 10 - Burger Builder Project - Accessing the Server/section10/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 10 - Burger Builder Project - Accessing the Server/section10/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 10 - Burger Builder Project - Accessing the Server/section10/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 10 - Burger Builder Project - Accessing the Server/section10/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 10 - Burger Builder Project - Accessing the Server/section10/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 10 - Burger Builder Project - Accessing the Server/section10/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 | -------------------------------------------------------------------------------- /2019/Section 10 - Burger Builder Project - Accessing the Server/section10/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 10 - Burger Builder Project - Accessing the Server/section10/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 10 - Burger Builder Project - Accessing the Server/section10/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing--react-suspense/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing--react-suspense/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-16.6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.6.0", 7 | "react-dom": "^16.6.0", 8 | "react-router-dom": "^4.3.1", 9 | "react-scripts": "2.0.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing--react-suspense/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing--react-suspense/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing--react-suspense/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 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/.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 | -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "routing", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-router": "^5.1.2", 10 | "react-router-dom": "^5.1.2", 11 | "react-scripts": "3.2.0" 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 | -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/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 | -------------------------------------------------------------------------------- /2019/Section 11 - Multi-Page-Feeling in a Single-Page-App Routing/routing/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 12 - Adding Routing to our Burger Project/section12npx/.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 | -------------------------------------------------------------------------------- /2019/Section 12 - Adding Routing to our Burger Project/section12npx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section12npx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-router-dom": "^5.1.2", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /2019/Section 12 - Adding Routing to our Burger Project/section12npx/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 12 - Adding Routing to our Burger Project/section12npx/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 12 - Adding Routing to our Burger Project/section12npx/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 12 - Adding Routing to our Burger Project/section12npx/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 12 - Adding Routing to our Burger Project/section12npx/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 12 - Adding Routing to our Burger Project/section12npx/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 12 - Adding Routing to our Burger Project/section12npx/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 | -------------------------------------------------------------------------------- /2019/Section 12 - Adding Routing to our Burger Project/section12npx/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 12 - Adding Routing to our Burger Project/section12npx/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 12 - Adding Routing to our Burger Project/section12npx/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 13 - Forms and Form Validation/section13/.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 | -------------------------------------------------------------------------------- /2019/Section 13 - Forms and Form Validation/section13/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section13", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-router-dom": "^5.1.2", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /2019/Section 13 - Forms and Form Validation/section13/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 13 - Forms and Form Validation/section13/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 13 - Forms and Form Validation/section13/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 13 - Forms and Form Validation/section13/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 13 - Forms and Form Validation/section13/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 13 - Forms and Form Validation/section13/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 13 - Forms and Form Validation/section13/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 | -------------------------------------------------------------------------------- /2019/Section 13 - Forms and Form Validation/section13/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 13 - Forms and Form Validation/section13/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 13 - Forms and Form Validation/section13/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux--assignment-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.11.0", 7 | "react-dom": "^16.11.0", 8 | "react-redux": "^7.1.3", 9 | "react-scripts": "1.0.13", 10 | "redux": "^4.0.4" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux--assignment-2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 14 - Redux/redux--assignment-2/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux--assignment-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": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux--in-practice/how-to-use.txt: -------------------------------------------------------------------------------- 1 | How to use the downloaded files 2 | 3 | 1) Run "npm install" in the extracted folder 4 | 2) Run "npm start" to view the project 5 | 6 | Compare my code to yours to solve issues you might encounter. You may also copy the content of src/ into your own project's src/ folder to use your project setup (which might've been created with a different create-react-app version) and still use my code. -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux--in-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.11.0", 7 | "react-dom": "^16.11.0", 8 | "react-redux": "^7.1.3", 9 | "react-scripts": "1.0.13", 10 | "redux": "^4.0.4" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux--in-practice/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 14 - Redux/redux--in-practice/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux--in-practice/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 14 - Redux/redux/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 14 - Redux/redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /2019/Section 15 - Adding Redux to our Project/section15/.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 | -------------------------------------------------------------------------------- /2019/Section 15 - Adding Redux to our Project/section15/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section15", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-redux": "^7.1.3", 10 | "react-router-dom": "^5.1.2", 11 | "react-scripts": "3.2.0", 12 | "redux": "^4.0.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /2019/Section 15 - Adding Redux to our Project/section15/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 15 - Adding Redux to our Project/section15/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 15 - Adding Redux to our Project/section15/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 15 - Adding Redux to our Project/section15/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 15 - Adding Redux to our Project/section15/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 15 - Adding Redux to our Project/section15/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 15 - Adding Redux to our Project/section15/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 | -------------------------------------------------------------------------------- /2019/Section 15 - Adding Redux to our Project/section15/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 15 - Adding Redux to our Project/section15/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 15 - Adding Redux to our Project/section15/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 16 - Redux Advanced/section16/.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 | -------------------------------------------------------------------------------- /2019/Section 16 - Redux Advanced/section16/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section16", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-redux": "^7.1.3", 10 | "react-router-dom": "^5.1.2", 11 | "react-scripts": "3.2.0", 12 | "redux": "^4.0.4", 13 | "redux-thunk": "^2.3.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /2019/Section 16 - Redux Advanced/section16/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 16 - Redux Advanced/section16/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 16 - Redux Advanced/section16/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 16 - Redux Advanced/section16/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 16 - Redux Advanced/section16/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 16 - Redux Advanced/section16/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 16 - Redux Advanced/section16/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 | -------------------------------------------------------------------------------- /2019/Section 16 - Redux Advanced/section16/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 16 - Redux Advanced/section16/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 16 - Redux Advanced/section16/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 17 - Redux Advanced Burger Project/section17/.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 | -------------------------------------------------------------------------------- /2019/Section 17 - Redux Advanced Burger Project/section17/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section17", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-redux": "^7.1.3", 10 | "react-router": "^5.1.2", 11 | "react-router-dom": "^5.1.2", 12 | "react-scripts": "3.2.0", 13 | "redux": "^4.0.4", 14 | "redux-thunk": "^2.3.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /2019/Section 17 - Redux Advanced Burger Project/section17/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 17 - Redux Advanced Burger Project/section17/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 17 - Redux Advanced Burger Project/section17/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 17 - Redux Advanced Burger Project/section17/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 17 - Redux Advanced Burger Project/section17/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 17 - Redux Advanced Burger Project/section17/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 17 - Redux Advanced Burger Project/section17/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 | -------------------------------------------------------------------------------- /2019/Section 17 - Redux Advanced Burger Project/section17/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 17 - Redux Advanced Burger Project/section17/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 17 - Redux Advanced Burger Project/section17/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 18 - Adding Authentication to our Burger Project/section18/.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 | -------------------------------------------------------------------------------- /2019/Section 18 - Adding Authentication to our Burger Project/section18/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section18", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-redux": "^7.1.3", 10 | "react-router-dom": "^5.1.2", 11 | "react-scripts": "3.2.0", 12 | "redux": "^4.0.4", 13 | "redux-thunk": "^2.3.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /2019/Section 18 - Adding Authentication to our Burger Project/section18/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 18 - Adding Authentication to our Burger Project/section18/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 18 - Adding Authentication to our Burger Project/section18/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 18 - Adding Authentication to our Burger Project/section18/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 18 - Adding Authentication to our Burger Project/section18/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 18 - Adding Authentication to our Burger Project/section18/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 18 - Adding Authentication to our Burger Project/section18/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 | -------------------------------------------------------------------------------- /2019/Section 18 - Adding Authentication to our Burger Project/section18/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 18 - Adding Authentication to our Burger Project/section18/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 18 - Adding Authentication to our Burger Project/section18/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 19 - Improving our Burger Project/section19/.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 | -------------------------------------------------------------------------------- /2019/Section 19 - Improving our Burger Project/section19/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section19", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.11.0", 7 | "react-dom": "^16.11.0", 8 | "react-scripts": "3.2.0" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /2019/Section 19 - Improving our Burger Project/section19/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 19 - Improving our Burger Project/section19/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 19 - Improving our Burger Project/section19/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 19 - Improving our Burger Project/section19/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 19 - Improving our Burger Project/section19/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 19 - Improving our Burger Project/section19/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 19 - Improving our Burger Project/section19/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 | -------------------------------------------------------------------------------- /2019/Section 19 - Improving our Burger Project/section19/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 19 - Improving our Burger Project/section19/src/assets/images/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 19 - Improving our Burger Project/section19/src/assets/images/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 20 - Testing/section20/.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 | -------------------------------------------------------------------------------- /2019/Section 20 - Testing/section20/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section20", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "enzyme": "^3.10.0", 8 | "enzyme-adapter-react-16": "^1.15.1", 9 | "react": "^16.11.0", 10 | "react-dom": "^16.11.0", 11 | "react-redux": "^7.1.3", 12 | "react-router-dom": "^5.1.2", 13 | "react-scripts": "3.2.0", 14 | "react-test-renderer": "^16.11.0", 15 | "redux": "^4.0.4", 16 | "redux-thunk": "^2.3.0" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": "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 | -------------------------------------------------------------------------------- /2019/Section 20 - Testing/section20/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 20 - Testing/section20/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 20 - Testing/section20/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 20 - Testing/section20/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 20 - Testing/section20/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 20 - Testing/section20/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 20 - Testing/section20/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 | -------------------------------------------------------------------------------- /2019/Section 20 - Testing/section20/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 20 - Testing/section20/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 20 - Testing/section20/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "react-my-burger-4ea57" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/.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 | -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section21", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-redux": "^7.1.3", 10 | "react-router-dom": "^5.1.2", 11 | "react-scripts": "3.2.0", 12 | "redux": "^4.0.4", 13 | "redux-thunk": "^2.3.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 21 - Deploying the App to the Web/section21/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 21 - Deploying the App to the Web/section21/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 21 - Deploying the App to the Web/section21/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/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 | -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 21 - Deploying the App to the Web/section21/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 21 - Deploying the App to the Web/section21/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/.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 | -------------------------------------------------------------------------------- /2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "the-burger-builder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.11.0", 8 | "react-dom": "^16.11.0", 9 | "react-scripts": "3.2.0" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/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 | -------------------------------------------------------------------------------- /2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 8 - A Real App - The Burger Builder (Basic Version)/the-burger-builder/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/.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 | -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/how-to-use.txt: -------------------------------------------------------------------------------- 1 | How to use the downloaded files 2 | 3 | 1) Run "npm install" in the extracted folder 4 | 2) Run "npm start" to view the project 5 | 6 | Compare my code to yours to solve issues you might encounter. You may also copy the content of src/ into your own project's src/ folder to use your project setup (which might've been created with a different create-react-app version) and still use my code. -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.0.0", 8 | "react-dom": "^16.0.0", 9 | "react-scripts": "1.0.13" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/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 | -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/http-01/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/.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 | -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "the-burger-builder-with-ajax", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.11.0", 7 | "react-dom": "^16.11.0", 8 | "react-scripts": "3.2.0" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/public/favicon.ico -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/public/logo192.png -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/public/logo512.png -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/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 | -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/src/assets/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2019/Section 9 - Reaching out to the web (Http, Ajax)/the-burger-builder-with-ajax/src/assets/burger-logo.png -------------------------------------------------------------------------------- /2023/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/.DS_Store -------------------------------------------------------------------------------- /2023/01-expense-manager/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.6", 7 | "@testing-library/react": "^11.2.2", 8 | "@testing-library/user-event": "^12.5.0", 9 | "react": "^18.0.0", 10 | "react-dom": "^18.0.0", 11 | "react-scripts": "^5.0.1", 12 | "web-vitals": "^0.2.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /2023/01-expense-manager/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/01-expense-manager/public/favicon.ico -------------------------------------------------------------------------------- /2023/01-expense-manager/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/01-expense-manager/public/logo192.png -------------------------------------------------------------------------------- /2023/01-expense-manager/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/01-expense-manager/public/logo512.png -------------------------------------------------------------------------------- /2023/01-expense-manager/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 | -------------------------------------------------------------------------------- /2023/01-expense-manager/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import Expenses from "./components/Expenses/Expenses"; 4 | import NewExpense from "./components/NewExpense/NewExpense"; 5 | function App() { 6 | const DUMMY_EXPENSES = [ 7 | { 8 | id: "e1", 9 | title: "Toilet Paper", 10 | amount: 94.12, 11 | date: new Date(2020, 7, 14), 12 | }, 13 | { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) }, 14 | { 15 | id: "e3", 16 | title: "Car Insurance", 17 | amount: 294.67, 18 | date: new Date(2021, 2, 28), 19 | }, 20 | { 21 | id: "e4", 22 | title: "New Desk (Wooden)", 23 | amount: 450, 24 | date: new Date(2021, 5, 12), 25 | }, 26 | ]; 27 | const [expenses, setExpenses] = useState(DUMMY_EXPENSES); 28 | 29 | function addExpenseHandler(expense) { 30 | setExpenses((prevExpenses) => { 31 | return [expense, ...prevExpenses]; 32 | }); 33 | } 34 | 35 | return ( 36 |
37 | 38 | 39 |
40 | ); 41 | } 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Chart/Chart.css: -------------------------------------------------------------------------------- 1 | .chart { 2 | padding: 1rem; 3 | border-radius: 12px; 4 | background-color: #f8dfff; 5 | text-align: center; 6 | display: flex; 7 | justify-content: space-around; 8 | height: 10rem; 9 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Chart/Chart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Chart.css"; 3 | import ChartBar from "./ChartBar"; 4 | 5 | function Chart(props) { 6 | const dataPointsValues = props.dataPoints.map((dataPoint) => dataPoint.value); 7 | const totalMaximum = Math.max(...dataPointsValues); 8 | 9 | return ( 10 |
11 | {props.dataPoints.map((dataPoint) => ( 12 | 18 | ))} 19 |
20 | ); 21 | } 22 | 23 | export default Chart; 24 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Chart/ChartBar.css: -------------------------------------------------------------------------------- 1 | .chart-bar { 2 | height: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .chart-bar__inner { 9 | height: 100%; 10 | width: 100%; 11 | border: 1px solid #313131; 12 | border-radius: 12px; 13 | background-color: #c3b4f3; 14 | overflow: hidden; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: flex-end; 18 | } 19 | 20 | .chart-bar__fill { 21 | background-color: #4826b9; 22 | width: 100%; 23 | transition: all 0.3s ease-out; 24 | } 25 | 26 | .chart-bar__label { 27 | font-weight: bold; 28 | font-size: 0.5rem; 29 | text-align: center; 30 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Chart/ChartBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./ChartBar.css"; 3 | 4 | function ChartBar(props) { 5 | let barFillHeight = "0%"; 6 | 7 | if (props.maxValue > 0) { 8 | barFillHeight = Math.round((props.value / props.maxValue) * 100) + "%"; 9 | } 10 | return ( 11 |
12 |
13 |
17 |
18 |
{props.label}
19 |
20 | ); 21 | } 22 | 23 | export default ChartBar; 24 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/ExpenseDate.css: -------------------------------------------------------------------------------- 1 | .expense-date { 2 | display: flex; 3 | flex-direction: column; 4 | width: 5.5rem; 5 | height: 5.5rem; 6 | border: 1px solid #ececec; 7 | background-color: #2a2a2a; 8 | color: white; 9 | border-radius: 12px; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .expense-date__month { 15 | font-size: 0.75rem; 16 | font-weight: bold; 17 | } 18 | 19 | .expense-date__year { 20 | font-size: 0.75rem; 21 | } 22 | 23 | .expense-date__day { 24 | font-size: 1.5rem; 25 | font-weight: bold; 26 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/ExpenseDate.js: -------------------------------------------------------------------------------- 1 | import "./ExpenseDate.css"; 2 | 3 | function ExpenseDate(props) { 4 | const month = props.date.toLocaleString("en-US", { month: "long" }); 5 | const day = props.date.toLocaleString("en-US", { day: "2-digit" }); 6 | const year = props.date.getFullYear(); 7 | 8 | return ( 9 |
10 |
{month}
11 |
{year}
12 |
{day}
13 |
14 | ); 15 | } 16 | 17 | export default ExpenseDate; 18 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/ExpenseFilter.css: -------------------------------------------------------------------------------- 1 | .expenses-filter { 2 | color: white; 3 | padding: 0 1rem; 4 | } 5 | 6 | .expenses-filter__control { 7 | display: flex; 8 | width: 100%; 9 | align-items: center; 10 | justify-content: space-between; 11 | margin: 1rem 0; 12 | } 13 | 14 | .expenses-filter label { 15 | font-weight: bold; 16 | margin-bottom: 0.5rem; 17 | } 18 | 19 | .expenses-filter select { 20 | font: inherit; 21 | padding: 0.5rem 3rem; 22 | font-weight: bold; 23 | border-radius: 6px; 24 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/ExpenseFilter.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./ExpenseFilter.css"; 4 | 5 | const ExpensesFilter = (props) => { 6 | function yearChangeHandler(event) { 7 | props.onChangeFilter(event.target.value); 8 | } 9 | return ( 10 |
11 |
12 | 13 | 19 |
20 |
21 | ); 22 | }; 23 | 24 | export default ExpensesFilter; 25 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/ExpenseItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./ExpenseItem.css"; 4 | import ExpenseDate from "./ExpenseDate"; 5 | import Card from "../UI/Card"; 6 | 7 | function ExpenseItem(props) { 8 | return ( 9 |
  • 10 | 11 | 12 |
    13 |

    {props.title}

    14 |
    ${props.amount}
    15 |
    16 |     17 |
    • 18 | ); 19 | } 20 | 21 | export default ExpenseItem; 22 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/Expenses.css: -------------------------------------------------------------------------------- 1 | .expenses { 2 | padding: 1rem; 3 | background-color: rgb(31, 31, 31); 4 | margin: 2rem auto; 5 | width: 50rem; 6 | max-width: 95%; 7 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/Expenses.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import Card from "../UI/Card"; 4 | import ExpensesFilter from "./ExpenseFilter"; 5 | import "./Expenses.css"; 6 | import ExpensesList from "./ExpensesList"; 7 | import ExpensesChart from "./ExpensesChart"; 8 | 9 | export default function Expenses(props) { 10 | const [filteredYear, setFilteredYear] = useState("2020"); 11 | 12 | const filteredExpenses = props.items.filter( 13 | (exp) => exp.date.getFullYear().toString() === filteredYear 14 | ); 15 | 16 | function filterChangeHandler(selectedYear) { 17 | setFilteredYear(selectedYear); 18 | } 19 | return ( 20 |
    21 | 22 | 26 | 27 | 28 | 29 |
    30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/ExpensesChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Chart from "../Chart/Chart"; 3 | 4 | function ExpensesChart(props) { 5 | const chartDataPoints = [ 6 | { label: "jan", value: 0 }, 7 | { label: "feb", value: 0 }, 8 | { label: "mar", value: 0 }, 9 | { label: "apr", value: 0 }, 10 | { label: "may", value: 0 }, 11 | { label: "jun", value: 0 }, 12 | { label: "jul", value: 0 }, 13 | { label: "aug", value: 0 }, 14 | { label: "sep", value: 0 }, 15 | { label: "oct", value: 0 }, 16 | { label: "nov", value: 0 }, 17 | { label: "dec", value: 0 }, 18 | ]; 19 | 20 | for (const expense of props.expenses) { 21 | const expenseMonth = expense.date.getMonth(); // jan is 0 22 | chartDataPoints[expenseMonth].value += expense.amount; 23 | } 24 | 25 | return ; 26 | } 27 | 28 | export default ExpensesChart; 29 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/ExpensesList.css: -------------------------------------------------------------------------------- 1 | .expenses-list { 2 | list-style: none; 3 | padding: 0; 4 | } 5 | 6 | .expenses-list__fallback { 7 | color: white; 8 | text-align: center; 9 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/Expenses/ExpensesList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ExpenseItem from "./ExpenseItem"; 3 | import "./ExpensesList.css"; 4 | 5 | function ExpensesList(props) { 6 | if (props.items.length === 0) { 7 | return

    Found no expenses.

    ; 8 | } 9 | return ( 10 | 20 | ); 21 | } 22 | 23 | export default ExpensesList; 24 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/NewExpense/ExpenseForm.css: -------------------------------------------------------------------------------- 1 | .new-expense__controls { 2 | display: flex; 3 | flex-wrap: wrap; 4 | gap: 1rem; 5 | margin-bottom: 1rem; 6 | text-align: left; 7 | } 8 | 9 | .new-expense__control label { 10 | font-weight: bold; 11 | margin-bottom: 0.5rem; 12 | display: block; 13 | } 14 | 15 | .new-expense__control input { 16 | font: inherit; 17 | padding: 0.5rem; 18 | border-radius: 6px; 19 | border: 1px solid #ccc; 20 | width: 20rem; 21 | max-width: 100%; 22 | } 23 | 24 | .new-expense__actions { 25 | text-align: right; 26 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/NewExpense/NewExpense.css: -------------------------------------------------------------------------------- 1 | .new-expense { 2 | background-color: #a892ee; 3 | padding: 1rem; 4 | margin: 2rem auto; 5 | width: 50rem; 6 | max-width: 95%; 7 | border-radius: 12px; 8 | text-align: center; 9 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); 10 | } 11 | 12 | .new-expense button { 13 | font: inherit; 14 | cursor: pointer; 15 | padding: 1rem 2rem; 16 | border: 1px solid #40005d; 17 | background-color: #40005d; 18 | color: white; 19 | border-radius: 12px; 20 | margin-right: 1rem; 21 | } 22 | 23 | .new-expense button:hover, 24 | .new-expense button:active { 25 | background-color: #510674; 26 | border-color: #510674; 27 | } 28 | 29 | .new-expense button.alternative { 30 | color: #220131; 31 | border-color: transparent; 32 | background-color: transparent; 33 | } 34 | 35 | .new-expense button.alternative:hover, 36 | .new-expense button.alternative:active { 37 | background-color: #ddb3f8; 38 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/NewExpense/NewExpense.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./NewExpense.css"; 3 | import ExpenseForm from "./ExpenseForm"; 4 | 5 | function NewExpense(props) { 6 | const [isEditing, setIsEditing] = useState(false); 7 | function saveExpenseDataHandler(enteredExpenseData) { 8 | const expenseData = { 9 | ...enteredExpenseData, 10 | id: Math.random().toString(), 11 | }; 12 | props.onAddExpense(expenseData); 13 | setIsEditing(false); 14 | } 15 | 16 | function stopEditingHandler() { 17 | setIsEditing(false); 18 | } 19 | 20 | return ( 21 |
    22 | {!isEditing && ( 23 | //show the button is isEditing is false 24 | )} 25 | 26 | { 27 | isEditing && ( 28 | 32 | ) //show the form if isEditing if true 33 | } 34 |
    35 | ); 36 | } 37 | 38 | export default NewExpense; 39 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/UI/Card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | border-radius: 12px; 3 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); 4 | } -------------------------------------------------------------------------------- /2023/01-expense-manager/src/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import "./Card.css"; 2 | 3 | export default function Card(props) { 4 | const classes = "card " + props.className; 5 | return
    {props.children}
    ; 6 | } 7 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: 'Noto Sans JP', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #3f3f3f; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /2023/01-expense-manager/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /2023/02-React-key-concepts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-key-concepts", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /2023/02-React-key-concepts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/02-React-key-concepts/public/favicon.ico -------------------------------------------------------------------------------- /2023/02-React-key-concepts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/02-React-key-concepts/public/logo192.png -------------------------------------------------------------------------------- /2023/02-React-key-concepts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/02-React-key-concepts/public/logo512.png -------------------------------------------------------------------------------- /2023/02-React-key-concepts/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 | -------------------------------------------------------------------------------- /2023/02-React-key-concepts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/02-React-key-concepts/src/assets/images/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/02-React-key-concepts/src/assets/images/components.png -------------------------------------------------------------------------------- /2023/02-React-key-concepts/src/assets/images/events.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/02-React-key-concepts/src/assets/images/events.png -------------------------------------------------------------------------------- /2023/02-React-key-concepts/src/assets/images/key-concepts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/02-React-key-concepts/src/assets/images/key-concepts.png -------------------------------------------------------------------------------- /2023/02-React-key-concepts/src/assets/images/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/02-React-key-concepts/src/assets/images/state.png -------------------------------------------------------------------------------- /2023/02-React-key-concepts/src/components/Concept.js: -------------------------------------------------------------------------------- 1 | function Concept(props) { 2 | return ( 3 |
  • 4 | {props.description} 5 |

    {props.title}

    6 |

    {props.description}

    7 |
    • 8 | ); 9 | } 10 | 11 | export default Concept; 12 | -------------------------------------------------------------------------------- /2023/02-React-key-concepts/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import keyConceptsImage from "../assets/images/key-concepts.png"; 2 | 3 | function Header() { 4 | return ( 5 |
    6 | Medal badge with a star 7 |

    Key React Concepts

    8 |

    Selected key React concepts you should know about

    9 |
    10 | ); 11 | } 12 | 13 | export default Header; 14 | -------------------------------------------------------------------------------- /2023/02-React-key-concepts/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /2023/03-styling-practice/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/03-styling-practice/public/favicon.ico -------------------------------------------------------------------------------- /2023/03-styling-practice/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/03-styling-practice/public/logo192.png -------------------------------------------------------------------------------- /2023/03-styling-practice/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/03-styling-practice/public/logo512.png -------------------------------------------------------------------------------- /2023/03-styling-practice/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 | -------------------------------------------------------------------------------- /2023/03-styling-practice/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/03-styling-practice/src/App.css: -------------------------------------------------------------------------------- 1 | #goals { 2 | width: 35rem; 3 | max-width: 90%; 4 | margin: 3rem auto; 5 | } 6 | 7 | #goal-form { 8 | width: 30rem; 9 | max-width: 90%; 10 | margin: 3rem auto; 11 | padding: 2rem; 12 | box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); 13 | border-radius: 10px; 14 | } 15 | -------------------------------------------------------------------------------- /2023/03-styling-practice/src/components/CourseGoals/CourseGoalItem/CourseGoalItem.css: -------------------------------------------------------------------------------- 1 | .goal-item { 2 | margin: 1rem 0; 3 | background: #8b005d; 4 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); 5 | color: white; 6 | padding: 1rem 2rem; 7 | cursor: pointer; 8 | } 9 | -------------------------------------------------------------------------------- /2023/03-styling-practice/src/components/CourseGoals/CourseGoalItem/CourseGoalItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './CourseGoalItem.css'; 4 | 5 | const CourseGoalItem = props => { 6 | // const [deleteText, setDeleteText] = useState(''); 7 | 8 | const deleteHandler = () => { 9 | // setDeleteText('(Deleted!)'); 10 | props.onDelete(props.id); 11 | }; 12 | 13 | return ( 14 |
  • 15 | {props.children} 16 |
    • 17 | ); 18 | }; 19 | 20 | export default CourseGoalItem; 21 | -------------------------------------------------------------------------------- /2023/03-styling-practice/src/components/CourseGoals/CourseGoalList/CourseGoalList.css: -------------------------------------------------------------------------------- 1 | .goal-list { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } -------------------------------------------------------------------------------- /2023/03-styling-practice/src/components/CourseGoals/CourseGoalList/CourseGoalList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import CourseGoalItem from '../CourseGoalItem/CourseGoalItem'; 4 | import './CourseGoalList.css'; 5 | 6 | const CourseGoalList = props => { 7 | return ( 8 | 19 | ); 20 | }; 21 | 22 | export default CourseGoalList; 23 | -------------------------------------------------------------------------------- /2023/03-styling-practice/src/components/CourseGoals/CourseInput/CourseInput.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/03-styling-practice/src/components/CourseGoals/CourseInput/CourseInput.css -------------------------------------------------------------------------------- /2023/03-styling-practice/src/components/UI/Button/Button.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const Button = styled.button` 4 | width: 100%; 5 | font: inherit; 6 | padding: 0.5rem 1.5rem; 7 | border: 1px solid #8b005d; 8 | color: white; 9 | background: #8b005d; 10 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.26); 11 | cursor: pointer; 12 | 13 | @media (min-width: 768px) { 14 | width: auto; 15 | } 16 | 17 | &:focus { 18 | outline: none; 19 | } 20 | 21 | &:hover, 22 | &:active { 23 | background: #ac0e77; 24 | border-color: #ac0e77; 25 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.26); 26 | } 27 | `; 28 | 29 | export default Button; 30 | -------------------------------------------------------------------------------- /2023/03-styling-practice/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /2023/03-styling-practice/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render(); 9 | -------------------------------------------------------------------------------- /2023/04-investment-calculator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-investment-calculator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /2023/04-investment-calculator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/04-investment-calculator/public/favicon.ico -------------------------------------------------------------------------------- /2023/04-investment-calculator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/04-investment-calculator/public/logo192.png -------------------------------------------------------------------------------- /2023/04-investment-calculator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/04-investment-calculator/public/logo512.png -------------------------------------------------------------------------------- /2023/04-investment-calculator/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 | -------------------------------------------------------------------------------- /2023/04-investment-calculator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/04-investment-calculator/src/assets/investment-calculator-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/04-investment-calculator/src/assets/investment-calculator-logo.png -------------------------------------------------------------------------------- /2023/04-investment-calculator/src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import logo from "../../assets/investment-calculator-logo.png"; 2 | import classes from "./Header.module.css"; 3 | function Header() { 4 | return ( 5 |
    6 | logo 7 |

    Investment Calculator

    8 |
    9 | ); 10 | } 11 | 12 | export default Header; 13 | -------------------------------------------------------------------------------- /2023/04-investment-calculator/src/components/Header/Header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | text-align: center; 3 | margin: 3rem auto; 4 | } 5 | 6 | .header img { 7 | width: 5rem; 8 | height: 5rem; 9 | object-fit: contain; 10 | background-color: transparent; 11 | } 12 | 13 | .header h1 { 14 | font-size: 1.5rem; 15 | } -------------------------------------------------------------------------------- /2023/04-investment-calculator/src/components/ResultsTable/ResultsTable.module.css: -------------------------------------------------------------------------------- 1 | .result { 2 | max-width: 50rem; 3 | margin: 2rem auto; 4 | padding: 1rem; 5 | table-layout: fixed; 6 | border-spacing: 1rem; 7 | text-align: right; 8 | } 9 | 10 | .result thead { 11 | font-size: 0.7rem; 12 | color: #83e6c0; 13 | } 14 | 15 | .result tbody { 16 | font-family: 'Roboto Condensed', sans-serif; 17 | font-size: 0.85rem; 18 | color: #c2e9e0; 19 | } -------------------------------------------------------------------------------- /2023/04-investment-calculator/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | font-family: 'Quicksand', sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | /* background-color: #242a28; */ 13 | background: radial-gradient(#303b37, #1a1f1d); 14 | color: #e1eeeb; 15 | } 16 | -------------------------------------------------------------------------------- /2023/04-investment-calculator/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/05-Add-User-WithModal/public/favicon.ico -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/05-Add-User-WithModal/public/logo192.png -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/05-Add-User-WithModal/public/logo512.png -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/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 | -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import AddUser from "./components/Users/AddUser"; 3 | import UsersList from "./components/Users/UsersList"; 4 | 5 | function App() { 6 | const [usersList, setUsersList] = useState([]); 7 | 8 | function addUserHandler(userName, userAge) { 9 | setUsersList((prevUsersList) => { 10 | return [ 11 | ...prevUsersList, 12 | { name: userName, age: userAge, id: Math.random().toString() }, 13 | ]; 14 | }); 15 | } 16 | return ( 17 |
    18 | 19 | 20 |
    21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/components/UI/Button.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Button.module.css"; 3 | 4 | export default function Button(props) { 5 | return ( 6 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/components/UI/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | font: inherit; 3 | border: 1px solid #4f005f; 4 | background: #4f005f; 5 | color: white; 6 | padding: 0.25rem 1rem; 7 | cursor: pointer; 8 | } 9 | 10 | .button:hover, 11 | .button:active { 12 | background: #741188; 13 | border-color: #741188; 14 | } 15 | 16 | .button:focus { 17 | outline: none; 18 | } -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Card.module.css"; 3 | 4 | function Card(props) { 5 | // props.className 6 | return ( 7 |
    {props.children}
    8 | ); 9 | } 10 | 11 | export default Card; 12 | -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/components/UI/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | background: white; 3 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); 4 | border-radius: 10px; 5 | } -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/components/UI/ErrorModal.module.css: -------------------------------------------------------------------------------- 1 | .backdrop { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100vh; 7 | z-index: 10; 8 | background: rgba(0, 0, 0, 0.75); 9 | } 10 | 11 | .modal { 12 | position: fixed; 13 | top: 30vh; 14 | left: 10%; 15 | width: 80%; 16 | z-index: 100; 17 | overflow: hidden; 18 | } 19 | 20 | .header { 21 | background: #4f005f; 22 | padding: 1rem; 23 | } 24 | 25 | .header h2 { 26 | margin: 0; 27 | color: white; 28 | } 29 | 30 | .content { 31 | padding: 1rem; 32 | } 33 | 34 | .actions { 35 | padding: 1rem; 36 | display: flex; 37 | justify-content: flex-end; 38 | } 39 | 40 | @media (min-width: 768px) { 41 | .modal { 42 | left: calc(50% - 20rem); 43 | width: 40rem; 44 | } 45 | } -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/components/Users/AddUser.module.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2rem auto; 3 | padding: 1rem; 4 | width: 90%; 5 | max-width: 40rem; 6 | } 7 | 8 | .input label { 9 | display: block; 10 | font-weight: bold; 11 | margin-bottom: 0.5rem; 12 | } 13 | 14 | .input input { 15 | font: inherit; 16 | display: block; 17 | width: 100%; 18 | border: 1px solid #ccc; 19 | padding: 0.15rem; 20 | margin-bottom: 0.5rem; 21 | } 22 | 23 | .input input:focus { 24 | outline: none; 25 | border-color: #4f005f; 26 | } -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/components/Users/UsersList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "../UI/Card"; 3 | import classes from "./UsersList.module.css"; 4 | 5 | function UsersList(props) { 6 | return ( 7 | 8 |
      9 | {props.users.map((user) => { 10 | return ( 11 |
    • 12 | {user.name} ({user.age} years old) 13 |
      • 14 | ); 15 | })} 16 |
    17 |     18 | ); 19 | } 20 | 21 | export default UsersList; 22 | -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/components/Users/UsersList.module.css: -------------------------------------------------------------------------------- 1 | .users { 2 | margin: 2rem auto; 3 | width: 90%; 4 | max-width: 40rem; 5 | } 6 | 7 | .users ul { 8 | list-style: none; 9 | padding: 1rem; 10 | } 11 | 12 | .users li { 13 | border: 1px solid #ccc; 14 | margin: 0.5rem 0; 15 | padding: 0.5rem; 16 | } -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | background: #1f1f1f; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | } -------------------------------------------------------------------------------- /2023/05-Add-User-WithModal/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render(); 9 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependency directories 2 | node_modules/ 3 | dist/ 4 | build/ 5 | 6 | # Environment files 7 | .env 8 | .env.local 9 | .env.development.local 10 | .env.test.local 11 | .env.production.local 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # Build files 19 | *.log 20 | *.zip 21 | *.gz 22 | *.tar 23 | *.tar.gz 24 | *.tgz 25 | *.map 26 | 27 | # Editor-specific files 28 | .vscode/ 29 | .idea/ 30 | *.sublime-* 31 | 32 | # Compiled output 33 | *.js 34 | *.jsx 35 | *.css 36 | *.min.js 37 | *.min.css 38 | 39 | # Dependency lock files 40 | yarn.lock 41 | package-lock.json 42 | 43 | # macOS specific files 44 | .DS_Store 45 | 46 | # Compiled TypeScript output 47 | *.tsbuildinfo 48 | 49 | # Testing artifacts 50 | coverage/ 51 | 52 | # Cache directories 53 | .cache/ 54 | dist/ 55 | build/ 56 | 57 | # Ignore all local .env files 58 | !.env.example 59 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/06-dummy-login-useEffect/public/favicon.ico -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/06-dummy-login-useEffect/public/logo192.png -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/06-dummy-login-useEffect/public/logo512.png -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/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 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Card from '../UI/Card/Card'; 4 | import classes from './Home.module.css'; 5 | 6 | const Home = (props) => { 7 | return ( 8 | 9 |

    Welcome back!

    10 |     11 | ); 12 | }; 13 | 14 | export default Home; 15 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/Home/Home.module.css: -------------------------------------------------------------------------------- 1 | .home { 2 | width: 90%; 3 | max-width: 40rem; 4 | padding: 3rem; 5 | margin: 2rem auto; 6 | text-align: center; 7 | } -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/Login/Login.module.css: -------------------------------------------------------------------------------- 1 | .login { 2 | width: 90%; 3 | max-width: 40rem; 4 | margin: 2rem auto; 5 | padding: 2rem; 6 | } 7 | 8 | .control { 9 | margin: 1rem 0; 10 | display: flex; 11 | align-items: stretch; 12 | flex-direction: column; 13 | } 14 | 15 | .control label, 16 | .control input { 17 | display: block; 18 | } 19 | 20 | .control label { 21 | font-weight: bold; 22 | flex: 1; 23 | color: #464646; 24 | margin-bottom: 0.5rem; 25 | } 26 | 27 | .control input { 28 | flex: 3; 29 | font: inherit; 30 | padding: 0.35rem 0.35rem; 31 | border-radius: 6px; 32 | border: 1px solid #ccc; 33 | } 34 | 35 | .control input:focus { 36 | outline: none; 37 | border-color: #4f005f; 38 | background: #f6dbfc; 39 | } 40 | 41 | .control.invalid input { 42 | border-color: red; 43 | background: #fbdada; 44 | } 45 | 46 | .actions { 47 | text-align: center; 48 | } 49 | 50 | @media (min-width: 768px) { 51 | .control { 52 | align-items: center; 53 | flex-direction: row; 54 | } 55 | 56 | } -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/MainHeader/MainHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Navigation from './Navigation'; 4 | import classes from './MainHeader.module.css'; 5 | 6 | const MainHeader = (props) => { 7 | return ( 8 |
    9 |

    A Typical Page

    10 | 11 |
    12 | ); 13 | }; 14 | 15 | export default MainHeader; 16 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/MainHeader/MainHeader.module.css: -------------------------------------------------------------------------------- 1 | .main-header { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 5rem; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | background: #741188; 11 | padding: 0 2rem; 12 | } 13 | 14 | .main-header h1 { 15 | color: white; 16 | } -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/MainHeader/Navigation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import classes from './Navigation.module.css'; 4 | 5 | const Navigation = (props) => { 6 | return ( 7 | 26 | ); 27 | }; 28 | 29 | export default Navigation; 30 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/MainHeader/Navigation.module.css: -------------------------------------------------------------------------------- 1 | .nav ul { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | display: flex; 6 | align-items: center; 7 | } 8 | 9 | .nav li { 10 | margin: 0; 11 | margin-left: 2rem; 12 | } 13 | 14 | .nav a { 15 | text-decoration: none; 16 | color: white; 17 | } 18 | 19 | .nav a:hover, 20 | .nav a:active { 21 | color: #f3cafb; 22 | } 23 | 24 | .nav button { 25 | font: inherit; 26 | background: #dd0db0; 27 | border: 1px solid #dd0db0; 28 | padding: 0.5rem 1.5rem; 29 | color: white; 30 | cursor: pointer; 31 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26); 32 | border-radius: 20px; 33 | } 34 | 35 | .nav button:focus { 36 | outline: none; 37 | } 38 | 39 | .nav button:hover, 40 | .nav button:active { 41 | color: #f3cafb; 42 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26); 43 | } 44 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/UI/Button/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import classes from './Button.module.css'; 4 | 5 | const Button = (props) => { 6 | return ( 7 | 15 | ); 16 | }; 17 | 18 | export default Button; 19 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/UI/Button/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | font: inherit; 3 | border: 1px solid #4f005f; 4 | background: #4f005f; 5 | color: white; 6 | padding: 0.75rem 3.5rem; 7 | cursor: pointer; 8 | font-size: 1.15rem; 9 | border-radius: 30px; 10 | } 11 | 12 | .button:hover, 13 | .button:active { 14 | background: #741188; 15 | border-color: #741188; 16 | } 17 | 18 | .button:focus { 19 | outline: none; 20 | } 21 | 22 | button:disabled, 23 | button:focus:disabled, 24 | button:hover:disabled, 25 | button:active:disabled { 26 | background: #ccc; 27 | border-color: #ccc; 28 | color: #666666; 29 | cursor: not-allowed; 30 | } 31 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/UI/Card/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import classes from './Card.module.css'; 4 | 5 | const Card = (props) => { 6 | return ( 7 |
    {props.children}
    8 | ); 9 | }; 10 | 11 | export default Card; 12 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/components/UI/Card/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | background: white; 3 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); 4 | border-radius: 10px; 5 | } 6 | -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | background: #fff; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | } 13 | 14 | main { 15 | margin-top: 6rem; 16 | } -------------------------------------------------------------------------------- /2023/06-dummy-login-useEffect/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render(); 9 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/07-food-ordering-app/public/favicon.ico -------------------------------------------------------------------------------- /2023/07-food-ordering-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/07-food-ordering-app/public/logo192.png -------------------------------------------------------------------------------- /2023/07-food-ordering-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/07-food-ordering-app/public/logo512.png -------------------------------------------------------------------------------- /2023/07-food-ordering-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/07-food-ordering-app/src/.DS_Store -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Header from "./components/Layout/Header"; 3 | import Meals from "./components/Meals/Meals"; 4 | import Cart from "./components/Cart/Cart"; 5 | import CartProvider from "./store/CartProvider"; 6 | 7 | function App() { 8 | const [cartIsShown, setCartIsShown] = useState(false); 9 | 10 | function showCartHandler() { 11 | setCartIsShown(true); 12 | } 13 | 14 | function hideCartHandler() { 15 | setCartIsShown(false); 16 | } 17 | return ( 18 | 19 |
    20 | {cartIsShown && } 21 |
    22 | 23 |
    24 | 25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/assets/meals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/07-food-ordering-app/src/assets/meals.jpg -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/07-food-ordering-app/src/components/.DS_Store -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Cart/Cart.module.css: -------------------------------------------------------------------------------- 1 | .cart-items { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | max-height: 20rem; 6 | overflow: auto; 7 | } 8 | 9 | .total { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | font-weight: bold; 14 | font-size: 1.5rem; 15 | margin: 1rem 0; 16 | } 17 | 18 | .actions { 19 | text-align: right; 20 | } 21 | 22 | .actions button { 23 | font: inherit; 24 | cursor: pointer; 25 | background-color: transparent; 26 | border: 1px solid #8a2b06; 27 | padding: 0.5rem 2rem; 28 | border-radius: 25px; 29 | margin-left: 1rem; 30 | } 31 | 32 | .actions button:hover, 33 | .actions button:active { 34 | background-color: #5a1a01; 35 | border-color: #5a1a01; 36 | color: white; 37 | } 38 | 39 | .actions .button--alt { 40 | color: #8a2b06; 41 | } 42 | 43 | .actions .button { 44 | background-color: #8a2b06; 45 | color: white; 46 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Cart/CartIcon.js: -------------------------------------------------------------------------------- 1 | const CartIcon = () => { 2 | return ( 3 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default CartIcon; 14 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Cart/CartItem.js: -------------------------------------------------------------------------------- 1 | import classes from './CartItem.module.css'; 2 | 3 | const CartItem = (props) => { 4 | const price = `$${props.price.toFixed(2)}`; 5 | 6 | return ( 7 |
  • 8 |
    9 |

    {props.name}

    10 |
    11 | {price} 12 | x {props.amount} 13 |
    14 |
    15 |
    16 | 17 | 18 |
    19 |
    • 20 | ); 21 | }; 22 | 23 | export default CartItem; 24 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Layout/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import mealsImage from "../../assets/meals.jpg"; 3 | import classes from "./Header.module.css"; 4 | import HeaderCartButton from "./HeaderCartButton"; 5 | 6 | export default function Header(props) { 7 | return ( 8 | 9 |
    10 |

    ReactMeals

    11 | 12 |
    13 |
    14 | A table full of good food 15 |
    16 |     17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Layout/Header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 5rem; 7 | background-color: #8a2b06; 8 | color: white; 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | padding: 0 10%; 13 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 14 | z-index: 10; 15 | } 16 | 17 | .main-image { 18 | width: 100%; 19 | height: 25rem; 20 | z-index: 0; 21 | overflow: hidden; 22 | } 23 | 24 | .main-image img { 25 | width: 110%; 26 | height: 100%; 27 | object-fit: cover; 28 | transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem); 29 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Meals/AvailableMeals.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./AvailableMeals.module.css"; 3 | import Card from "../UI/Card"; 4 | import MealItem from "./MealItem/MealItem"; 5 | const DUMMY_MEALS = [ 6 | { 7 | id: "m1", 8 | name: "Sushi", 9 | description: "Finest fish and veggies", 10 | price: 22.99, 11 | }, 12 | { 13 | id: "m2", 14 | name: "Schnitzel", 15 | description: "A german specialty!", 16 | price: 16.5, 17 | }, 18 | { 19 | id: "m3", 20 | name: "Barbecue Burger", 21 | description: "American, raw, meaty", 22 | price: 12.99, 23 | }, 24 | { 25 | id: "m4", 26 | name: "Green Bowl", 27 | description: "Healthy...and green...", 28 | price: 18.99, 29 | }, 30 | ]; 31 | 32 | export default function AvailableMeals(props) { 33 | const mealsList = DUMMY_MEALS.map((meal) => ( 34 | 41 | )); 42 | 43 | return ( 44 |
    45 | 46 |
      {mealsList}
    47 |     48 |
    49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Meals/AvailableMeals.module.css: -------------------------------------------------------------------------------- 1 | .meals { 2 | max-width: 60rem; 3 | width: 90%; 4 | margin: 2rem auto; 5 | animation: meals-appear 1s ease-out forwards; 6 | } 7 | 8 | .meals ul { 9 | list-style: none; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | @keyframes meals-appear { 15 | from { 16 | opacity: 0; 17 | transform: translateY(3rem); 18 | } 19 | 20 | to { 21 | opacity: 1; 22 | transform: translateY(0); 23 | } 24 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Meals/MealItem/MealItem.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import classes from "./MealItem.module.css"; 3 | import MealItemForm from "./MealItemForm"; 4 | import CartContext from "../../../store/cart-context"; 5 | 6 | export default function MealItem(props) { 7 | const price = `$${props.price.toFixed(2)}`; 8 | 9 | const cartCtx = useContext(CartContext); 10 | 11 | function addToCartHandler(amount) { 12 | cartCtx.addItem({ 13 | id: props.id, 14 | name: props.name, 15 | amount: amount, 16 | price: props.price, 17 | }); 18 | } 19 | return ( 20 |
  • 21 |
    22 |

    {props.name}

    23 |
    {props.description}
    24 |
    {price}
    25 |
    26 |
    27 | 28 |
    29 |
    • 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Meals/MealItem/MealItem.module.css: -------------------------------------------------------------------------------- 1 | .meal { 2 | display: flex; 3 | justify-content: space-between; 4 | margin: 1rem; 5 | padding-bottom: 1rem; 6 | border-bottom: 1px solid #ccc; 7 | } 8 | 9 | .meal h3 { 10 | margin: 0 0 0.25rem 0; 11 | } 12 | 13 | .description { 14 | font-style: italic; 15 | } 16 | 17 | .price { 18 | margin-top: 0.25rem; 19 | font-weight: bold; 20 | color: #ad5502; 21 | font-size: 1.25rem; 22 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Meals/MealItem/MealItemForm.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | text-align: right; 3 | } 4 | 5 | .form button { 6 | font: inherit; 7 | cursor: pointer; 8 | background-color: #8a2b06; 9 | border: 1px solid #8a2b06; 10 | color: white; 11 | padding: 0.25rem 2rem; 12 | border-radius: 20px; 13 | font-weight: bold; 14 | } 15 | 16 | .form button:hover, 17 | .form button:active { 18 | background-color: #641e03; 19 | border-color: #641e03; 20 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Meals/Meals.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import MealsSummary from "./MealsSummary"; 3 | import AvailableMeals from "./AvailableMeals"; 4 | 5 | export default function Meals(props) { 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Meals/MealsSummary.js: -------------------------------------------------------------------------------- 1 | import classes from "./MealsSummary.module.css"; 2 | 3 | const MealsSummary = () => { 4 | return ( 5 |
    6 |

    Delicious Food, Delivered To You

    7 |

    8 | Choose your favorite meal from our broad selection of available meals 9 | and enjoy a delicious lunch or dinner at home. 10 |

    11 |

    12 | All our meals are cooked with high-quality ingredients, just-in-time and 13 | of course by experienced chefs! 14 |

    15 |
    16 | ); 17 | }; 18 | 19 | export default MealsSummary; 20 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/Meals/MealsSummary.module.css: -------------------------------------------------------------------------------- 1 | .summary { 2 | text-align: center; 3 | max-width: 45rem; 4 | width: 90%; 5 | margin: auto; 6 | margin-top: -10rem; 7 | position: relative; 8 | background-color: #383838; 9 | color: white; 10 | border-radius: 14px; 11 | padding: 1rem; 12 | box-shadow: 0 1px 18px 10px rgba(0, 0, 0, 0.25); 13 | } 14 | 15 | .summary h2 { 16 | font-size: 2rem; 17 | margin-top: 0; 18 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import classes from "./Card.module.css"; 2 | 3 | export default function Card(props) { 4 | return
    {props.children}
    ; 5 | } 6 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/UI/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | padding: 1rem; 3 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 4 | border-radius: 14px; 5 | background-color: white; 6 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/UI/Input.js: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from "react"; 2 | import classes from "./Input.module.css"; 3 | 4 | const Input = forwardRef((props, ref) => { 5 | return ( 6 |
    7 | 8 | 9 |
    10 | ); 11 | }); 12 | 13 | export default Input; 14 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/UI/Input.module.css: -------------------------------------------------------------------------------- 1 | .input { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 0.5rem; 5 | } 6 | 7 | .input label { 8 | font-weight: bold; 9 | margin-right: 1rem; 10 | } 11 | 12 | .input input { 13 | width: 3rem; 14 | border-radius: 5px; 15 | border: 1px solid #ccc; 16 | font: inherit; 17 | padding-left: 0.5rem; 18 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/UI/Modal.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Modal.module.css"; 3 | import ReactDOM from "react-dom"; 4 | 5 | function Backdrop(props) { 6 | return
    ; 7 | } 8 | 9 | function ModalOverlay(props) { 10 | return ( 11 |
    12 |
    {props.children}
    13 |
    14 | ); 15 | } 16 | 17 | const portalElement = document.getElementById("overlays"); 18 | 19 | export default function Modal(props) { 20 | return ( 21 | 22 | {ReactDOM.createPortal( 23 | , 24 | portalElement 25 | )} 26 | {ReactDOM.createPortal( 27 | {props.children}, 28 | portalElement 29 | )} 30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/components/UI/Modal.module.css: -------------------------------------------------------------------------------- 1 | .backdrop { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100vh; 7 | z-index: 20; 8 | background-color: rgba(0, 0, 0, 0.75); 9 | } 10 | 11 | .modal { 12 | position: fixed; 13 | top: 20vh; 14 | left: 5%; 15 | width: 90%; 16 | background-color: white; 17 | padding: 1rem; 18 | border-radius: 14px; 19 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 20 | z-index: 30; 21 | animation: slide-down 300ms ease-out forwards; 22 | } 23 | 24 | @media (min-width: 768px) { 25 | .modal { 26 | width: 40rem; 27 | left: calc(50% - 20rem); 28 | } 29 | } 30 | 31 | @keyframes slide-down { 32 | from { 33 | opacity: 0; 34 | transform: translateY(-3rem); 35 | } 36 | to { 37 | opacity: 1; 38 | transform: translateY(0); 39 | } 40 | } -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: 'Noto Sans JP', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #3f3f3f; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /2023/07-food-ordering-app/src/store/cart-context.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const CartContext = React.createContext({ 4 | items: [], 5 | totalAmount: 0, 6 | addItem: (item) => {}, 7 | removeItem: (id) => {}, 8 | }); 9 | 10 | export default CartContext; 11 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/08-custom-hooks/.DS_Store -------------------------------------------------------------------------------- /2023/08-custom-hooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/08-custom-hooks/public/favicon.ico -------------------------------------------------------------------------------- /2023/08-custom-hooks/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/08-custom-hooks/public/logo192.png -------------------------------------------------------------------------------- /2023/08-custom-hooks/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/08-custom-hooks/public/logo512.png -------------------------------------------------------------------------------- /2023/08-custom-hooks/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 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import BackwardCounter from './components/BackwardCounter'; 3 | import ForwardCounter from './components/ForwardCounter'; 4 | 5 | function App() { 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/src/components/BackwardCounter.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | import Card from "./Card"; 4 | import useCounter from "../hooks/use-counter"; 5 | 6 | const BackwardCounter = () => { 7 | const counter = useCounter(false); 8 | 9 | return {counter}; 10 | }; 11 | 12 | export default BackwardCounter; 13 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/src/components/Card.js: -------------------------------------------------------------------------------- 1 | import classes from './Card.module.css'; 2 | 3 | const Card = (props) => { 4 | return
    {props.children}
    ; 5 | }; 6 | 7 | export default Card; 8 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/src/components/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | max-width: 40rem; 3 | margin: 3rem auto; 4 | background-color: white; 5 | padding: 1rem; 6 | border-radius: 12px; 7 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 8 | text-align: center; 9 | font-size: 2.5rem; 10 | font-weight: bold; 11 | } 12 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/src/components/ForwardCounter.js: -------------------------------------------------------------------------------- 1 | import useCounter from "../hooks/use-counter"; 2 | import Card from "./Card"; 3 | 4 | const ForwardCounter = () => { 5 | const counter = useCounter(); 6 | 7 | return {counter}; 8 | }; 9 | 10 | export default ForwardCounter; 11 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/src/hooks/use-counter.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | const useCounter = (forwards = true) => { 4 | const [counter, setCounter] = useState(0); 5 | 6 | useEffect(() => { 7 | const interval = setInterval(() => { 8 | if (forwards) { 9 | setCounter((prevCounter) => prevCounter + 1); 10 | } else { 11 | setCounter((prevCounter) => prevCounter - 1); 12 | } 13 | }, 1000); 14 | 15 | return () => clearInterval(interval); 16 | }, [forwards]); 17 | 18 | return counter; 19 | }; 20 | 21 | export default useCounter; 22 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: 'Noto Sans JP', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #3f3f3f; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /2023/08-custom-hooks/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.6", 7 | "@testing-library/react": "^11.2.2", 8 | "@testing-library/user-event": "^12.5.0", 9 | "react": "^18.0.0", 10 | "react-dom": "^18.0.0", 11 | "react-scripts": "^5.0.1", 12 | "web-vitals": "^0.2.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/09-onwards-to-a-more-realistic-example/public/favicon.ico -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/09-onwards-to-a-more-realistic-example/public/logo192.png -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/09-onwards-to-a-more-realistic-example/public/logo512.png -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/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 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from "react"; 2 | 3 | import Tasks from "./components/Tasks/Tasks"; 4 | import NewTask from "./components/NewTask/NewTask"; 5 | import useHttp from "./hooks/use-http"; 6 | 7 | function App() { 8 | const [tasks, setTasks] = useState([]); 9 | 10 | const transformTasks = (tasksObj) => { 11 | const loadedTasks = []; 12 | for (const taskKey in data) { 13 | loadedTasks.push({ id: taskKey, text: data[taskKey].text }); 14 | } 15 | setTasks(loadedTasks); 16 | }; 17 | 18 | const { isLoading, error, sendRequest: fetchTasks } = useHttp(); 19 | 20 | useEffect(() => { 21 | fetchTasks( 22 | { url: "https://react-http-6b4a6.firebaseio.com/tasks.json" }, 23 | transformTasks 24 | ); 25 | }, [fetchTasks]); 26 | 27 | const taskAddHandler = (task) => { 28 | setTasks((prevTasks) => prevTasks.concat(task)); 29 | }; 30 | 31 | return ( 32 | 33 | 34 | 40 | 41 | ); 42 | } 43 | 44 | export default App; 45 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/components/NewTask/TaskForm.js: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | 3 | import classes from './TaskForm.module.css'; 4 | 5 | const TaskForm = (props) => { 6 | const taskInputRef = useRef(); 7 | 8 | const submitHandler = (event) => { 9 | event.preventDefault(); 10 | 11 | const enteredValue = taskInputRef.current.value; 12 | 13 | if (enteredValue.trim().length > 0) { 14 | props.onEnterTask(enteredValue); 15 | } 16 | }; 17 | 18 | return ( 19 |
    20 | 21 | 22 |
    23 | ); 24 | }; 25 | 26 | export default TaskForm; 27 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/components/NewTask/TaskForm.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | display: flex; 3 | justify-content: space-between; 4 | } 5 | 6 | .form input { 7 | font:inherit; 8 | padding: 0.25rem; 9 | border: none; 10 | border-bottom: 3px solid #ccc; 11 | flex: 1; 12 | margin-right: 2rem; 13 | } 14 | 15 | .form input:focus { 16 | outline: none; 17 | border-color: #7a0144; 18 | } -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/components/Tasks/TaskItem.js: -------------------------------------------------------------------------------- 1 | import classes from './TaskItem.module.css'; 2 | 3 | const TaskItem = (props) => { 4 | return
  • {props.children}
    • 5 | }; 6 | 7 | export default TaskItem; -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/components/Tasks/TaskItem.module.css: -------------------------------------------------------------------------------- 1 | .task { 2 | border-bottom: 1px solid #ccc; 3 | padding: 1rem; 4 | font-weight: bold; 5 | font-size: 1.25rem; 6 | } 7 | 8 | .task:last-of-type { 9 | border-bottom: none; 10 | } -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/components/Tasks/Tasks.js: -------------------------------------------------------------------------------- 1 | import Section from "../UI/Section"; 2 | import TaskItem from "./TaskItem"; 3 | import classes from "./Tasks.module.css"; 4 | 5 | const Tasks = (props) => { 6 | let taskList =

    No tasks found. Start adding some!

    ; 7 | 8 | if (props.items.length > 0) { 9 | taskList = ( 10 |
      11 | {props.items.map((task) => ( 12 | {task.text} 13 | ))} 14 |
    15 | ); 16 | } 17 | 18 | let content = taskList; 19 | 20 | if (props.error) { 21 | content = ; 22 | } 23 | 24 | if (props.loading) { 25 | content = "Loading tasks..."; 26 | } 27 | 28 | return ( 29 |
    30 |
    {content}
    31 |
    32 | ); 33 | }; 34 | 35 | export default Tasks; 36 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/components/Tasks/Tasks.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | text-align: center; 3 | } 4 | 5 | .container ul { 6 | list-style: none; 7 | margin: 0; 8 | padding: 0; 9 | text-align: left; 10 | } 11 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/components/UI/Section.js: -------------------------------------------------------------------------------- 1 | import classes from './Section.module.css'; 2 | 3 | const Section = (props) => { 4 | return
    {props.children}
    ; 5 | }; 6 | 7 | export default Section; 8 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/components/UI/Section.module.css: -------------------------------------------------------------------------------- 1 | .section { 2 | max-width: 40rem; 3 | margin: 2rem auto; 4 | background-color: white; 5 | padding: 1rem; 6 | border-radius: 12px; 7 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 8 | } 9 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/hooks/use-http.js: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from "react"; 2 | 3 | const useHttp = () => { 4 | const [isLoading, setIsLoading] = useState(false); 5 | const [error, setError] = useState(null); 6 | 7 | const sendRequest = useCallback(async (requestConfig, applyData) => { 8 | setIsLoading(true); 9 | setError(null); 10 | try { 11 | const response = await fetch(requestConfig.url, { 12 | method: requestConfig.method ? requestConfig.method : "GET", 13 | headers: requestConfig.headers ? requestConfig.headers : {}, 14 | body: requestConfig.body ? JSON.stringify(requestConfig.body) : null, 15 | }); 16 | 17 | if (!response.ok) { 18 | throw new Error("Request failed!"); 19 | } 20 | 21 | const data = await response.json(); 22 | 23 | applyData(data); 24 | } catch (err) { 25 | setError(err.message || "Something went wrong!"); 26 | } 27 | setIsLoading(false); 28 | }, []); 29 | 30 | return { isLoading, error, sendRequest }; 31 | }; 32 | 33 | export default useHttp; 34 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: 'Noto Sans JP', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #3f3f3f; 14 | } 15 | 16 | button { 17 | cursor: pointer; 18 | font: inherit; 19 | background-color: #7a0144; 20 | border: 1px solid #7a0144; 21 | border-radius: 20px; 22 | padding: 0.5rem 2rem; 23 | color: white; 24 | } 25 | 26 | button:hover, 27 | button:active { 28 | background-color: #9c095a; 29 | border-color: #9c095a; 30 | } 31 | -------------------------------------------------------------------------------- /2023/09-onwards-to-a-more-realistic-example/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /2023/10-forms/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/10-forms/.DS_Store -------------------------------------------------------------------------------- /2023/10-forms/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/10-forms/public/favicon.ico -------------------------------------------------------------------------------- /2023/10-forms/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/10-forms/public/logo192.png -------------------------------------------------------------------------------- /2023/10-forms/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/10-forms/public/logo512.png -------------------------------------------------------------------------------- /2023/10-forms/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 | -------------------------------------------------------------------------------- /2023/10-forms/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/10-forms/src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/10-forms/src/.DS_Store -------------------------------------------------------------------------------- /2023/10-forms/src/App.js: -------------------------------------------------------------------------------- 1 | import BasicForm from "./components/BasicForm"; 2 | 3 | function App() { 4 | return ( 5 |
    6 | 7 |
    8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /2023/10-forms/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/11-food-ordering-app-advanced/.DS_Store -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/11-food-ordering-app-advanced/public/favicon.ico -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/11-food-ordering-app-advanced/public/logo192.png -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/11-food-ordering-app-advanced/public/logo512.png -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/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 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/11-food-ordering-app-advanced/src/.DS_Store -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Header from "./components/Layout/Header"; 3 | import Meals from "./components/Meals/Meals"; 4 | import Cart from "./components/Cart/Cart"; 5 | import CartProvider from "./store/CartProvider"; 6 | 7 | function App() { 8 | const [cartIsShown, setCartIsShown] = useState(false); 9 | 10 | function showCartHandler() { 11 | setCartIsShown(true); 12 | } 13 | 14 | function hideCartHandler() { 15 | setCartIsShown(false); 16 | } 17 | return ( 18 | 19 |
    20 | {cartIsShown && } 21 |
    22 | 23 |
    24 | 25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/assets/meals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/11-food-ordering-app-advanced/src/assets/meals.jpg -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/11-food-ordering-app-advanced/src/components/.DS_Store -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Cart/Cart.module.css: -------------------------------------------------------------------------------- 1 | .cart-items { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | max-height: 20rem; 6 | overflow: auto; 7 | } 8 | 9 | .total { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | font-weight: bold; 14 | font-size: 1.5rem; 15 | margin: 1rem 0; 16 | } 17 | 18 | .actions { 19 | text-align: right; 20 | } 21 | 22 | .actions button { 23 | font: inherit; 24 | cursor: pointer; 25 | background-color: transparent; 26 | border: 1px solid #8a2b06; 27 | padding: 0.5rem 2rem; 28 | border-radius: 25px; 29 | margin-left: 1rem; 30 | } 31 | 32 | .actions button:hover, 33 | .actions button:active { 34 | background-color: #5a1a01; 35 | border-color: #5a1a01; 36 | color: white; 37 | } 38 | 39 | .actions .button--alt { 40 | color: #8a2b06; 41 | } 42 | 43 | .actions .button { 44 | background-color: #8a2b06; 45 | color: white; 46 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Cart/CartIcon.js: -------------------------------------------------------------------------------- 1 | const CartIcon = () => { 2 | return ( 3 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default CartIcon; 14 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Cart/CartItem.js: -------------------------------------------------------------------------------- 1 | import classes from './CartItem.module.css'; 2 | 3 | const CartItem = (props) => { 4 | const price = `$${props.price.toFixed(2)}`; 5 | 6 | return ( 7 |
  • 8 |
    9 |

    {props.name}

    10 |
    11 | {price} 12 | x {props.amount} 13 |
    14 |
    15 |
    16 | 17 | 18 |
    19 |
    • 20 | ); 21 | }; 22 | 23 | export default CartItem; 24 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Layout/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import mealsImage from "../../assets/meals.jpg"; 3 | import classes from "./Header.module.css"; 4 | import HeaderCartButton from "./HeaderCartButton"; 5 | 6 | export default function Header(props) { 7 | return ( 8 | 9 |
    10 |

    ReactMeals

    11 | 12 |
    13 |
    14 | A table full of good food 15 |
    16 |     17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Layout/Header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 5rem; 7 | background-color: #8a2b06; 8 | color: white; 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | padding: 0 10%; 13 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 14 | z-index: 10; 15 | } 16 | 17 | .main-image { 18 | width: 100%; 19 | height: 25rem; 20 | z-index: 0; 21 | overflow: hidden; 22 | } 23 | 24 | .main-image img { 25 | width: 110%; 26 | height: 100%; 27 | object-fit: cover; 28 | transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem); 29 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Meals/AvailableMeals.module.css: -------------------------------------------------------------------------------- 1 | .meals { 2 | max-width: 60rem; 3 | width: 90%; 4 | margin: 2rem auto; 5 | animation: meals-appear 1s ease-out forwards; 6 | } 7 | 8 | .meals ul { 9 | list-style: none; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | .MealsLoading { 15 | text-align: center; 16 | color: white; 17 | } 18 | 19 | .MealsError { 20 | text-align: center; 21 | color: rgb(210, 79, 79); 22 | } 23 | 24 | @keyframes meals-appear { 25 | from { 26 | opacity: 0; 27 | transform: translateY(3rem); 28 | } 29 | 30 | to { 31 | opacity: 1; 32 | transform: translateY(0); 33 | } 34 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Meals/MealItem/MealItem.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import classes from "./MealItem.module.css"; 3 | import MealItemForm from "./MealItemForm"; 4 | import CartContext from "../../../store/cart-context"; 5 | 6 | export default function MealItem(props) { 7 | const price = `$${props.price.toFixed(2)}`; 8 | 9 | const cartCtx = useContext(CartContext); 10 | 11 | function addToCartHandler(amount) { 12 | cartCtx.addItem({ 13 | id: props.id, 14 | name: props.name, 15 | amount: amount, 16 | price: props.price, 17 | }); 18 | } 19 | return ( 20 |
  • 21 |
    22 |

    {props.name}

    23 |
    {props.description}
    24 |
    {price}
    25 |
    26 |
    27 | 28 |
    29 |
    • 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Meals/MealItem/MealItem.module.css: -------------------------------------------------------------------------------- 1 | .meal { 2 | display: flex; 3 | justify-content: space-between; 4 | margin: 1rem; 5 | padding-bottom: 1rem; 6 | border-bottom: 1px solid #ccc; 7 | } 8 | 9 | .meal h3 { 10 | margin: 0 0 0.25rem 0; 11 | } 12 | 13 | .description { 14 | font-style: italic; 15 | } 16 | 17 | .price { 18 | margin-top: 0.25rem; 19 | font-weight: bold; 20 | color: #ad5502; 21 | font-size: 1.25rem; 22 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Meals/MealItem/MealItemForm.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | text-align: right; 3 | } 4 | 5 | .form button { 6 | font: inherit; 7 | cursor: pointer; 8 | background-color: #8a2b06; 9 | border: 1px solid #8a2b06; 10 | color: white; 11 | padding: 0.25rem 2rem; 12 | border-radius: 20px; 13 | font-weight: bold; 14 | } 15 | 16 | .form button:hover, 17 | .form button:active { 18 | background-color: #641e03; 19 | border-color: #641e03; 20 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Meals/Meals.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import MealsSummary from "./MealsSummary"; 3 | import AvailableMeals from "./AvailableMeals"; 4 | 5 | export default function Meals(props) { 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Meals/MealsSummary.js: -------------------------------------------------------------------------------- 1 | import classes from "./MealsSummary.module.css"; 2 | 3 | const MealsSummary = () => { 4 | return ( 5 |
    6 |

    Delicious Food, Delivered To You

    7 |

    8 | Choose your favorite meal from our broad selection of available meals 9 | and enjoy a delicious lunch or dinner at home. 10 |

    11 |

    12 | All our meals are cooked with high-quality ingredients, just-in-time and 13 | of course by experienced chefs! 14 |

    15 |
    16 | ); 17 | }; 18 | 19 | export default MealsSummary; 20 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/Meals/MealsSummary.module.css: -------------------------------------------------------------------------------- 1 | .summary { 2 | text-align: center; 3 | max-width: 45rem; 4 | width: 90%; 5 | margin: auto; 6 | margin-top: -10rem; 7 | position: relative; 8 | background-color: #383838; 9 | color: white; 10 | border-radius: 14px; 11 | padding: 1rem; 12 | box-shadow: 0 1px 18px 10px rgba(0, 0, 0, 0.25); 13 | } 14 | 15 | .summary h2 { 16 | font-size: 2rem; 17 | margin-top: 0; 18 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import classes from "./Card.module.css"; 2 | 3 | export default function Card(props) { 4 | return
    {props.children}
    ; 5 | } 6 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/UI/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | padding: 1rem; 3 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 4 | border-radius: 14px; 5 | background-color: white; 6 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/UI/Input.js: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from "react"; 2 | import classes from "./Input.module.css"; 3 | 4 | const Input = forwardRef((props, ref) => { 5 | return ( 6 |
    7 | 8 | 9 |
    10 | ); 11 | }); 12 | 13 | export default Input; 14 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/UI/Input.module.css: -------------------------------------------------------------------------------- 1 | .input { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 0.5rem; 5 | } 6 | 7 | .input label { 8 | font-weight: bold; 9 | margin-right: 1rem; 10 | } 11 | 12 | .input input { 13 | width: 3rem; 14 | border-radius: 5px; 15 | border: 1px solid #ccc; 16 | font: inherit; 17 | padding-left: 0.5rem; 18 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/UI/Modal.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Modal.module.css"; 3 | import ReactDOM from "react-dom"; 4 | 5 | function Backdrop(props) { 6 | return
    ; 7 | } 8 | 9 | function ModalOverlay(props) { 10 | return ( 11 |
    12 |
    {props.children}
    13 |
    14 | ); 15 | } 16 | 17 | const portalElement = document.getElementById("overlays"); 18 | 19 | export default function Modal(props) { 20 | return ( 21 | 22 | {ReactDOM.createPortal( 23 | , 24 | portalElement 25 | )} 26 | {ReactDOM.createPortal( 27 | {props.children}, 28 | portalElement 29 | )} 30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/components/UI/Modal.module.css: -------------------------------------------------------------------------------- 1 | .backdrop { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100vh; 7 | z-index: 20; 8 | background-color: rgba(0, 0, 0, 0.75); 9 | } 10 | 11 | .modal { 12 | position: fixed; 13 | top: 20vh; 14 | left: 5%; 15 | width: 90%; 16 | background-color: white; 17 | padding: 1rem; 18 | border-radius: 14px; 19 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 20 | z-index: 30; 21 | animation: slide-down 300ms ease-out forwards; 22 | } 23 | 24 | @media (min-width: 768px) { 25 | .modal { 26 | width: 40rem; 27 | left: calc(50% - 20rem); 28 | } 29 | } 30 | 31 | @keyframes slide-down { 32 | from { 33 | opacity: 0; 34 | transform: translateY(-3rem); 35 | } 36 | to { 37 | opacity: 1; 38 | transform: translateY(0); 39 | } 40 | } -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: 'Noto Sans JP', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #3f3f3f; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /2023/11-food-ordering-app-advanced/src/store/cart-context.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const CartContext = React.createContext({ 4 | items: [], 5 | totalAmount: 0, 6 | addItem: (item) => {}, 7 | removeItem: (id) => {}, 8 | }); 9 | 10 | export default CartContext; 11 | -------------------------------------------------------------------------------- /2023/12-Redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-basics", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.9.5", 7 | "@testing-library/jest-dom": "^5.11.9", 8 | "@testing-library/react": "^11.2.5", 9 | "@testing-library/user-event": "^12.6.3", 10 | "react": "^18.0.0", 11 | "react-dom": "^18.0.0", 12 | "react-redux": "^8.1.2", 13 | "react-scripts": "^5.0.1", 14 | "redux": "^4.2.1", 15 | "web-vitals": "^1.1.0" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /2023/12-Redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/12-Redux/public/favicon.ico -------------------------------------------------------------------------------- /2023/12-Redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/12-Redux/public/logo192.png -------------------------------------------------------------------------------- /2023/12-Redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yudi43/React---The-Complete-Guide--incl-Hooks--React-Router--Redux-/eac3b357f4052a431dd9b98b904080d9dc211e4d/2023/12-Redux/public/logo512.png -------------------------------------------------------------------------------- /2023/12-Redux/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 | -------------------------------------------------------------------------------- /2023/12-Redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2023/12-Redux/src/App.js: -------------------------------------------------------------------------------- 1 | import Counter from "./components/Counter"; 2 | import React from "react"; 3 | import Header from "./components/Header"; 4 | import Auth from "./components/Auth"; 5 | import UserProfile from "./components/UserProfile"; 6 | import { useSelector } from "react-redux"; 7 | 8 | function App() { 9 | const isAuth = useSelector((state) => state.auth.isAuthenticated); 10 | return ( 11 | 12 |
    13 | {!isAuth && } 14 | {isAuth && } 15 | 16 | 17 | ); 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /2023/12-Redux/src/components/Auth.js: -------------------------------------------------------------------------------- 1 | import { useDispatch } from "react-redux"; 2 | import classes from "./Auth.module.css"; 3 | import { authActions } from "../store"; 4 | 5 | const Auth = () => { 6 | const dispatch = useDispatch(); 7 | const submitHandler = (event) => { 8 | event.preventDefault(); 9 | dispatch(authActions.login()); 10 | }; 11 | return ( 12 |
    13 |
    14 |
    15 |
    16 | 17 | 18 |
    19 |
    20 | 21 | 22 |
    23 | 24 |
    25 |
    26 |
    27 | ); 28 | }; 29 | 30 | export default Auth; 31 | -------------------------------------------------------------------------------- /2023/12-Redux/src/components/Auth.module.css: -------------------------------------------------------------------------------- 1 | .auth { 2 | margin: 5rem auto; 3 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); 4 | width: 25rem; 5 | border-radius: 8px; 6 | padding: 1rem; 7 | text-align: center; 8 | background-color: #f4f0fa; 9 | } 10 | 11 | .control { 12 | margin-bottom: 0.5rem; 13 | } 14 | 15 | .control label { 16 | display: block; 17 | color: #616161; 18 | text-transform: uppercase; 19 | margin-bottom: 0.5rem; 20 | } 21 | 22 | .control input { 23 | display: block; 24 | width: 20rem; 25 | margin: auto; 26 | border-radius: 4px; 27 | padding: 0.25rem; 28 | border: 1px solid #ccc; 29 | } 30 | -------------------------------------------------------------------------------- /2023/12-Redux/src/components/Counter.module.css: -------------------------------------------------------------------------------- 1 | .counter { 2 | margin: 5rem auto; 3 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); 4 | width: 40rem; 5 | border-radius: 8px; 6 | padding: 1rem; 7 | text-align: center; 8 | background-color: #f4f0fa; 9 | } 10 | 11 | .counter h1 { 12 | text-transform: uppercase; 13 | color: #575757; 14 | margin: 0; 15 | font-size: 1rem; 16 | } 17 | 18 | .value { 19 | font-size: 2rem; 20 | color: #3c0080; 21 | margin: 2rem 0; 22 | font-weight: bold; 23 | } 24 | 25 | .counter button { 26 | margin: 1rem; 27 | } -------------------------------------------------------------------------------- /2023/12-Redux/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import { useDispatch, useSelector } from "react-redux"; 2 | import classes from "./Header.module.css"; 3 | import { authActions } from "../store"; 4 | 5 | const Header = () => { 6 | const dispatch = useDispatch(); 7 | const isAuth = useSelector((state) => state.auth.isAuthenticated); 8 | const logoutHandler = () => { 9 | dispatch(authActions.logout()); 10 | }; 11 | return ( 12 |
    13 |

    Redux Auth

    14 | {isAuth && ( 15 | 28 | )} 29 |
    30 | ); 31 | }; 32 | 33 | export default Header; 34 | -------------------------------------------------------------------------------- /2023/12-Redux/src/components/Header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | width: 100%; 3 | height: 5rem; 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | background-color: #3c0080; 8 | color: white; 9 | padding: 0 10%; 10 | } 11 | 12 | .header ul { 13 | display: flex; 14 | list-style: none; 15 | margin: 0; 16 | padding: 0; 17 | align-items: center; 18 | } 19 | 20 | .header li { 21 | margin: 0 1rem; 22 | } 23 | 24 | .header a { 25 | text-decoration: none; 26 | color: white; 27 | font-size: 1.25rem; 28 | } 29 | 30 | .header a:hover, 31 | .header a:active { 32 | color: #b864da; 33 | } 34 | 35 | .header button { 36 | font-size: 1.25rem; 37 | background-color: #ffbb00; 38 | border: 1px solid #ffbb00; 39 | padding: 0.5rem 1.5rem; 40 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 41 | color: #2c2922; 42 | } 43 | 44 | .header button:hover, 45 | .header button:active { 46 | background-color: #ffa600; 47 | border-color: #ffa600; 48 | } 49 | -------------------------------------------------------------------------------- /2023/12-Redux/src/components/UserProfile.js: -------------------------------------------------------------------------------- 1 | import classes from './UserProfile.module.css'; 2 | 3 | const UserProfile = () => { 4 | return ( 5 |
    6 |

    My User Profile

    7 |
    8 | ); 9 | }; 10 | 11 | export default UserProfile; 12 | -------------------------------------------------------------------------------- /2023/12-Redux/src/components/UserProfile.module.css: -------------------------------------------------------------------------------- 1 | .profile { 2 | margin: 5rem auto; 3 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); 4 | width: 40rem; 5 | border-radius: 8px; 6 | padding: 1rem; 7 | text-align: center; 8 | background-color: #f4f0fa; 9 | } 10 | -------------------------------------------------------------------------------- /2023/12-Redux/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: sans-serif; 8 | color: #252525; 9 | background-color: #252525; 10 | } 11 | 12 | button { 13 | font: inherit; 14 | cursor: pointer; 15 | background-color: #3c0080; 16 | border: 1px solid #3c0080; 17 | color: white; 18 | padding: 0.5rem 1.5rem; 19 | border-radius: 6px; 20 | } 21 | 22 | button:hover, 23 | button:active { 24 | background-color: #5b14ac; 25 | border-color: #5b14ac; 26 | } -------------------------------------------------------------------------------- /2023/12-Redux/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { Provider } from "react-redux"; 4 | import "./index.css"; 5 | import App from "./App"; 6 | import store from "./store/index"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById("root")); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /2023/12-Redux/src/store/auth.js: -------------------------------------------------------------------------------- 1 | import { createSlice, configureStore } from "@reduxjs/toolkit"; 2 | 3 | const initialAuth = { 4 | isAuthenticated: false, 5 | }; 6 | 7 | const authSlice = createSlice({ 8 | name: "auth", 9 | initialState: initialAuth, 10 | reducers: { 11 | login(state) { 12 | state.isAuthenticated = true; 13 | }, 14 | logout(state) { 15 | state.isAuthenticated = false; 16 | }, 17 | }, 18 | }); 19 | 20 | export default authSlice; 21 | -------------------------------------------------------------------------------- /2023/12-Redux/src/store/counter.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialCounterState = { counter: 0, showCounter: true }; 4 | 5 | const counterSlice = createSlice({ 6 | name: "counter", 7 | initialState: initialCounterState, 8 | reducers: { 9 | increment(state) { 10 | state.counter++; 11 | }, 12 | decrement(state) { 13 | state.counter--; 14 | }, 15 | increase(state, action) { 16 | console.log("this is action.payload:", action.payload); 17 | state.counter += action.payload; 18 | }, 19 | toggleCounter(state) { 20 | state.showCounter = !state.showCounter; 21 | }, 22 | }, 23 | }); 24 | 25 | export default counterSlice; 26 | -------------------------------------------------------------------------------- /2023/12-Redux/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import counterSlice from "./counter"; 3 | import authSlice from "./auth"; 4 | 5 | const store = configureStore({ 6 | reducer: { counter: counterSlice.reducer, auth: authSlice.reducer }, 7 | }); 8 | 9 | export const authActions = authSlice.actions; 10 | export const counterActions = counterSlice.actions; 11 | export default store; 12 | 13 | // const counterReducer = (state = initialState, action) => { 14 | // if (action.type === "increment") { 15 | // return { 16 | // counter: state.counter + 1, 17 | // showCounter: state.showCounter, 18 | // }; 19 | // } 20 | 21 | // if (action.type === "increase") { 22 | // return { 23 | // counter: state.counter + action.amount, 24 | // showCounter: state.showCounter, 25 | // }; 26 | // } 27 | 28 | // if (action.type === "decrement") { 29 | // return { 30 | // counter: state.counter - 1, 31 | // showCounter: state.showCounter, 32 | // }; 33 | // } 34 | 35 | // if (action.type === "toggleCounter") { 36 | // return { 37 | // counter: state.counter, 38 | // showCounter: !state.showCounter, 39 | // }; 40 | // } 41 | 42 | // return state; 43 | // }; 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React - The Complete Guide (incl Hooks, React Router, Redux) 2 | Course files for the React Course by Maximilian Schwarzmüller 3 | --------------------------------------------------------------------------------