├── .gitignore ├── 01-fundamentals ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── images │ │ └── book-1.jpg │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── Book.js │ ├── books.js │ ├── images │ ├── book-1.jpg │ ├── book-2.jpg │ └── book-3.jpg │ ├── index.css │ └── index.js ├── 02-backroads-project ├── backroads-html │ ├── css │ │ └── styles.css │ ├── images │ │ ├── about.jpeg │ │ ├── favicon.ico │ │ ├── logo.svg │ │ ├── main.jpeg │ │ ├── tour-1.jpeg │ │ ├── tour-2.jpeg │ │ ├── tour-3.jpeg │ │ ├── tour-4.jpeg │ │ ├── tour-5.jpeg │ │ └── tour-6.jpeg │ ├── index.html │ └── js │ │ └── app.js └── final │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── components │ ├── About.js │ ├── Footer.js │ ├── Hero.js │ ├── Navbar.js │ ├── PageLink.js │ ├── PageLinks.js │ ├── Service.js │ ├── Services.js │ ├── SocialLink.js │ ├── Title.js │ ├── Tour.js │ └── Tours.js │ ├── data.js │ ├── images │ ├── about.jpeg │ ├── logo.svg │ ├── main.jpeg │ ├── tour-1.jpeg │ ├── tour-2.jpeg │ ├── tour-3.jpeg │ ├── tour-4.jpeg │ ├── tour-5.jpeg │ └── tour-6.jpeg │ ├── index.css │ └── index.js ├── 03-advanced-react ├── .gitignore ├── README.md ├── TUTORIAL.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── assets │ │ └── default-avatar.svg │ ├── data.js │ ├── index.css │ ├── main.jsx │ └── tutorial │ │ ├── 01-useState │ │ ├── final │ │ │ ├── 01-error-example.jsx │ │ │ ├── 02-useState-basics.jsx │ │ │ ├── 03-useState-array.jsx │ │ │ ├── 04-useState-object.jsx │ │ │ └── 05-useState-gotcha.jsx │ │ └── starter │ │ │ ├── 01-error-example.jsx │ │ │ ├── 02-useState-basics.jsx │ │ │ ├── 03-useState-array.jsx │ │ │ ├── 04-useState-object.jsx │ │ │ └── 05-useState-gotcha.jsx │ │ ├── 02-useEffect │ │ ├── final │ │ │ ├── 01-code-example.jsx │ │ │ ├── 02-useEffect-basics.jsx │ │ │ ├── 03-multiple-effects.jsx │ │ │ ├── 04-fetch-data.jsx │ │ │ └── 05-cleanup-function.jsx │ │ └── starter │ │ │ ├── 01-code-example.jsx │ │ │ ├── 02-useEffect-basics.jsx │ │ │ ├── 03-multiple-effects.jsx │ │ │ ├── 04-fetch-data.jsx │ │ │ └── 05-cleanup-function.jsx │ │ ├── 03-conditional-rendering │ │ ├── final │ │ │ ├── 01-multiple-returns-basics.jsx │ │ │ ├── 02-multiple-returns-fetch-data.jsx │ │ │ ├── 03-hooks-rule.jsx │ │ │ ├── 04-short-circuit-overview.jsx │ │ │ ├── 05-short-circuit-examples.jsx │ │ │ ├── 06-toggle-challenge.jsx │ │ │ └── 07-user-challenge.jsx │ │ └── starter │ │ │ ├── 01-multiple-returns-basics.jsx │ │ │ ├── 02-multiple-returns-fetch-data.jsx │ │ │ ├── 03-hooks-rule.jsx │ │ │ ├── 04-short-circuit-overview.jsx │ │ │ ├── 05-short-circuit-examples.jsx │ │ │ ├── 06-toggle-challenge.jsx │ │ │ └── 07-user-challenge.jsx │ │ ├── 04-project-structure │ │ ├── final │ │ │ ├── Example │ │ │ │ ├── FirstComponent.jsx │ │ │ │ ├── SecondComponent.jsx │ │ │ │ └── index.jsx │ │ │ ├── Navbar │ │ │ │ ├── Navbar.css │ │ │ │ ├── Navbar.jsx │ │ │ │ └── index.jsx │ │ │ └── Pages │ │ │ │ ├── About.jsx │ │ │ │ ├── Home.jsx │ │ │ │ └── index.jsx │ │ └── starter │ │ │ └── README.md │ │ ├── 05-leverage-javascript │ │ ├── final │ │ │ ├── List.jsx │ │ │ └── Person.jsx │ │ └── starter │ │ │ └── README.md │ │ ├── 06-forms │ │ ├── final │ │ │ ├── 01-controlled-inputs.jsx │ │ │ ├── 02-user-challenge.jsx │ │ │ ├── 03-multiple-inputs.jsx │ │ │ ├── 04-other-inputs.jsx │ │ │ └── 05-form-data.jsx │ │ └── starter │ │ │ ├── 01-controlled-inputs.jsx │ │ │ ├── 02-user-challenge.jsx │ │ │ ├── 03-multiple-inputs.jsx │ │ │ ├── 04-other-inputs.jsx │ │ │ └── 05-form-data.jsx │ │ ├── 07-useRef │ │ ├── final │ │ │ └── 01-useRef-basics.jsx │ │ └── starter │ │ │ └── 01-useRef-basics.jsx │ │ ├── 08-custom-hooks │ │ ├── final │ │ │ ├── 01-toggle.jsx │ │ │ ├── 02-fetch-data.jsx │ │ │ ├── useFetch.js │ │ │ ├── useFetchPerson.js │ │ │ └── useToggle.js │ │ └── starter │ │ │ ├── 01-toggle.jsx │ │ │ └── 02-fetch-data.jsx │ │ ├── 09-context-api │ │ ├── final │ │ │ ├── context │ │ │ │ ├── NavLinks.jsx │ │ │ │ ├── Navbar.jsx │ │ │ │ └── UserContainer.jsx │ │ │ └── prop-drilling │ │ │ │ ├── NavLinks.jsx │ │ │ │ ├── Navbar.jsx │ │ │ │ └── UserContainer.jsx │ │ └── starter │ │ │ └── README.md │ │ ├── 10-useReducer │ │ ├── final │ │ │ ├── 01-useReducer.jsx │ │ │ ├── actions.js │ │ │ └── reducer.js │ │ └── starter │ │ │ └── 01-useReducer.jsx │ │ └── 11-performance │ │ ├── final │ │ ├── 01-lower-state │ │ │ ├── Counter.jsx │ │ │ ├── List.jsx │ │ │ ├── Person.jsx │ │ │ └── index.jsx │ │ ├── 02-lower-state-challenge │ │ │ ├── Form.jsx │ │ │ ├── List.jsx │ │ │ ├── Person.jsx │ │ │ └── index.jsx │ │ ├── 03-hooks │ │ │ ├── List.jsx │ │ │ ├── Person.jsx │ │ │ ├── index.jsx │ │ │ └── slowFunction.js │ │ └── 04-react-18 │ │ │ ├── SlowComponent.jsx │ │ │ └── index.jsx │ │ └── starter │ │ ├── 01-lower-state │ │ ├── List.jsx │ │ ├── Person.jsx │ │ └── index.jsx │ │ ├── 02-lower-state-challenge │ │ ├── List.jsx │ │ ├── Person.jsx │ │ └── index.jsx │ │ ├── 03-hooks │ │ ├── List.jsx │ │ ├── Person.jsx │ │ └── index.jsx │ │ └── 04-react-18 │ │ ├── SlowComponent.jsx │ │ └── index.jsx └── vite.config.js ├── 04-fundamental-projects ├── 01-birthday-buddy │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── List.jsx │ │ │ ├── Person.jsx │ │ │ ├── assets │ │ │ │ ├── example.png │ │ │ │ └── react.svg │ │ │ ├── data.js │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ ├── example.png │ │ │ └── react.svg │ │ ├── data.js │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 02-tours │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Loading.jsx │ │ │ ├── Tour.jsx │ │ │ ├── Tours.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 03-reviews │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── Alternative.jsx │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ ├── example.png │ │ │ │ └── react.svg │ │ │ ├── data.js │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ ├── example.png │ │ │ └── react.svg │ │ ├── data.js │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 04-accordion │ ├── final-alternative │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Questions.jsx │ │ │ ├── SingleQuestion.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── data.js │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Questions.jsx │ │ │ ├── SingleQuestion.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── data.js │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── data.js │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 05-menu │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ ├── images │ │ │ │ ├── item-1.jpeg │ │ │ │ ├── item-10.jpeg │ │ │ │ ├── item-2.jpeg │ │ │ │ ├── item-3.jpeg │ │ │ │ ├── item-4.jpeg │ │ │ │ ├── item-5.jpeg │ │ │ │ ├── item-6.jpeg │ │ │ │ ├── item-7.jpeg │ │ │ │ ├── item-8.jpeg │ │ │ │ └── item-9.jpeg │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Categories.jsx │ │ │ ├── Menu.jsx │ │ │ ├── MenuItem.jsx │ │ │ ├── Title.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── data.js │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ ├── images │ │ │ ├── item-1.jpeg │ │ │ ├── item-10.jpeg │ │ │ ├── item-2.jpeg │ │ │ ├── item-3.jpeg │ │ │ ├── item-4.jpeg │ │ │ ├── item-5.jpeg │ │ │ ├── item-6.jpeg │ │ │ ├── item-7.jpeg │ │ │ ├── item-8.jpeg │ │ │ └── item-9.jpeg │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── data.js │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 06-tabs │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── BtnContainer.jsx │ │ │ ├── Duties.jsx │ │ │ ├── JobInfo.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 07-slider │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Carousel.jsx │ │ │ ├── SlickCarousel.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── data.js │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── data.js │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 08-lorem-ipsum │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── data.js │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── data.js │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 09-color-generator │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── ColorList.jsx │ │ │ ├── Form.jsx │ │ │ ├── SingleColor.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 10-grocery-bud │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Form.jsx │ │ │ ├── Items.jsx │ │ │ ├── SingleItem.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 11-navbar │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Navbar.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── data.jsx │ │ │ ├── index.css │ │ │ ├── logo.svg │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── data.jsx │ │ ├── index.css │ │ ├── logo.svg │ │ └── main.jsx │ │ └── vite.config.js ├── 12-sidebar │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Home.jsx │ │ │ ├── Modal.jsx │ │ │ ├── Sidebar.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── context.jsx │ │ │ ├── data.jsx │ │ │ ├── index.css │ │ │ ├── logo.svg │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── data.jsx │ │ ├── index.css │ │ ├── logo.svg │ │ └── main.jsx │ │ └── vite.config.js ├── 13-strapi-submenus │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── Context.jsx │ │ │ ├── Hero.jsx │ │ │ ├── NavLinks.jsx │ │ │ ├── Navbar.jsx │ │ │ ├── Sidebar.jsx │ │ │ ├── Submenu.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── data.jsx │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── data.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── 14-cart │ ├── final │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── CartContainer.jsx │ │ │ ├── CartItem.jsx │ │ │ ├── Navbar.jsx │ │ │ ├── actions.js │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── context.jsx │ │ │ ├── data.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ ├── reducer.js │ │ │ └── utils.js │ │ └── vite.config.js │ └── starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.jsx │ │ ├── CartContainer.jsx │ │ ├── CartItem.jsx │ │ ├── Navbar.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── data.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js └── README.md ├── 05-axios-tutorial ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── components │ └── Title.js │ ├── examples │ ├── 1-first-request.js │ ├── 2-headers.js │ ├── 3-post-request.js │ ├── 4-global-instance.js │ ├── 5-custom-instance.js │ └── 6-interceptors.js │ ├── final │ ├── axios │ │ ├── custom.js │ │ ├── global.js │ │ └── interceptors.js │ ├── components │ │ └── Title.js │ └── examples │ │ ├── 1-first-request.js │ │ ├── 2-headers.js │ │ ├── 3-post-request.js │ │ ├── 4-global-instance.js │ │ ├── 5-custom-instance.js │ │ └── 6-interceptors.js │ ├── index.css │ └── index.js ├── 06-react-query ├── .gitignore ├── final │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.jsx │ │ ├── Form.jsx │ │ ├── Items.jsx │ │ ├── SingleItem.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.jsx │ │ ├── reactQueryCustomHooks.jsx │ │ └── utils.js │ └── vite.config.js ├── server │ ├── localDataServer.js │ ├── package.json │ ├── server.js │ └── tasks.json └── starter │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.jsx │ ├── Form.jsx │ ├── Items.jsx │ ├── SingleItem.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── 07-unsplash-images ├── final │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.jsx │ │ ├── Gallery.jsx │ │ ├── SearchForm.jsx │ │ ├── ThemeToggle.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── context.jsx │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js └── starter │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── 08-contentful-cms ├── final │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.jsx │ │ ├── Hero.jsx │ │ ├── Projects.jsx │ │ ├── assets │ │ │ ├── birthday.png │ │ │ ├── hero.svg │ │ │ ├── questions.png │ │ │ ├── react.svg │ │ │ ├── reviews.png │ │ │ └── tours.png │ │ ├── data.js │ │ ├── fetchProjects.jsx │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js └── starter │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.jsx │ ├── assets │ │ ├── birthday.png │ │ ├── hero.svg │ │ ├── questions.png │ │ ├── react.svg │ │ ├── reviews.png │ │ └── tours.png │ ├── data.js │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── 09-mixmaster ├── final │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ ├── _redirects │ │ └── vite.svg │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ ├── not-found.svg │ │ │ ├── react.svg │ │ │ └── wrappers │ │ │ │ ├── AboutPage.js │ │ │ │ ├── CocktailCard.js │ │ │ │ ├── CocktailList.js │ │ │ │ ├── CocktailPage.js │ │ │ │ ├── ErrorPage.js │ │ │ │ ├── Navbar.js │ │ │ │ └── SearchForm.js │ │ ├── components │ │ │ ├── CocktailCard.jsx │ │ │ ├── CocktailList.jsx │ │ │ ├── Navbar.jsx │ │ │ └── SearchForm.jsx │ │ ├── index.css │ │ ├── main.jsx │ │ └── pages │ │ │ ├── About.jsx │ │ │ ├── Cocktail.jsx │ │ │ ├── Error.jsx │ │ │ ├── HomeLayout.jsx │ │ │ ├── Landing.jsx │ │ │ ├── Newsletter.jsx │ │ │ ├── SinglePageError.jsx │ │ │ └── index.js │ └── vite.config.js └── starter │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ ├── _redirects │ └── vite.svg │ ├── src │ ├── App.jsx │ ├── assets │ │ ├── not-found.svg │ │ ├── react.svg │ │ └── wrappers │ │ │ ├── AboutPage.js │ │ │ ├── CocktailCard.js │ │ │ ├── CocktailList.js │ │ │ ├── CocktailPage.js │ │ │ ├── ErrorPage.js │ │ │ ├── Navbar.js │ │ │ └── SearchForm.js │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── 10-tailwind-portfolio ├── final │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ ├── about.svg │ │ │ ├── hero.svg │ │ │ └── react.svg │ │ ├── components │ │ │ ├── About.jsx │ │ │ ├── Hero.jsx │ │ │ ├── Navbar.jsx │ │ │ ├── Projects.jsx │ │ │ ├── ProjectsCard.jsx │ │ │ ├── SectionTitle.jsx │ │ │ ├── Skills.jsx │ │ │ └── SkillsCard.jsx │ │ ├── data.jsx │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.cjs │ └── vite.config.js └── project-assets │ ├── README.md │ ├── about.svg │ ├── data.jsx │ └── hero.svg ├── 11-redux-toolkit-tutorial ├── README.md ├── final │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── cartItems.js │ │ ├── components │ │ ├── CartContainer.js │ │ ├── CartItem.js │ │ ├── Modal.js │ │ └── Navbar.js │ │ ├── features │ │ ├── cart │ │ │ └── cartSlice.js │ │ └── modal │ │ │ └── modalSlice.js │ │ ├── icons.js │ │ ├── index.css │ │ ├── index.js │ │ └── store.js ├── starter │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── cartItems.js │ │ ├── icons.js │ │ ├── index.css │ │ └── index.js ├── vite-final │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── cartItems.js │ │ ├── components │ │ │ ├── CartContainer.jsx │ │ │ ├── CartItem.jsx │ │ │ ├── Modal.jsx │ │ │ └── Navbar.jsx │ │ ├── features │ │ │ ├── cart │ │ │ │ └── cartSlice.js │ │ │ └── modal │ │ │ │ └── modalSlice.js │ │ ├── icons.jsx │ │ ├── index.css │ │ ├── main.jsx │ │ └── store.js │ └── vite.config.js └── vite-starter │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── cartItems.js │ ├── icons.jsx │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── 12-comfy-store ├── final │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.jsx │ │ ├── assets │ │ │ ├── hero1.webp │ │ │ ├── hero2.webp │ │ │ ├── hero3.webp │ │ │ ├── hero4.webp │ │ │ └── react.svg │ │ ├── components │ │ │ ├── CartItem.jsx │ │ │ ├── CartItemsList.jsx │ │ │ ├── CartTotals.jsx │ │ │ ├── CheckoutForm.jsx │ │ │ ├── ComplexPaginationContainer.jsx │ │ │ ├── ErrorElement.jsx │ │ │ ├── FeaturedProducts.jsx │ │ │ ├── Filters.jsx │ │ │ ├── FormCheckbox.jsx │ │ │ ├── FormInput.jsx │ │ │ ├── FormRange.jsx │ │ │ ├── FormSelect.jsx │ │ │ ├── Header.jsx │ │ │ ├── Hero.jsx │ │ │ ├── Loading.jsx │ │ │ ├── NavLinks.jsx │ │ │ ├── Navbar.jsx │ │ │ ├── OrdersList.jsx │ │ │ ├── PaginationContainer.jsx │ │ │ ├── ProductsContainer.jsx │ │ │ ├── ProductsGrid.jsx │ │ │ ├── ProductsList.jsx │ │ │ ├── SectionTitle.jsx │ │ │ ├── SubmitBtn.jsx │ │ │ └── index.js │ │ ├── features │ │ │ ├── cart │ │ │ │ └── cartSlice.js │ │ │ └── user │ │ │ │ └── userSlice.js │ │ ├── index.css │ │ ├── main.jsx │ │ ├── pages │ │ │ ├── About.jsx │ │ │ ├── Cart.jsx │ │ │ ├── Checkout.jsx │ │ │ ├── Error.jsx │ │ │ ├── HomeLayout.jsx │ │ │ ├── Landing.jsx │ │ │ ├── Login.jsx │ │ │ ├── Orders.jsx │ │ │ ├── Products.jsx │ │ │ ├── Register.jsx │ │ │ ├── SingleProduct.jsx │ │ │ └── index.js │ │ ├── store.js │ │ └── utils │ │ │ └── index.jsx │ ├── tailwind.config.cjs │ └── vite.config.js └── project-assets │ ├── README.md │ ├── hero1.webp │ ├── hero2.webp │ ├── hero3.webp │ └── hero4.webp ├── 13-typescript-tutorial ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── counter.ts │ ├── main.ts │ ├── style.css │ ├── tasks.css │ ├── tasks.ts │ ├── tutorial.ts │ ├── types.ts │ ├── typescript.svg │ └── vite-env.d.ts ├── tasks.html └── tsconfig.json ├── 14-typescript-react-essentials ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── final │ │ ├── 01-return │ │ │ └── index.tsx │ │ ├── 02-props │ │ │ └── index.tsx │ │ ├── 03-state │ │ │ └── index.tsx │ │ ├── 04-events │ │ │ └── index.tsx │ │ ├── 05-challenge │ │ │ └── index.tsx │ │ ├── 06-context │ │ │ ├── basic-context.tsx │ │ │ ├── basic-index.tsx │ │ │ ├── context.tsx │ │ │ └── index.tsx │ │ ├── 07-reducers │ │ │ ├── index.tsx │ │ │ └── reducer.ts │ │ ├── 08-fetch-data │ │ │ ├── index-fetch.tsx │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ ├── 09-rtk │ │ │ ├── counterSlice.ts │ │ │ └── index.tsx │ │ └── 10-tasks │ │ │ ├── Form.tsx │ │ │ ├── List.tsx │ │ │ ├── index.tsx │ │ │ └── types.ts │ ├── hooks.ts │ ├── index.css │ ├── main.tsx │ ├── starter │ │ ├── 01-return │ │ │ └── index.tsx │ │ ├── 02-props │ │ │ └── index.tsx │ │ ├── 03-state │ │ │ └── index.tsx │ │ ├── 04-events │ │ │ └── index.tsx │ │ ├── 05-challenge │ │ │ └── index.tsx │ │ ├── 06-context │ │ │ └── index.tsx │ │ ├── 07-reducers │ │ │ └── index.tsx │ │ ├── 08-fetch-data │ │ │ └── index.tsx │ │ ├── 09-rtk │ │ │ └── index.tsx │ │ └── 10-tasks │ │ │ └── index.tsx │ ├── store.ts │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── 15-nextjs-tutorial ├── .eslintrc.json ├── .gitignore ├── README.md ├── app │ ├── (dashboard) │ │ └── auth │ │ │ └── [[...sign-in]] │ │ │ └── page.tsx │ ├── about │ │ └── page.tsx │ ├── actions │ │ └── page.tsx │ ├── api │ │ └── users │ │ │ └── route.ts │ ├── counter │ │ └── page.tsx │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── tours │ │ ├── [id] │ │ └── page.tsx │ │ ├── error.tsx │ │ ├── layout.tsx │ │ ├── loading.tsx │ │ └── page.tsx ├── components │ ├── Counter.tsx │ ├── DeleteButton.tsx │ ├── Form.tsx │ ├── Navbar.tsx │ └── UsersList.tsx ├── images │ └── maps.jpg ├── next.config.mjs ├── package.json ├── postcss.config.js ├── public │ ├── next.svg │ └── vercel.svg ├── tailwind.config.ts ├── tsconfig.json ├── users.json └── utils │ └── actions.ts ├── 16-nextjs-store ├── .eslintrc.json ├── .gitignore ├── README.md ├── app │ ├── about │ │ └── page.tsx │ ├── admin │ │ ├── Sidebar.tsx │ │ ├── layout.tsx │ │ ├── products │ │ │ ├── [id] │ │ │ │ └── edit │ │ │ │ │ └── page.tsx │ │ │ ├── create │ │ │ │ └── page.tsx │ │ │ ├── loading.tsx │ │ │ └── page.tsx │ │ └── sales │ │ │ ├── loading.tsx │ │ │ └── page.tsx │ ├── api │ │ ├── confirm │ │ │ └── route.ts │ │ └── payment │ │ │ └── route.ts │ ├── cart │ │ └── page.tsx │ ├── checkout │ │ └── page.tsx │ ├── favicon.ico │ ├── favorites │ │ ├── loading.tsx │ │ └── page.tsx │ ├── globals.css │ ├── layout.tsx │ ├── orders │ │ ├── loading.tsx │ │ └── page.tsx │ ├── page.tsx │ ├── products │ │ ├── [id] │ │ │ └── page.tsx │ │ ├── loading.tsx │ │ └── page.tsx │ ├── providers.tsx │ ├── reviews │ │ ├── loading.tsx │ │ └── page.tsx │ └── theme-provider.tsx ├── components.json ├── components │ ├── cart │ │ ├── CartItemColumns.tsx │ │ ├── CartItemsList.tsx │ │ ├── CartTotals.tsx │ │ └── ThirdColumn.tsx │ ├── form │ │ ├── Buttons.tsx │ │ ├── CheckboxInput.tsx │ │ ├── FormContainer.tsx │ │ ├── FormInput.tsx │ │ ├── ImageInput.tsx │ │ ├── ImageInputContainer.tsx │ │ ├── PriceInput.tsx │ │ └── TextAreaInput.tsx │ ├── global │ │ ├── Container.tsx │ │ ├── EmptyList.tsx │ │ ├── LoadingContainer.tsx │ │ ├── LoadingTable.tsx │ │ └── SectionTitle.tsx │ ├── home │ │ ├── FeaturedProducts.tsx │ │ ├── Hero.tsx │ │ └── HeroCarousel.tsx │ ├── navbar │ │ ├── CartButton.tsx │ │ ├── DarkMode.tsx │ │ ├── LinksDropdown.tsx │ │ ├── Logo.tsx │ │ ├── NavSearch.tsx │ │ ├── Navbar.tsx │ │ ├── SignOutLink.tsx │ │ └── UserIcon.tsx │ ├── products │ │ ├── FavoriteToggleButton.tsx │ │ ├── FavoriteToggleForm.tsx │ │ ├── ProductsContainer.tsx │ │ ├── ProductsGrid.tsx │ │ └── ProductsList.tsx │ ├── reviews │ │ ├── Comment.tsx │ │ ├── ProductReviews.tsx │ │ ├── Rating.tsx │ │ ├── RatingInput.tsx │ │ ├── ReviewCard.tsx │ │ └── SubmitReview.tsx │ ├── single-product │ │ ├── AddToCart.tsx │ │ ├── BreadCrumbs.tsx │ │ ├── ProductRating.tsx │ │ ├── SelectProductAmount.tsx │ │ └── ShareButton.tsx │ └── ui │ │ ├── breadcrumb.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── carousel.tsx │ │ ├── checkbox.tsx │ │ ├── dropdown-menu.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── popover.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── skeleton.tsx │ │ ├── table.tsx │ │ ├── textarea.tsx │ │ ├── toast.tsx │ │ ├── toaster.tsx │ │ └── use-toast.ts ├── lib │ └── utils.ts ├── middleware.ts ├── next.config.mjs ├── package.json ├── postcss.config.mjs ├── prisma │ ├── products.json │ ├── schema.prisma │ └── seed.js ├── public │ ├── images │ │ ├── hero1.jpg │ │ ├── hero2.jpg │ │ ├── hero3.jpg │ │ ├── hero4.jpg │ │ ├── product-1.jpg │ │ ├── product-2.jpg │ │ ├── product-3.jpg │ │ ├── product-4.jpg │ │ └── product-big.jpg │ ├── next.svg │ └── vercel.svg ├── tailwind.config.ts ├── tsconfig.json └── utils │ ├── actions.ts │ ├── db.ts │ ├── format.ts │ ├── links.ts │ ├── schemas.ts │ ├── supabase.ts │ └── types.ts ├── 17-starter-store ├── .eslintrc.json ├── .gitignore ├── README.md ├── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── components.json ├── components │ └── ui │ │ ├── breadcrumb.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── carousel.tsx │ │ ├── checkbox.tsx │ │ ├── dropdown-menu.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── popover.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── skeleton.tsx │ │ ├── table.tsx │ │ ├── textarea.tsx │ │ ├── toast.tsx │ │ ├── toaster.tsx │ │ └── use-toast.ts ├── lib │ └── utils.ts ├── next.config.mjs ├── package.json ├── postcss.config.mjs ├── public │ ├── images │ │ ├── hero1.jpg │ │ ├── hero2.jpg │ │ ├── hero3.jpg │ │ ├── hero4.jpg │ │ ├── product-1.jpg │ │ ├── product-2.jpg │ │ ├── product-3.jpg │ │ ├── product-4.jpg │ │ └── product-big.jpg │ ├── next.svg │ └── vercel.svg ├── tailwind.config.ts └── tsconfig.json ├── 18-nextjs-jobify-app ├── .eslintrc.json ├── .gitignore ├── README.md ├── app │ ├── (dashboard) │ │ ├── add-job │ │ │ └── page.tsx │ │ ├── jobs │ │ │ ├── [id] │ │ │ │ └── page.tsx │ │ │ ├── loading.tsx │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ └── stats │ │ │ ├── loading.tsx │ │ │ └── page.tsx │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── providers.tsx ├── assets │ ├── README.md │ ├── favicon.ico │ ├── logo.svg │ ├── main.svg │ └── mock-data.json ├── components.json ├── components │ ├── ButtonContainer.tsx │ ├── ChartsContainer.tsx │ ├── ComplexButtonContainer.tsx │ ├── CreateJobForm.tsx │ ├── DeleteJobButton.tsx │ ├── EditJobForm.tsx │ ├── Example.tsx │ ├── FormComponents.tsx │ ├── JobCard.tsx │ ├── JobInfo.tsx │ ├── JobsList.tsx │ ├── LinksDropdown.tsx │ ├── Navbar.tsx │ ├── SearchForm.tsx │ ├── Sidebar.tsx │ ├── StatsCard.tsx │ ├── StatsContainer.tsx │ ├── ThemeToggle.tsx │ ├── theme-provider.tsx │ └── ui │ │ ├── badge.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── dropdown-menu.tsx │ │ ├── form.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── pagination.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── skeleton.tsx │ │ ├── toast.tsx │ │ ├── toaster.tsx │ │ └── use-toast.ts ├── lib │ └── utils.ts ├── middleware.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── prisma │ ├── mock-data.json │ ├── schema.prisma │ └── seed.js ├── public │ ├── next.svg │ └── vercel.svg ├── tailwind.config.js ├── tailwind.config.ts ├── tsconfig.json └── utils │ ├── actions.ts │ ├── db.ts │ ├── links.tsx │ └── types.ts ├── 19-starter-jobify ├── .eslintrc.json ├── .gitignore ├── README.md ├── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── assets │ ├── README.md │ ├── favicon.ico │ ├── logo.svg │ ├── main.svg │ └── mock-data.json ├── components.json ├── components │ └── ui │ │ ├── badge.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── dropdown-menu.tsx │ │ ├── form.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── pagination.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── skeleton.tsx │ │ ├── toast.tsx │ │ ├── toaster.tsx │ │ └── use-toast.ts ├── lib │ └── utils.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── public │ ├── next.svg │ └── vercel.svg ├── tailwind.config.js ├── tailwind.config.ts └── tsconfig.json ├── README.md └── w-assets └── global-context-example ├── .gitignore ├── index.html ├── package.json ├── public └── vite.svg ├── src ├── App.css ├── App.jsx ├── assets │ └── react.svg ├── context.jsx ├── index.css └── main.jsx └── vite.config.js /.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 | **/package-lock.json 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 | -------------------------------------------------------------------------------- /01-fundamentals/.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 | -------------------------------------------------------------------------------- /01-fundamentals/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/01-fundamentals/public/favicon.ico -------------------------------------------------------------------------------- /01-fundamentals/public/images/book-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/01-fundamentals/public/images/book-1.jpg -------------------------------------------------------------------------------- /01-fundamentals/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/01-fundamentals/public/logo192.png -------------------------------------------------------------------------------- /01-fundamentals/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/01-fundamentals/public/logo512.png -------------------------------------------------------------------------------- /01-fundamentals/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /01-fundamentals/src/Book.js: -------------------------------------------------------------------------------- 1 | const Book = (props) => { 2 | const { img, title, author } = props; 3 | 4 | return ( 5 |
6 | {title} 7 |

{title}

8 | 9 |

{author}

10 |
11 | ); 12 | }; 13 | 14 | export default Book; 15 | -------------------------------------------------------------------------------- /01-fundamentals/src/images/book-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/01-fundamentals/src/images/book-1.jpg -------------------------------------------------------------------------------- /01-fundamentals/src/images/book-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/01-fundamentals/src/images/book-2.jpg -------------------------------------------------------------------------------- /01-fundamentals/src/images/book-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/01-fundamentals/src/images/book-3.jpg -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/about.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/about.jpeg -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/favicon.ico -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/main.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/main.jpeg -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/tour-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/tour-1.jpeg -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/tour-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/tour-2.jpeg -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/tour-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/tour-3.jpeg -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/tour-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/tour-4.jpeg -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/tour-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/tour-5.jpeg -------------------------------------------------------------------------------- /02-backroads-project/backroads-html/images/tour-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/backroads-html/images/tour-6.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/.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 | -------------------------------------------------------------------------------- /02-backroads-project/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/public/favicon.ico -------------------------------------------------------------------------------- /02-backroads-project/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/public/logo192.png -------------------------------------------------------------------------------- /02-backroads-project/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/public/logo512.png -------------------------------------------------------------------------------- /02-backroads-project/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /02-backroads-project/final/src/components/PageLink.js: -------------------------------------------------------------------------------- 1 | const PageLink = ({ link, itemClass }) => { 2 | return ( 3 |
  • 4 | 5 | {link.text} 6 | 7 |
    • 8 | ) 9 | } 10 | export default PageLink 11 | -------------------------------------------------------------------------------- /02-backroads-project/final/src/components/PageLinks.js: -------------------------------------------------------------------------------- 1 | import { pageLinks } from '../data' 2 | import PageLink from './PageLink' 3 | const PageLinks = ({ parentClass, itemClass }) => { 4 | return ( 5 | 10 | ) 11 | } 12 | export default PageLinks 13 | -------------------------------------------------------------------------------- /02-backroads-project/final/src/components/Service.js: -------------------------------------------------------------------------------- 1 | const Service = ({ icon, title, text }) => { 2 | return ( 3 |
    4 | 5 | 6 | 7 |
    8 |

    {title}

    9 |

    {text}

    10 |
    11 |
    12 | ) 13 | } 14 | export default Service 15 | -------------------------------------------------------------------------------- /02-backroads-project/final/src/components/SocialLink.js: -------------------------------------------------------------------------------- 1 | const SocialLink = ({ itemClass, href, icon }) => { 2 | return ( 3 |
  • 4 | 5 | 6 | 7 |
    • 8 | ) 9 | } 10 | export default SocialLink 11 | -------------------------------------------------------------------------------- /02-backroads-project/final/src/components/Title.js: -------------------------------------------------------------------------------- 1 | const Title = ({ title, subTitle }) => { 2 | return ( 3 |
    4 |

    5 | {title} {subTitle} 6 |

    7 |
    8 | ); 9 | }; 10 | export default Title; 11 | -------------------------------------------------------------------------------- /02-backroads-project/final/src/components/Tours.js: -------------------------------------------------------------------------------- 1 | import { tours } from '../data' 2 | import Title from './Title' 3 | import Tour from './Tour' 4 | const Tours = () => { 5 | return ( 6 |
    7 | 8 | 9 | <div className='section-center featured-center'> 10 | {tours.map((tour) => { 11 | return <Tour {...tour} key={tour.id} /> 12 | })} 13 | </div> 14 | </section> 15 | ) 16 | } 17 | export default Tours 18 | -------------------------------------------------------------------------------- /02-backroads-project/final/src/images/about.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/src/images/about.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/src/images/main.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/src/images/main.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/src/images/tour-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/src/images/tour-1.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/src/images/tour-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/src/images/tour-2.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/src/images/tour-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/src/images/tour-3.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/src/images/tour-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/src/images/tour-4.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/src/images/tour-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/src/images/tour-5.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/src/images/tour-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/02-backroads-project/final/src/images/tour-6.jpeg -------------------------------------------------------------------------------- /02-backroads-project/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import './index.css' 4 | 5 | import App from './App' 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')) 8 | root.render( 9 | <React.StrictMode> 10 | <App /> 11 | </React.StrictMode> 12 | ) 13 | -------------------------------------------------------------------------------- /03-advanced-react/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /03-advanced-react/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="UTF-8" /> 5 | <link rel="icon" type="image/svg+xml" href="/vite.svg" /> 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 | <title>Advanced Topics 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /03-advanced-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "advanced-topics", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.26", 17 | "@types/react-dom": "^18.0.9", 18 | "@vitejs/plugin-react": "^3.0.0", 19 | "vite": "^4.0.0" 20 | } 21 | } -------------------------------------------------------------------------------- /03-advanced-react/src/App.jsx: -------------------------------------------------------------------------------- 1 | function App() { 2 | return ( 3 |
    4 |

    Advanced React

    5 |
    6 | ); 7 | } 8 | 9 | export default App; 10 | -------------------------------------------------------------------------------- /03-advanced-react/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/01-useState/final/01-error-example.jsx: -------------------------------------------------------------------------------- 1 | const ErrorExample = () => { 2 | let count = 0; 3 | 4 | const handleClick = () => { 5 | count = count + 1; 6 | console.log(count); 7 | }; 8 | return ( 9 |
    10 |

    {count}

    11 | 14 |
    15 | ); 16 | }; 17 | 18 | export default ErrorExample; 19 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/01-useState/starter/01-error-example.jsx: -------------------------------------------------------------------------------- 1 | const ErrorExample = () => { 2 | return

    useState error example

    ; 3 | }; 4 | 5 | export default ErrorExample; 6 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/01-useState/starter/02-useState-basics.jsx: -------------------------------------------------------------------------------- 1 | const UseStateBasics = () => { 2 | return

    useState basics

    ; 3 | }; 4 | 5 | export default UseStateBasics; 6 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/01-useState/starter/03-useState-array.jsx: -------------------------------------------------------------------------------- 1 | const UseStateArray = () => { 2 | return

    useState array example

    ; 3 | }; 4 | 5 | export default UseStateArray; 6 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/01-useState/starter/04-useState-object.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const UseStateObject = () => { 4 | return

    useState object example

    ; 5 | }; 6 | 7 | export default UseStateObject; 8 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/01-useState/starter/05-useState-gotcha.jsx: -------------------------------------------------------------------------------- 1 | const UseStateGotcha = () => { 2 | return

    useState "gotcha"

    ; 3 | }; 4 | 5 | export default UseStateGotcha; 6 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/02-useEffect/starter/01-code-example.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const CodeExample = () => { 4 | const [value, setValue] = useState(0); 5 | 6 | return ( 7 |
    8 |

    value : {value}

    9 | 12 |
    13 | ); 14 | }; 15 | export default CodeExample; 16 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/02-useEffect/starter/04-fetch-data.jsx: -------------------------------------------------------------------------------- 1 | const url = 'https://api.github.com/users'; 2 | 3 | const FetchData = () => { 4 | return

    fetch data example

    ; 5 | }; 6 | export default FetchData; 7 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/02-useEffect/starter/05-cleanup-function.jsx: -------------------------------------------------------------------------------- 1 | const CleanupFunction = () => { 2 | return

    cleanup function

    ; 3 | }; 4 | 5 | export default CleanupFunction; 6 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/03-conditional-rendering/starter/01-multiple-returns-basics.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | const MultipleReturnsBasics = () => { 4 | return

    Multiple Returns Basics

    ; 5 | }; 6 | export default MultipleReturnsBasics; 7 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/03-conditional-rendering/starter/02-multiple-returns-fetch-data.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | const url = 'https://api.github.com/users/QuincyLarson'; 3 | 4 | const MultipleReturnsFetchData = () => { 5 | return

    Fetch Data

    ; 6 | }; 7 | export default MultipleReturnsFetchData; 8 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/03-conditional-rendering/starter/04-short-circuit-overview.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const ShortCircuitOverview = () => { 4 | return

    short circuit overview

    ; 5 | }; 6 | export default ShortCircuitOverview; 7 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/03-conditional-rendering/starter/05-short-circuit-examples.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const ShortCircuitExamples = () => { 4 | // falsy 5 | const [text, setText] = useState(''); 6 | // truthy 7 | const [name, setName] = useState('susan'); 8 | const [user, setUser] = useState({ name: 'john' }); 9 | const [isEditing, setIsEditing] = useState(false); 10 | 11 | return

    short circuit - examples

    ; 12 | }; 13 | 14 | export default ShortCircuitExamples; 15 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/03-conditional-rendering/starter/06-toggle-challenge.jsx: -------------------------------------------------------------------------------- 1 | const ToggleChallenge = () => { 2 | return

    toggle challenge

    ; 3 | }; 4 | 5 | export default ToggleChallenge; 6 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/03-conditional-rendering/starter/07-user-challenge.jsx: -------------------------------------------------------------------------------- 1 | const UserChallenge = () => { 2 | return

    user challenge

    ; 3 | }; 4 | 5 | export default UserChallenge; 6 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Example/FirstComponent.jsx: -------------------------------------------------------------------------------- 1 | const FirstComponent = () => { 2 | return
    FirstComponent
    ; 3 | }; 4 | export default FirstComponent; 5 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Example/SecondComponent.jsx: -------------------------------------------------------------------------------- 1 | const SecondComponent = () => { 2 | return
    SecondComponent
    ; 3 | }; 4 | export default SecondComponent; 5 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Example/index.jsx: -------------------------------------------------------------------------------- 1 | import FirstComponent from './FirstComponent'; 2 | import SecondComponent from './SecondComponent'; 3 | 4 | const Example = () => { 5 | return ( 6 |
    7 | 8 | 9 |
    10 | ); 11 | }; 12 | export default Example; 13 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | background: blue; 3 | color: white; 4 | } 5 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import './Navbar.css'; 2 | const Navbar = () => { 3 | return ( 4 |
    5 |

    navbar component

    6 |
    7 | ); 8 | }; 9 | export default Navbar; 10 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Navbar/index.jsx: -------------------------------------------------------------------------------- 1 | export { default } from './Navbar'; 2 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Pages/About.jsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return
    About Page
    ; 3 | }; 4 | export default About; 5 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Pages/Home.jsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
    Home Page
    ; 3 | }; 4 | export default Home; 5 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/final/Pages/index.jsx: -------------------------------------------------------------------------------- 1 | import Home from './Home'; 2 | import About from './About'; 3 | 4 | export { Home, About }; 5 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/04-project-structure/starter/README.md: -------------------------------------------------------------------------------- 1 | In this section, we will create all files and folders from scratch. 2 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/05-leverage-javascript/final/List.jsx: -------------------------------------------------------------------------------- 1 | import { people } from '../../../data'; 2 | import Person from './Person'; 3 | const List = () => { 4 | return ( 5 |
    6 | {people.map((person) => { 7 | return ; 8 | })} 9 |
    10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/05-leverage-javascript/starter/README.md: -------------------------------------------------------------------------------- 1 | In this section, we will create all files from scratch. 2 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/06-forms/starter/01-controlled-inputs.jsx: -------------------------------------------------------------------------------- 1 | const ControlledInputs = () => { 2 | return

    Controlled Inputs

    ; 3 | }; 4 | export default ControlledInputs; 5 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/08-custom-hooks/final/01-toggle.jsx: -------------------------------------------------------------------------------- 1 | import useToggle from './useToggle'; 2 | 3 | const ToggleExample = () => { 4 | const { show, toggle } = useToggle(true); 5 | return ( 6 |
    7 |

    toggle custom hook

    8 | 11 | {show &&

    some stuff

    } 12 |
    13 | ); 14 | }; 15 | export default ToggleExample; 16 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/08-custom-hooks/final/useToggle.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const useToggle = (defaultValue) => { 4 | const [show, setShow] = useState(defaultValue); 5 | 6 | const toggle = () => { 7 | setShow(!show); 8 | }; 9 | 10 | return { show, toggle }; 11 | }; 12 | 13 | export default useToggle; 14 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/08-custom-hooks/starter/01-toggle.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const ToggleExample = () => { 4 | const [show, setShow] = useState(false); 5 | return ( 6 |
    7 |

    toggle custom hook

    8 | 11 | {show &&

    some stuff

    } 12 |
    13 | ); 14 | }; 15 | export default ToggleExample; 16 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/09-context-api/final/context/NavLinks.jsx: -------------------------------------------------------------------------------- 1 | import UserContainer from './UserContainer'; 2 | 3 | const NavLinks = () => { 4 | return ( 5 |
    6 | 14 | 15 |
    16 | ); 17 | }; 18 | export default NavLinks; 19 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/09-context-api/final/prop-drilling/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import NavLinks from './NavLinks'; 3 | 4 | const Navbar = () => { 5 | const [user, setUser] = useState({ name: 'bob' }); 6 | const logout = () => { 7 | setUser(null); 8 | }; 9 | return ( 10 | 14 | ); 15 | }; 16 | export default Navbar; 17 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/09-context-api/starter/README.md: -------------------------------------------------------------------------------- 1 | In this section, we will create all files and folders from scratch. 2 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/10-useReducer/final/actions.js: -------------------------------------------------------------------------------- 1 | export const CLEAR_LIST = 'CLEAR_LIST'; 2 | export const RESET_LIST = 'RESET_LIST'; 3 | export const REMOVE_ITEM = 'REMOVE_ITEM'; 4 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/01-lower-state/Counter.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | const Counter = () => { 3 | const [count, setCount] = useState(0); 4 | return ( 5 | 12 | ); 13 | }; 14 | export default Counter; 15 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/01-lower-state/List.jsx: -------------------------------------------------------------------------------- 1 | import Person from './Person'; 2 | 3 | const List = ({ people }) => { 4 | return ( 5 |
    6 | {people.map((person) => { 7 | return ; 8 | })} 9 |
    10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/01-lower-state/Person.jsx: -------------------------------------------------------------------------------- 1 | const Person = ({ name }) => { 2 | console.log('render'); 3 | 4 | return ( 5 |
    6 |

    {name}

    7 |
    8 | ); 9 | }; 10 | export default Person; 11 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/01-lower-state/index.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { data } from '../../../../data'; 3 | import Counter from './Counter'; 4 | import List from './List'; 5 | const LowerState = () => { 6 | const [people, setPeople] = useState(data); 7 | 8 | return ( 9 |
    10 | 11 | 12 |
    13 | ); 14 | }; 15 | export default LowerState; 16 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/02-lower-state-challenge/List.jsx: -------------------------------------------------------------------------------- 1 | import Person from './Person'; 2 | 3 | const List = ({ people }) => { 4 | return ( 5 |
    6 | {people.map((person) => { 7 | return ; 8 | })} 9 |
    10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/02-lower-state-challenge/Person.jsx: -------------------------------------------------------------------------------- 1 | const Person = ({ name }) => { 2 | return ( 3 |
    4 |

    {name}

    5 |
    6 | ); 7 | }; 8 | export default Person; 9 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/03-hooks/List.jsx: -------------------------------------------------------------------------------- 1 | import Item from './Person'; 2 | import { memo } from 'react'; 3 | const List = ({ people, removePerson }) => { 4 | return ( 5 |
    6 | {people.map((person) => { 7 | return ; 8 | })} 9 |
    10 | ); 11 | }; 12 | export default memo(List); 13 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/03-hooks/Person.jsx: -------------------------------------------------------------------------------- 1 | const Person = ({ name, id, removePerson }) => { 2 | return ( 3 |
    4 |

    {name}

    5 | 6 |
    7 | ); 8 | }; 9 | export default Person; 10 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/final/03-hooks/slowFunction.js: -------------------------------------------------------------------------------- 1 | const slowFunction = () => { 2 | let value = 0; 3 | for (let i = 0; i <= 1000000000; i++) { 4 | value += i; 5 | } 6 | return value; 7 | }; 8 | 9 | export default slowFunction; 10 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/starter/01-lower-state/List.jsx: -------------------------------------------------------------------------------- 1 | import Person from './Person'; 2 | 3 | const List = ({ people }) => { 4 | return ( 5 |
    6 | {people.map((person) => { 7 | return ; 8 | })} 9 |
    10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/starter/01-lower-state/Person.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | const Person = ({ name }) => { 4 | console.log('render'); 5 | // useEffect(() => { 6 | // console.log('unfortunately does not fix the issue'); 7 | // }, []); 8 | return ( 9 |
    10 |

    {name}

    11 |
    12 | ); 13 | }; 14 | export default Person; 15 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/starter/02-lower-state-challenge/List.jsx: -------------------------------------------------------------------------------- 1 | import Person from './Person'; 2 | 3 | const List = ({ people }) => { 4 | return ( 5 |
    6 | {people.map((person) => { 7 | return ; 8 | })} 9 |
    10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/starter/02-lower-state-challenge/Person.jsx: -------------------------------------------------------------------------------- 1 | const Person = ({ name }) => { 2 | return ( 3 |
    4 |

    {name}

    5 |
    6 | ); 7 | }; 8 | export default Person; 9 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/starter/03-hooks/List.jsx: -------------------------------------------------------------------------------- 1 | import Item from './Person'; 2 | 3 | const List = ({ people }) => { 4 | return ( 5 |
    6 | {people.map((person) => { 7 | return ; 8 | })} 9 |
    10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /03-advanced-react/src/tutorial/11-performance/starter/03-hooks/Person.jsx: -------------------------------------------------------------------------------- 1 | const Person = ({ name }) => { 2 | return ( 3 |
    4 |

    {name}

    5 |
    6 | ); 7 | }; 8 | export default Person; 9 | -------------------------------------------------------------------------------- /03-advanced-react/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Birthday Buddy 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/final/src/List.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Person from './Person'; 3 | 4 | const List = ({ people }) => { 5 | return ( 6 |
    7 | {people.map((person) => { 8 | return ; 9 | })} 10 |
    11 | ); 12 | }; 13 | 14 | export default List; 15 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/final/src/Person.jsx: -------------------------------------------------------------------------------- 1 | const Person = ({ image, name, age }) => { 2 | return ( 3 |
    4 | {name} 5 |
    6 |

    {name}

    7 |

    {age} years

    8 |
    9 |
    10 | ); 11 | }; 12 | export default Person; 13 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/final/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/01-birthday-buddy/final/src/assets/example.png -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Starter - Birthday Buddy 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Birthday Reminder - Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/starter/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/01-birthday-buddy/starter/src/assets/example.png -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/01-birthday-buddy/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tours 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/final/src/Loading.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Loading = () => { 4 | return
    ; 5 | }; 6 | 7 | export default Loading; 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tours Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const url = 'https://www.course-api.com/react-tours-project'; 2 | 3 | const App = () => { 4 | return

    Tours Starter

    ; 5 | }; 6 | export default App; 7 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/02-tours/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reviews 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/final/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/03-reviews/final/src/assets/example.png -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reviews Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Reviews Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/starter/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/03-reviews/starter/src/assets/example.png -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/03-reviews/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final-alternative/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final-alternative/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Questions 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final-alternative/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final-alternative/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Questions 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import data from './data'; 3 | import Questions from './Questions'; 4 | 5 | function App() { 6 | const [questions, setQuestions] = useState(data); 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final/src/Questions.jsx: -------------------------------------------------------------------------------- 1 | import SingleQuestion from './SingleQuestion'; 2 | 3 | const Questions = ({ questions }) => { 4 | return ( 5 |
    6 |

    Questions

    7 | {questions.map((question) => { 8 | return ( 9 | 10 | ); 11 | })} 12 |
    13 | ); 14 | }; 15 | export default Questions; 16 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Accordion Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Accordion Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/04-accordion/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-1.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-10.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-2.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-3.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-4.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-5.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-6.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-7.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-8.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/public/images/item-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/final/public/images/item-9.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/src/Menu.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MenuItem from './MenuItem'; 3 | 4 | const Menu = ({ items }) => { 5 | return ( 6 |
    7 | {items.map((menuItem) => { 8 | return ; 9 | })} 10 |
    11 | ); 12 | }; 13 | 14 | export default Menu; 15 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/src/MenuItem.jsx: -------------------------------------------------------------------------------- 1 | const MenuItem = ({ img, title, price, desc }) => { 2 | return ( 3 |
    4 | {title} 5 |
    6 |
    7 |
    {title}
    8 | ${price} 9 |
    10 |

    {desc}

    11 |
    12 |
    13 | ); 14 | }; 15 | export default MenuItem; 16 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/src/Title.jsx: -------------------------------------------------------------------------------- 1 | const Title = ({ text }) => { 2 | return ( 3 |
    4 |

    {text}

    5 |
    6 |
    7 | ); 8 | }; 9 | export default Title; 10 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-1.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-10.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-2.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-3.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-4.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-5.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-6.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-7.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-8.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/public/images/item-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/04-fundamental-projects/05-menu/starter/public/images/item-9.jpeg -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Menu Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/05-menu/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabs 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/final/src/JobInfo.jsx: -------------------------------------------------------------------------------- 1 | import Duties from './Duties'; 2 | 3 | const JobInfo = ({ jobs, currentItem }) => { 4 | // alternatives 5 | const { company, dates, duties, title } = jobs[currentItem]; 6 | 7 | return ( 8 |
    9 |

    {title}

    10 | {company} 11 |

    {dates}

    12 | 13 |
    14 | ); 15 | }; 16 | export default JobInfo; 17 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabs Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const url = 'https://www.course-api.com/react-tabs-project'; 2 | 3 | const App = () => { 4 | return

    Tabs Starter

    ; 5 | }; 6 | export default App; 7 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/06-tabs/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Carousel from './Carousel'; 2 | import SlickCarousel from './SlickCarousel'; 3 | 4 | const App = () => { 5 | return ( 6 |
    7 | 8 | {/* */} 9 |
    10 | ); 11 | }; 12 | export default App; 13 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return ( 3 |
    4 |

    Slider Starter

    5 |
    6 | ); 7 | }; 8 | export default App; 9 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/07-slider/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lorem Ipsum 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lorem Ipsum Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Lorem Ipsum Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/08-lorem-ipsum/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Color Generator 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/final/src/ColorList.jsx: -------------------------------------------------------------------------------- 1 | import SingleColor from './SingleColor'; 2 | import { nanoid } from 'nanoid'; 3 | const ColorList = ({ colors }) => { 4 | return ( 5 |
    6 | {colors.map((color, index) => { 7 | return ; 8 | })} 9 |
    10 | ); 11 | }; 12 | export default ColorList; 13 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | import 'react-toastify/dist/ReactToastify.css'; 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Color Generator Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Color Generator Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/09-color-generator/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grocery Bud 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/final/src/Items.jsx: -------------------------------------------------------------------------------- 1 | import SingleItem from './SingleItem'; 2 | 3 | const Items = ({ items, removeItem, editItem }) => { 4 | return ( 5 |
    6 | {items.map((item) => { 7 | return ( 8 | 14 | ); 15 | })} 16 |
    17 | ); 18 | }; 19 | export default Items; 20 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | import 'react-toastify/dist/ReactToastify.css'; 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grocery Bud Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Grocery Bud - Starter

    ; 3 | }; 4 | 5 | export default App; 6 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/10-grocery-bud/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbar 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Navbar from './Navbar'; 2 | const App = () => { 3 | return ( 4 |
    5 | 6 |
    7 | ); 8 | }; 9 | export default App; 10 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbar Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Navbar Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/11-navbar/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Context 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Home from './Home'; 2 | import Modal from './Modal'; 3 | import Sidebar from './Sidebar'; 4 | 5 | const App = () => { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | ); 13 | }; 14 | export default App; 15 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import { AppProvider } from './context'; 5 | import './index.css'; 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Context Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Sidebar Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/12-sidebar/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Strapi Submenus 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Hero from './Hero'; 2 | import Navbar from './Navbar'; 3 | import Sidebar from './Sidebar'; 4 | import Submenu from './Submenu'; 5 | 6 | const App = () => { 7 | return ( 8 |
    9 | 10 | 11 | 12 | 13 |
    14 | ); 15 | }; 16 | export default App; 17 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/final/src/Hero.jsx: -------------------------------------------------------------------------------- 1 | const Hero = () => { 2 | return ( 3 |
    4 |
    5 |

    6 | Manage Any Content
    Anywhere 7 |

    8 |

    9 | Strapi is the leading open-source headless CMS. It’s 100% JavaScript 10 | and fully customizable. 11 |

    12 |
    13 |
    14 | ); 15 | }; 16 | export default Hero; 17 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import { AppProvider } from './Context'; 5 | import './index.css'; 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Strapi Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Strapi Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /04-fundamental-projects/13-strapi-submenus/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cart 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/final/src/actions.js: -------------------------------------------------------------------------------- 1 | export const CLEAR_CART = 'CLEAR_CART'; 2 | export const REMOVE = 'REMOVE'; 3 | export const INCREASE = 'INCREASE'; 4 | export const DECREASE = 'DECREASE'; 5 | export const LOADING = 'LOADING'; 6 | export const DISPLAY_ITEMS = 'DISPLAY_ITEMS'; 7 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import { AppProvider } from './context'; 5 | import './index.css'; 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/final/src/utils.js: -------------------------------------------------------------------------------- 1 | export const getTotals = (cart) => { 2 | let totalAmount = 0; 3 | let totalCost = 0; 4 | 5 | for (let { amount, price } of cart.values()) { 6 | totalAmount += amount; 7 | totalCost += amount * price; 8 | } 9 | return { totalAmount, totalCost }; 10 | }; 11 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cart Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | // components 2 | import Navbar from './Navbar'; 3 | import CartContainer from './CartContainer'; 4 | 5 | function App() { 6 | return ( 7 |
    8 | 9 | 10 |
    11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /04-fundamental-projects/14-cart/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /05-axios-tutorial/.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 | -------------------------------------------------------------------------------- /05-axios-tutorial/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/05-axios-tutorial/public/favicon.ico -------------------------------------------------------------------------------- /05-axios-tutorial/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/05-axios-tutorial/public/logo192.png -------------------------------------------------------------------------------- /05-axios-tutorial/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/05-axios-tutorial/public/logo512.png -------------------------------------------------------------------------------- /05-axios-tutorial/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/App.js: -------------------------------------------------------------------------------- 1 | import Title from './components/Title'; 2 | function App() { 3 | return ( 4 |
    5 | 6 | </main> 7 | ); 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/components/Title.js: -------------------------------------------------------------------------------- 1 | const Title = () => { 2 | return ( 3 | <div className='title'> 4 | <h1> 5 | <span>axios</span> tutorial 6 | </h1> 7 | </div> 8 | ); 9 | }; 10 | export default Title; 11 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/examples/1-first-request.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | // limit, if 429 wait for 15 min and try again 3 | const url = 'https://www.course-api.com/react-store-products'; 4 | 5 | const FirstRequest = () => { 6 | useEffect(() => { 7 | console.log('first axios request'); 8 | }, []); 9 | 10 | return <h2 className='text-center'>first request</h2>; 11 | }; 12 | export default FirstRequest; 13 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/examples/4-global-instance.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | const productsUrl = 'https://www.course-api.com/react-store-products'; 4 | const randomUserUrl = 'https://randomuser.me/api'; 5 | 6 | const GlobalInstance = () => { 7 | const fetchData = async () => { 8 | console.log('global axios instance'); 9 | }; 10 | 11 | useEffect(() => { 12 | fetchData(); 13 | }, []); 14 | 15 | return <h2 className='text-center'>global instance</h2>; 16 | }; 17 | export default GlobalInstance; 18 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/examples/5-custom-instance.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | const randomUserUrl = 'https://randomuser.me/api'; 4 | 5 | const CustomInstance = () => { 6 | const fetchData = async () => { 7 | console.log('custom axios instance'); 8 | }; 9 | 10 | useEffect(() => { 11 | fetchData(); 12 | }, []); 13 | 14 | return <h2 className='text-center'>custom instance</h2>; 15 | }; 16 | export default CustomInstance; 17 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/examples/6-interceptors.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | const url = 'https://www.course-api.com/react-store-products'; 4 | 5 | const Interceptors = () => { 6 | const fetchData = async () => { 7 | console.log('axios interceptors'); 8 | }; 9 | 10 | useEffect(() => { 11 | fetchData(); 12 | }, []); 13 | 14 | return <h2 className='text-center'>interceptors</h2>; 15 | }; 16 | export default Interceptors; 17 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/final/axios/custom.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const authFetch = axios.create({ 4 | baseURL: 'https://www.course-api.com', 5 | headers: { 6 | Accept: 'application/json', 7 | }, 8 | }); 9 | 10 | export default authFetch; 11 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/final/axios/global.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | axios.defaults.headers.common['Accept'] = 'application/json'; 4 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/final/components/Title.js: -------------------------------------------------------------------------------- 1 | const Title = () => { 2 | return ( 3 | <div className='title'> 4 | <h1> 5 | <span>axios</span> tutorial 6 | </h1> 7 | </div> 8 | ); 9 | }; 10 | export default Title; 11 | -------------------------------------------------------------------------------- /05-axios-tutorial/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /06-react-query/.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 | **/package-lock.json 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* -------------------------------------------------------------------------------- /06-react-query/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /06-react-query/final/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="UTF-8" /> 5 | <link rel="icon" type="image/svg+xml" href="/vite.svg" /> 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 | <title>React Query 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /06-react-query/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { ToastContainer } from 'react-toastify'; 2 | import Form from './Form'; 3 | import Items from './Items'; 4 | 5 | const App = () => { 6 | return ( 7 |
    8 | 9 |
    10 | 11 |
    12 | ); 13 | }; 14 | export default App; 15 | -------------------------------------------------------------------------------- /06-react-query/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | import 'react-toastify/dist/ReactToastify.css'; 6 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; 7 | 8 | const queryClient = new QueryClient(); 9 | 10 | ReactDOM.createRoot(document.getElementById('root')).render( 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /06-react-query/final/src/utils.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const customFetch = axios.create({ 4 | baseURL: 'http://localhost:5000/api/tasks', 5 | }); 6 | 7 | export default customFetch; 8 | -------------------------------------------------------------------------------- /06-react-query/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /06-react-query/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "start": "nodemon server", 9 | "local-server": "nodemon localDataServer" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "cors": "^2.8.5", 16 | "express": "^4.18.2", 17 | "morgan": "^1.10.0", 18 | "nanoid": "^4.0.1", 19 | "nodemon": "^2.0.22" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /06-react-query/server/tasks.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "id": "I0b-ENEAXbOSqW-E9S2zz", "title": "first task", "isDone": false }, 3 | { "id": "hvBD6B_wfeNz2tUENiWQe", "title": "third task", "isDone": false }, 4 | { "id": "b035W-cJYnwS3akrP5QQK", "title": "random task", "isDone": false } 5 | ] 6 | -------------------------------------------------------------------------------- /06-react-query/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /06-react-query/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Query 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /06-react-query/starter/src/Items.jsx: -------------------------------------------------------------------------------- 1 | import SingleItem from './SingleItem'; 2 | const Items = ({ items }) => { 3 | return ( 4 |
    5 | {items.map((item) => { 6 | return ; 7 | })} 8 |
    9 | ); 10 | }; 11 | export default Items; 12 | -------------------------------------------------------------------------------- /06-react-query/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | import 'react-toastify/dist/ReactToastify.css'; 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render(); 8 | -------------------------------------------------------------------------------- /06-react-query/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /07-unsplash-images/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /07-unsplash-images/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Unsplash Images 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /07-unsplash-images/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Gallery from './Gallery'; 2 | import SearchForm from './SearchForm'; 3 | import ThemeToggle from './ThemeToggle'; 4 | 5 | const App = () => { 6 | return ( 7 |
    8 | 9 | 10 | 11 |
    12 | ); 13 | }; 14 | export default App; 15 | -------------------------------------------------------------------------------- /07-unsplash-images/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /07-unsplash-images/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /07-unsplash-images/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Unsplash Images Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /07-unsplash-images/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Unsplash Images Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /07-unsplash-images/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render(); 7 | -------------------------------------------------------------------------------- /07-unsplash-images/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /08-contentful-cms/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env -------------------------------------------------------------------------------- /08-contentful-cms/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contentful CMS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /08-contentful-cms/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Hero from './Hero'; 2 | import Projects from './Projects'; 3 | 4 | const App = () => { 5 | return ( 6 |
    7 | 8 | 9 |
    10 | ); 11 | }; 12 | export default App; 13 | -------------------------------------------------------------------------------- /08-contentful-cms/final/src/assets/birthday.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/08-contentful-cms/final/src/assets/birthday.png -------------------------------------------------------------------------------- /08-contentful-cms/final/src/assets/questions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/08-contentful-cms/final/src/assets/questions.png -------------------------------------------------------------------------------- /08-contentful-cms/final/src/assets/reviews.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/08-contentful-cms/final/src/assets/reviews.png -------------------------------------------------------------------------------- /08-contentful-cms/final/src/assets/tours.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/08-contentful-cms/final/src/assets/tours.png -------------------------------------------------------------------------------- /08-contentful-cms/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /08-contentful-cms/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /08-contentful-cms/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env -------------------------------------------------------------------------------- /08-contentful-cms/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contentful Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /08-contentful-cms/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    Contentful Starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /08-contentful-cms/starter/src/assets/birthday.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/08-contentful-cms/starter/src/assets/birthday.png -------------------------------------------------------------------------------- /08-contentful-cms/starter/src/assets/questions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/08-contentful-cms/starter/src/assets/questions.png -------------------------------------------------------------------------------- /08-contentful-cms/starter/src/assets/reviews.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/08-contentful-cms/starter/src/assets/reviews.png -------------------------------------------------------------------------------- /08-contentful-cms/starter/src/assets/tours.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/08-contentful-cms/starter/src/assets/tours.png -------------------------------------------------------------------------------- /08-contentful-cms/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /08-contentful-cms/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /09-mixmaster/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env -------------------------------------------------------------------------------- /09-mixmaster/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MixMaster Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /09-mixmaster/final/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /09-mixmaster/final/src/assets/wrappers/AboutPage.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Wrapper = styled.div` 4 | p { 5 | line-height: 2; 6 | color: var(--grey-500); 7 | margin-top: 2rem; 8 | } 9 | `; 10 | 11 | export default Wrapper; 12 | -------------------------------------------------------------------------------- /09-mixmaster/final/src/assets/wrappers/CocktailList.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Wrapper = styled.div` 4 | display: grid; 5 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 6 | gap: 2rem; 7 | `; 8 | 9 | export default Wrapper; 10 | -------------------------------------------------------------------------------- /09-mixmaster/final/src/assets/wrappers/SearchForm.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Wrapper = styled.div` 4 | margin-bottom: 6rem; 5 | .form { 6 | display: grid; 7 | grid-template-columns: 1fr auto; 8 | } 9 | .form-input { 10 | border-top-right-radius: 0; 11 | border-bottom-right-radius: 0; 12 | } 13 | .btn { 14 | border-top-left-radius: 0; 15 | border-bottom-left-radius: 0; 16 | } 17 | `; 18 | 19 | export default Wrapper; 20 | -------------------------------------------------------------------------------- /09-mixmaster/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import 'react-toastify/dist/ReactToastify.css'; 5 | 6 | import './index.css'; 7 | import { ToastContainer } from 'react-toastify'; 8 | 9 | ReactDOM.createRoot(document.getElementById('root')).render( 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /09-mixmaster/final/src/pages/SinglePageError.jsx: -------------------------------------------------------------------------------- 1 | import { useRouteError } from 'react-router-dom'; 2 | 3 | const SinglePageError = () => { 4 | const error = useRouteError(); 5 | console.log(error); 6 | // return

    {error.message}

    ; 7 | return

    there was an error...

    ; 8 | }; 9 | export default SinglePageError; 10 | -------------------------------------------------------------------------------- /09-mixmaster/final/src/pages/index.js: -------------------------------------------------------------------------------- 1 | export { default as Landing } from './Landing'; 2 | export { default as About } from './About'; 3 | export { default as Cocktail } from './Cocktail'; 4 | export { default as Newsletter } from './Newsletter'; 5 | export { default as HomeLayout } from './HomeLayout'; 6 | export { default as Error } from './Error'; 7 | export { default as SinglePageError } from './SinglePageError'; 8 | -------------------------------------------------------------------------------- /09-mixmaster/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /09-mixmaster/starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env -------------------------------------------------------------------------------- /09-mixmaster/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MixMaster Starter 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /09-mixmaster/starter/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /09-mixmaster/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

    mixmaster starter

    ; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /09-mixmaster/starter/src/assets/wrappers/AboutPage.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Wrapper = styled.div` 4 | p { 5 | line-height: 2; 6 | color: var(--grey-500); 7 | margin-top: 2rem; 8 | } 9 | `; 10 | 11 | export default Wrapper; 12 | -------------------------------------------------------------------------------- /09-mixmaster/starter/src/assets/wrappers/CocktailList.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Wrapper = styled.div` 4 | display: grid; 5 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 6 | gap: 2rem; 7 | `; 8 | 9 | export default Wrapper; 10 | -------------------------------------------------------------------------------- /09-mixmaster/starter/src/assets/wrappers/SearchForm.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Wrapper = styled.div` 4 | margin-bottom: 6rem; 5 | .form { 6 | display: grid; 7 | grid-template-columns: 1fr auto; 8 | } 9 | .form-input { 10 | border-top-right-radius: 0; 11 | border-bottom-right-radius: 0; 12 | } 13 | .btn { 14 | border-top-left-radius: 0; 15 | border-bottom-left-radius: 0; 16 | } 17 | `; 18 | 19 | export default Wrapper; 20 | -------------------------------------------------------------------------------- /09-mixmaster/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | import './index.css'; 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /09-mixmaster/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebDev Portfolio 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import About from './components/About'; 2 | import Hero from './components/Hero'; 3 | import Navbar from './components/Navbar'; 4 | import Projects from './components/Projects'; 5 | import Skills from './components/Skills'; 6 | 7 | const App = () => { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | export default App; 19 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/src/components/SectionTitle.jsx: -------------------------------------------------------------------------------- 1 | const SectionTitle = ({ text }) => { 2 | return ( 3 |
    4 |

    {text}

    5 |
    6 | ); 7 | }; 8 | export default SectionTitle; 9 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/src/components/SkillsCard.jsx: -------------------------------------------------------------------------------- 1 | const SkillsCard = ({ icon, title, text }) => { 2 | return ( 3 |
    4 | {icon} 5 |

    {title}

    6 |

    {text}

    7 |
    8 | ); 9 | }; 10 | export default SkillsCard; 11 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .align-element { 7 | @apply mx-auto max-w-7xl px-8; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /10-tailwind-portfolio/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/README.md: -------------------------------------------------------------------------------- 1 | ## Vite Option 2 | 3 | I have added two folders called vite-starter and vite-final. If you prefer to work with Vite instead of CRA, simply use the Vite folders. The Redux Toolkit functionality is the same in both setups. 4 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/final/.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 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/11-redux-toolkit-tutorial/final/public/favicon.ico -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/11-redux-toolkit-tutorial/final/public/logo192.png -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/11-redux-toolkit-tutorial/final/public/logo512.png -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | import { store } from './store'; 7 | import { Provider } from 'react-redux'; 8 | 9 | const container = document.getElementById('root'); 10 | const root = createRoot(container); 11 | 12 | root.render( 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/final/src/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import cartReducer from './features/cart/cartSlice'; 3 | import modalReducer from './features/modal/modalSlice'; 4 | export const store = configureStore({ 5 | reducer: { 6 | cart: cartReducer, 7 | modal: modalReducer, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/starter/.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 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/11-redux-toolkit-tutorial/starter/public/favicon.ico -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/starter/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/11-redux-toolkit-tutorial/starter/public/logo192.png -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/starter/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/11-redux-toolkit-tutorial/starter/public/logo512.png -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/starter/src/App.js: -------------------------------------------------------------------------------- 1 | function App() { 2 | return

    Redux Toolkit

    ; 3 | } 4 | export default App; 5 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/starter/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const container = document.getElementById('root'); 7 | const root = createRoot(container); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | import { store } from './store'; 7 | import { Provider } from 'react-redux'; 8 | 9 | const container = document.getElementById('root'); 10 | const root = createRoot(container); 11 | 12 | root.render( 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-final/src/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import cartReducer from './features/cart/cartSlice'; 3 | import modalReducer from './features/modal/modalSlice'; 4 | export const store = configureStore({ 5 | reducer: { 6 | cart: cartReducer, 7 | modal: modalReducer, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | function App() { 2 | return

    Redux Toolkit

    ; 3 | } 4 | export default App; 5 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | const container = document.getElementById('root'); 8 | const root = createRoot(container); 9 | 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /11-redux-toolkit-tutorial/vite-starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /12-comfy-store/final/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /12-comfy-store/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Comfy Store 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /12-comfy-store/final/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /12-comfy-store/final/src/assets/hero1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/12-comfy-store/final/src/assets/hero1.webp -------------------------------------------------------------------------------- /12-comfy-store/final/src/assets/hero2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/12-comfy-store/final/src/assets/hero2.webp -------------------------------------------------------------------------------- /12-comfy-store/final/src/assets/hero3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/12-comfy-store/final/src/assets/hero3.webp -------------------------------------------------------------------------------- /12-comfy-store/final/src/assets/hero4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/12-comfy-store/final/src/assets/hero4.webp -------------------------------------------------------------------------------- /12-comfy-store/final/src/components/CartItemsList.jsx: -------------------------------------------------------------------------------- 1 | import { useSelector } from 'react-redux'; 2 | import CartItem from './CartItem'; 3 | 4 | const CartItemsList = () => { 5 | const cartItems = useSelector((state) => state.cartState.cartItems); 6 | return ( 7 | <> 8 | {cartItems.map((item) => { 9 | return ; 10 | })} 11 | 12 | ); 13 | }; 14 | export default CartItemsList; 15 | -------------------------------------------------------------------------------- /12-comfy-store/final/src/components/ErrorElement.jsx: -------------------------------------------------------------------------------- 1 | import { useRouteError } from 'react-router-dom'; 2 | 3 | const ErrorElement = () => { 4 | const error = useRouteError(); 5 | console.log(error); 6 | 7 | return

    There was an error...

    ; 8 | }; 9 | export default ErrorElement; 10 | -------------------------------------------------------------------------------- /12-comfy-store/final/src/components/FeaturedProducts.jsx: -------------------------------------------------------------------------------- 1 | import ProductsGrid from './ProductsGrid'; 2 | import SectionTitle from './SectionTitle'; 3 | 4 | const FeaturedProducts = () => { 5 | return ( 6 |
    7 | 8 | 9 |
    10 | ); 11 | }; 12 | export default FeaturedProducts; 13 | -------------------------------------------------------------------------------- /12-comfy-store/final/src/components/Loading.jsx: -------------------------------------------------------------------------------- 1 | const Loading = () => { 2 | return ( 3 |
    4 | 5 |
    6 | ); 7 | }; 8 | export default Loading; 9 | -------------------------------------------------------------------------------- /12-comfy-store/final/src/components/SectionTitle.jsx: -------------------------------------------------------------------------------- 1 | const SectionTitle = ({ text }) => { 2 | return ( 3 |
    4 |

    {text}

    5 |
    6 | ); 7 | }; 8 | export default SectionTitle; 9 | -------------------------------------------------------------------------------- /12-comfy-store/final/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .align-element { 7 | @apply mx-auto max-w-6xl px-8; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /12-comfy-store/final/src/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | 3 | import cartReducer from './features/cart/cartSlice'; 4 | import userReducer from './features/user/userSlice'; 5 | 6 | export const store = configureStore({ 7 | reducer: { 8 | cartState: cartReducer, 9 | userState: userReducer, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /12-comfy-store/final/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [require('@tailwindcss/typography'), require('daisyui')], 8 | daisyui: { 9 | themes: ['winter', 'dracula'], 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /12-comfy-store/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /12-comfy-store/project-assets/hero1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/12-comfy-store/project-assets/hero1.webp -------------------------------------------------------------------------------- /12-comfy-store/project-assets/hero2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/12-comfy-store/project-assets/hero2.webp -------------------------------------------------------------------------------- /12-comfy-store/project-assets/hero3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/12-comfy-store/project-assets/hero3.webp -------------------------------------------------------------------------------- /12-comfy-store/project-assets/hero4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/12-comfy-store/project-assets/hero4.webp -------------------------------------------------------------------------------- /13-typescript-tutorial/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /13-typescript-tutorial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /13-typescript-tutorial/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@types/bcryptjs": "^2.4.6", 13 | "typescript": "^5.2.2", 14 | "vite": "^5.1.0" 15 | }, 16 | "dependencies": { 17 | "bcryptjs": "^2.4.3", 18 | "zod": "^3.22.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /13-typescript-tutorial/src/counter.ts: -------------------------------------------------------------------------------- 1 | export function setupCounter(element: HTMLButtonElement) { 2 | let counter = 0 3 | const setCounter = (count: number) => { 4 | counter = count 5 | element.innerHTML = `count is ${counter}` 6 | } 7 | element.addEventListener('click', () => setCounter(counter + 1)) 8 | setCounter(0) 9 | } 10 | -------------------------------------------------------------------------------- /13-typescript-tutorial/src/tutorial.ts: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /13-typescript-tutorial/src/types.ts: -------------------------------------------------------------------------------- 1 | export type Random = { 2 | name: string; 3 | }; 4 | -------------------------------------------------------------------------------- /13-typescript-tutorial/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/App.tsx: -------------------------------------------------------------------------------- 1 | function App() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |
    6 | ); 7 | } 8 | 9 | export default App; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/final/01-return/index.tsx: -------------------------------------------------------------------------------- 1 | function Component(): JSX.Element | null | string { 2 | return null; 3 | return 'hello'; 4 | return

    hello from typescript

    ; 5 | } 6 | export default Component; 7 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/final/06-context/basic-index.tsx: -------------------------------------------------------------------------------- 1 | import { useTheme, ThemeProvider } from './basic-context'; 2 | 3 | function ParentComponent() { 4 | return ( 5 | 6 | 7 | 8 | ); 9 | return ; 10 | } 11 | 12 | function Component() { 13 | const context = useTheme(); 14 | console.log(context); 15 | 16 | return ( 17 |
    18 |

    random component

    19 |
    20 | ); 21 | } 22 | export default ParentComponent; 23 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/final/10-tasks/types.ts: -------------------------------------------------------------------------------- 1 | export type Task = { 2 | id: string; 3 | description: string; 4 | isCompleted: boolean; 5 | }; 6 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/hooks.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/14-typescript-react-essentials/src/hooks.ts -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App.tsx'; 4 | import './index.css'; 5 | 6 | import { Provider } from 'react-redux'; 7 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; 8 | 9 | ReactDOM.createRoot(document.getElementById('root')!).render(); 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/01-return/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    Return Type

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/02-props/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    Props

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/03-state/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    State

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/04-events/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    Events

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/05-challenge/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    Challenge

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/06-context/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    Context API

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/07-reducers/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    useReducer Hook

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/08-fetch-data/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    Fetch Data

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/09-rtk/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    Redux Toolkit

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/starter/10-tasks/index.tsx: -------------------------------------------------------------------------------- 1 | function Component() { 2 | return ( 3 |
    4 |

    React & Typescript

    5 |

    Task List

    6 |
    7 | ); 8 | } 9 | export default Component; 10 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/store.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/14-typescript-react-essentials/src/store.ts -------------------------------------------------------------------------------- /14-typescript-react-essentials/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /14-typescript-react-essentials/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/(dashboard)/auth/[[...sign-in]]/page.tsx: -------------------------------------------------------------------------------- 1 | const SignInPage = ({ params }: { params: { 'sign-in': string[] } }) => { 2 | console.log(params); 3 | console.log(params['sign-in'][1]); 4 | return
    SignInPage :{params['sign-in'][1]}
    ; 5 | }; 6 | export default SignInPage; 7 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | function AboutPage() { 2 | return ( 3 |
    4 |

    AboutPage

    5 |
    6 | ); 7 | } 8 | export default AboutPage; 9 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/actions/page.tsx: -------------------------------------------------------------------------------- 1 | import Form from '@/components/Form'; 2 | import UsersList from '@/components/UsersList'; 3 | 4 | function ActionsPage() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ); 11 | } 12 | export default ActionsPage; 13 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/counter/page.tsx: -------------------------------------------------------------------------------- 1 | import Counter from '@/components/Counter'; 2 | 3 | function CounterPage() { 4 | return ( 5 |
    6 |

    Page Content

    7 | 8 |
    9 | ); 10 | } 11 | export default CounterPage; 12 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/15-nextjs-tutorial/app/favicon.ico -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | 3 | function HomePage() { 4 | return ( 5 |
    6 |

    Home Page

    7 | 8 | about page 9 | 10 |
    11 | ); 12 | } 13 | export default HomePage; 14 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/tours/error.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | function error({ error }: { error: Error }) { 4 | console.log(error); 5 | 6 | return
    there was an error...
    ; 7 | } 8 | export default error; 9 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/tours/layout.tsx: -------------------------------------------------------------------------------- 1 | function ToursLayout({ children }: { children: React.ReactNode }) { 2 | return ( 3 |
    4 |
    5 |

    Nested Layout

    6 |
    7 | {children} 8 |
    9 | ); 10 | } 11 | export default ToursLayout; 12 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/app/tours/loading.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | function loading() { 4 | return loading tours...; 5 | } 6 | export default loading; 7 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | 3 | function Navbar() { 4 | return ( 5 | 11 | ); 12 | } 13 | export default Navbar; 14 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/images/maps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/15-nextjs-tutorial/images/maps.jpg -------------------------------------------------------------------------------- /15-nextjs-tutorial/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [ 5 | { 6 | protocol: 'https', 7 | hostname: 'www.course-api.com', 8 | port: '', 9 | pathname: '/images/**', 10 | }, 11 | ], 12 | }, 13 | }; 14 | 15 | export default nextConfig; 16 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /15-nextjs-tutorial/users.json: -------------------------------------------------------------------------------- 1 | [{"firstName":"peter","lastName":"smith","id":"1713023562290"}] -------------------------------------------------------------------------------- /16-nextjs-store/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /16-nextjs-store/app/admin/products/loading.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import LoadingTable from '@/components/global/LoadingTable'; 4 | 5 | function loading() { 6 | return ; 7 | } 8 | export default loading; 9 | -------------------------------------------------------------------------------- /16-nextjs-store/app/admin/sales/loading.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import LoadingTable from '@/components/global/LoadingTable'; 4 | 5 | function loading() { 6 | return ; 7 | } 8 | export default loading; 9 | -------------------------------------------------------------------------------- /16-nextjs-store/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/app/favicon.ico -------------------------------------------------------------------------------- /16-nextjs-store/app/favorites/loading.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import LoadingContainer from '@/components/global/LoadingContainer'; 4 | 5 | function loading() { 6 | return ; 7 | } 8 | export default loading; 9 | -------------------------------------------------------------------------------- /16-nextjs-store/app/orders/loading.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import LoadingTable from '@/components/global/LoadingTable'; 4 | 5 | function loading() { 6 | return ; 7 | } 8 | export default loading; 9 | -------------------------------------------------------------------------------- /16-nextjs-store/app/page.tsx: -------------------------------------------------------------------------------- 1 | import LoadingContainer from '@/components/global/LoadingContainer'; 2 | import FeaturedProducts from '@/components/home/FeaturedProducts'; 3 | import Hero from '@/components/home/Hero'; 4 | import { Suspense } from 'react'; 5 | function HomePage() { 6 | return ( 7 | <> 8 | 9 | 10 | }> 11 | 12 | 13 | 14 | ); 15 | } 16 | export default HomePage; 17 | -------------------------------------------------------------------------------- /16-nextjs-store/app/products/loading.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import LoadingContainer from '@/components/global/LoadingContainer'; 4 | 5 | function loading() { 6 | return ; 7 | } 8 | export default loading; 9 | -------------------------------------------------------------------------------- /16-nextjs-store/app/products/page.tsx: -------------------------------------------------------------------------------- 1 | import ProductsContainer from '@/components/products/ProductsContainer'; 2 | 3 | function ProductsPage({ 4 | searchParams, 5 | }: { 6 | searchParams: { layout?: string; search?: string }; 7 | }) { 8 | const layout = searchParams.layout || 'grid'; 9 | const search = searchParams.search || ''; 10 | 11 | return ; 12 | } 13 | export default ProductsPage; 14 | -------------------------------------------------------------------------------- /16-nextjs-store/app/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as React from 'react'; 4 | import { ThemeProvider as NextThemesProvider } from 'next-themes'; 5 | import { type ThemeProviderProps } from 'next-themes/dist/types'; 6 | 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 | return {children}; 9 | } 10 | -------------------------------------------------------------------------------- /16-nextjs-store/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } -------------------------------------------------------------------------------- /16-nextjs-store/components/form/ImageInput.tsx: -------------------------------------------------------------------------------- 1 | import { Label } from '../ui/label'; 2 | import { Input } from '../ui/input'; 3 | 4 | function ImageInput() { 5 | const name = 'image'; 6 | 7 | return ( 8 |
    9 | 12 | 13 |
    14 | ); 15 | } 16 | export default ImageInput; 17 | -------------------------------------------------------------------------------- /16-nextjs-store/components/global/Container.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from '@/lib/utils'; 2 | 3 | function Container({ 4 | children, 5 | className, 6 | }: { 7 | children: React.ReactNode; 8 | className?: string; 9 | }) { 10 | return ( 11 |
    12 | {children} 13 |
    14 | ); 15 | } 16 | export default Container; 17 | -------------------------------------------------------------------------------- /16-nextjs-store/components/global/EmptyList.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from '@/lib/utils'; 2 | 3 | function EmptyList({ 4 | heading = 'No items found.', 5 | className, 6 | }: { 7 | heading?: string; 8 | className?: string; 9 | }) { 10 | return

    {heading}

    ; 11 | } 12 | export default EmptyList; 13 | -------------------------------------------------------------------------------- /16-nextjs-store/components/global/LoadingTable.tsx: -------------------------------------------------------------------------------- 1 | import { Skeleton } from '../ui/skeleton'; 2 | 3 | function LoadingTable({ rows = 5 }: { rows?: number }) { 4 | const tableRows = Array.from({ length: rows }, (_, index) => { 5 | return ( 6 |
    7 | 8 |
    9 | ); 10 | }); 11 | return <>{tableRows}; 12 | } 13 | export default LoadingTable; 14 | -------------------------------------------------------------------------------- /16-nextjs-store/components/global/SectionTitle.tsx: -------------------------------------------------------------------------------- 1 | import { Separator } from '@/components/ui/separator'; 2 | 3 | function SectionTitle({ text }: { text: string }) { 4 | return ( 5 |
    6 |

    7 | {text} 8 |

    9 | 10 |
    11 | ); 12 | } 13 | export default SectionTitle; 14 | -------------------------------------------------------------------------------- /16-nextjs-store/components/navbar/Logo.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import { Button } from '../ui/button'; 3 | import { VscCode } from 'react-icons/vsc'; 4 | 5 | function Logo() { 6 | return ( 7 | 12 | ); 13 | } 14 | export default Logo; 15 | -------------------------------------------------------------------------------- /16-nextjs-store/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
    12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /16-nextjs-store/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /16-nextjs-store/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [ 5 | { 6 | protocol: 'https', 7 | hostname: 'images.pexels.com', 8 | }, 9 | { 10 | protocol: 'https', 11 | hostname: 'ibbdetibjuzwrprbiayt.supabase.co', 12 | }, 13 | { 14 | protocol: 'https', 15 | hostname: 'img.clerk.com', 16 | }, 17 | ], 18 | }, 19 | }; 20 | 21 | export default nextConfig; 22 | -------------------------------------------------------------------------------- /16-nextjs-store/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /16-nextjs-store/public/images/hero1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/hero1.jpg -------------------------------------------------------------------------------- /16-nextjs-store/public/images/hero2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/hero2.jpg -------------------------------------------------------------------------------- /16-nextjs-store/public/images/hero3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/hero3.jpg -------------------------------------------------------------------------------- /16-nextjs-store/public/images/hero4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/hero4.jpg -------------------------------------------------------------------------------- /16-nextjs-store/public/images/product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/product-1.jpg -------------------------------------------------------------------------------- /16-nextjs-store/public/images/product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/product-2.jpg -------------------------------------------------------------------------------- /16-nextjs-store/public/images/product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/product-3.jpg -------------------------------------------------------------------------------- /16-nextjs-store/public/images/product-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/product-4.jpg -------------------------------------------------------------------------------- /16-nextjs-store/public/images/product-big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/16-nextjs-store/public/images/product-big.jpg -------------------------------------------------------------------------------- /16-nextjs-store/utils/format.ts: -------------------------------------------------------------------------------- 1 | export const formatCurrency = (amount: number | null) => { 2 | const value = amount || 0; 3 | return new Intl.NumberFormat('en-US', { 4 | style: 'currency', 5 | currency: 'USD', 6 | }).format(value); 7 | }; 8 | 9 | export const formatDate = (date: Date) => { 10 | return new Intl.DateTimeFormat('en-US', { 11 | year: 'numeric', 12 | month: 'long', 13 | day: 'numeric', 14 | }).format(date); 15 | }; 16 | -------------------------------------------------------------------------------- /17-starter-store/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /17-starter-store/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/app/favicon.ico -------------------------------------------------------------------------------- /17-starter-store/app/page.tsx: -------------------------------------------------------------------------------- 1 | const HomePage = () => { 2 | return
    Store Starter
    ; 3 | }; 4 | export default HomePage; 5 | -------------------------------------------------------------------------------- /17-starter-store/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } -------------------------------------------------------------------------------- /17-starter-store/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
    12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /17-starter-store/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /17-starter-store/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [ 5 | { 6 | protocol: 'https', 7 | hostname: 'images.pexels.com', 8 | }, 9 | { 10 | protocol: 'https', 11 | hostname: 'ibbdetibjuzwrprbiayt.supabase.co', 12 | }, 13 | { 14 | protocol: 'https', 15 | hostname: 'img.clerk.com', 16 | }, 17 | ], 18 | }, 19 | }; 20 | 21 | export default nextConfig; 22 | -------------------------------------------------------------------------------- /17-starter-store/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /17-starter-store/public/images/hero1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/hero1.jpg -------------------------------------------------------------------------------- /17-starter-store/public/images/hero2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/hero2.jpg -------------------------------------------------------------------------------- /17-starter-store/public/images/hero3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/hero3.jpg -------------------------------------------------------------------------------- /17-starter-store/public/images/hero4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/hero4.jpg -------------------------------------------------------------------------------- /17-starter-store/public/images/product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/product-1.jpg -------------------------------------------------------------------------------- /17-starter-store/public/images/product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/product-2.jpg -------------------------------------------------------------------------------- /17-starter-store/public/images/product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/product-3.jpg -------------------------------------------------------------------------------- /17-starter-store/public/images/product-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/product-4.jpg -------------------------------------------------------------------------------- /17-starter-store/public/images/product-big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/17-starter-store/public/images/product-big.jpg -------------------------------------------------------------------------------- /18-nextjs-jobify-app/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/app/(dashboard)/add-job/page.tsx: -------------------------------------------------------------------------------- 1 | import CreateJobForm from '@/components/CreateJobForm'; 2 | import { 3 | dehydrate, 4 | HydrationBoundary, 5 | QueryClient, 6 | } from '@tanstack/react-query'; 7 | 8 | function AddJobPage() { 9 | const queryClient = new QueryClient(); 10 | return ( 11 | 12 | 13 | 14 | ); 15 | } 16 | export default AddJobPage; 17 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/app/(dashboard)/jobs/loading.tsx: -------------------------------------------------------------------------------- 1 | import { Skeleton } from '@/components/ui/skeleton'; 2 | 3 | function loading() { 4 | return ( 5 |
    6 | 7 | 8 | 9 |
    10 | ); 11 | } 12 | export default loading; 13 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/app/(dashboard)/stats/loading.tsx: -------------------------------------------------------------------------------- 1 | import { StatsLoadingCard } from '@/components/StatsCard'; 2 | function loading() { 3 | return ( 4 |
    5 | 6 | 7 | 8 |
    9 | ); 10 | } 11 | export default loading; 12 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/18-nextjs-jobify-app/app/favicon.ico -------------------------------------------------------------------------------- /18-nextjs-jobify-app/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/18-nextjs-jobify-app/assets/favicon.ico -------------------------------------------------------------------------------- /18-nextjs-jobify-app/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /18-nextjs-jobify-app/components/JobInfo.tsx: -------------------------------------------------------------------------------- 1 | function JobInfo({ icon, text }: { icon: React.ReactNode; text: string }) { 2 | return ( 3 |
    4 | {icon} 5 | {text} 6 |
    7 | ); 8 | } 9 | export default JobInfo; 10 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as React from 'react'; 4 | import { ThemeProvider as NextThemesProvider } from 'next-themes'; 5 | import { type ThemeProviderProps } from 'next-themes/dist/types'; 6 | 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 | return {children}; 9 | } 10 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
    12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/middleware.ts: -------------------------------------------------------------------------------- 1 | import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'; 2 | 3 | const isProtectedRoute = createRouteMatcher([ 4 | '/add-job', 5 | '/jobs(.*)', 6 | '/stats', 7 | ]); 8 | 9 | export default clerkMiddleware((auth, req) => { 10 | if (isProtectedRoute(req)) auth().protect(); 11 | }); 12 | 13 | export const config = { 14 | matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], 15 | }; 16 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /18-nextjs-jobify-app/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /19-starter-jobify/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /19-starter-jobify/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/19-starter-jobify/app/favicon.ico -------------------------------------------------------------------------------- /19-starter-jobify/app/page.tsx: -------------------------------------------------------------------------------- 1 | const HomePage = () => { 2 | return
    Jobiby Starter project
    ; 3 | }; 4 | export default HomePage; 5 | -------------------------------------------------------------------------------- /19-starter-jobify/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/react-course-v3/7eb31e82fd427b98dd7e3849f578a68dc84618e0/19-starter-jobify/assets/favicon.ico -------------------------------------------------------------------------------- /19-starter-jobify/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /19-starter-jobify/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
    12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /19-starter-jobify/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /19-starter-jobify/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /19-starter-jobify/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /w-assets/global-context-example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /w-assets/global-context-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /w-assets/global-context-example/src/context.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext, useState } from 'react'; 2 | 3 | const GlobalContext = createContext(); 4 | 5 | export const useGlobalContext = () => useContext(GlobalContext); 6 | 7 | const AppContext = ({ children }) => { 8 | const [name, setName] = useState('peter'); 9 | 10 | return ( 11 | 12 | {children} 13 | 14 | ); 15 | }; 16 | 17 | export default AppContext; 18 | -------------------------------------------------------------------------------- /w-assets/global-context-example/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import AppContext from './context'; 5 | import './index.css'; 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /w-assets/global-context-example/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------