├── src4 ├── index.css ├── components │ ├── UI │ │ ├── Card.module.css │ │ ├── Card.js │ │ ├── Button.module.css │ │ └── Button.js │ └── Game │ │ └── NumberList.module.css ├── setupTests.js └── reportWebVitals.js ├── react-course-v3-main ├── 09-mixmaster │ └── final │ │ ├── public │ │ └── _redirects │ │ ├── vite.config.js │ │ ├── src │ │ ├── assets │ │ │ └── wrappers │ │ │ │ ├── AboutPage.js │ │ │ │ ├── CocktailList.js │ │ │ │ └── SearchForm.js │ │ ├── pages │ │ │ ├── SinglePageError.jsx │ │ │ └── index.js │ │ └── main.jsx │ │ ├── .gitignore │ │ └── index.html ├── 01-fundamentals │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ └── images │ │ │ └── book-1.jpg │ ├── src │ │ ├── images │ │ │ ├── book-1.jpg │ │ │ ├── book-2.jpg │ │ │ └── book-3.jpg │ │ ├── Book.js │ │ └── books.js │ └── .gitignore ├── 03-advanced-react │ ├── src │ │ ├── tutorial │ │ │ ├── 04-project-structure │ │ │ │ ├── final │ │ │ │ │ ├── Navbar │ │ │ │ │ │ ├── index.jsx │ │ │ │ │ │ ├── Navbar.css │ │ │ │ │ │ └── Navbar.jsx │ │ │ │ │ ├── Pages │ │ │ │ │ │ ├── Home.jsx │ │ │ │ │ │ ├── About.jsx │ │ │ │ │ │ └── index.jsx │ │ │ │ │ └── Example │ │ │ │ │ │ ├── FirstComponent.jsx │ │ │ │ │ │ ├── SecondComponent.jsx │ │ │ │ │ │ └── index.jsx │ │ │ │ └── starter │ │ │ │ │ ├── README.md │ │ │ │ │ ├── Person.jsx │ │ │ │ │ └── List.jsx │ │ │ ├── 05-leverage-javascript │ │ │ │ ├── starter │ │ │ │ │ ├── README.md │ │ │ │ │ ├── People.jsx │ │ │ │ │ ├── List.jsx │ │ │ │ │ └── Person.jsx │ │ │ │ └── final │ │ │ │ │ └── List.jsx │ │ │ ├── 09-context-api │ │ │ │ ├── starter │ │ │ │ │ ├── README.md │ │ │ │ │ └── NavLinks.jsx │ │ │ │ └── final │ │ │ │ │ ├── context │ │ │ │ │ └── NavLinks.jsx │ │ │ │ │ └── prop-drilling │ │ │ │ │ ├── Navbar.jsx │ │ │ │ │ ├── NavLinks.jsx │ │ │ │ │ └── UserContainer.jsx │ │ │ ├── 01-useState │ │ │ │ ├── starter │ │ │ │ │ ├── 01-error-example.jsx │ │ │ │ │ └── 05-useState-gotcha.jsx │ │ │ │ └── final │ │ │ │ │ └── 01-error-example.jsx │ │ │ ├── 10-useReducer │ │ │ │ └── final │ │ │ │ │ └── actions.js │ │ │ ├── 11-performance │ │ │ │ ├── starter │ │ │ │ │ ├── 03-hooks │ │ │ │ │ │ ├── Person.jsx │ │ │ │ │ │ └── List.jsx │ │ │ │ │ ├── 02-lower-state-challenge │ │ │ │ │ │ ├── Person.jsx │ │ │ │ │ │ └── List.jsx │ │ │ │ │ └── 01-lower-state │ │ │ │ │ │ ├── List.jsx │ │ │ │ │ │ └── Person.jsx │ │ │ │ └── final │ │ │ │ │ ├── 02-lower-state-challenge │ │ │ │ │ ├── Person.jsx │ │ │ │ │ └── List.jsx │ │ │ │ │ ├── 01-lower-state │ │ │ │ │ ├── Person.jsx │ │ │ │ │ ├── List.jsx │ │ │ │ │ ├── Counter.jsx │ │ │ │ │ └── index.jsx │ │ │ │ │ └── 03-hooks │ │ │ │ │ ├── slowFunction.js │ │ │ │ │ ├── Person.jsx │ │ │ │ │ └── List.jsx │ │ │ ├── 08-custom-hooks │ │ │ │ ├── starter │ │ │ │ │ ├── useToggle.js │ │ │ │ │ └── 01-toggle.jsx │ │ │ │ └── final │ │ │ │ │ ├── useToggle.js │ │ │ │ │ └── 01-toggle.jsx │ │ │ ├── 03-conditional-rendering │ │ │ │ └── starter │ │ │ │ │ └── 01-multiple-returns-basics.jsx │ │ │ └── 02-useEffect │ │ │ │ └── final │ │ │ │ └── 01-code-example.jsx │ │ ├── App.jsx │ │ └── main.jsx │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ └── package.json ├── 05-axios-tutorial │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png │ ├── src │ │ ├── axios │ │ │ └── global.js │ │ ├── final │ │ │ ├── axios │ │ │ │ ├── global.js │ │ │ │ └── custom.js │ │ │ ├── components │ │ │ │ └── Title.js │ │ │ └── examples │ │ │ │ └── 6-interceptors.js │ │ ├── components │ │ │ └── Title.js │ │ ├── examples │ │ │ ├── custom.js │ │ │ └── 6-interceptors.js │ │ ├── App.js │ │ └── index.js │ └── .gitignore ├── 02-backroads-project │ ├── final │ │ ├── public │ │ │ ├── robots.txt │ │ │ ├── favicon.ico │ │ │ ├── logo192.png │ │ │ └── logo512.png │ │ ├── src │ │ │ ├── images │ │ │ │ ├── main.jpeg │ │ │ │ ├── about.jpeg │ │ │ │ ├── tour-1.jpeg │ │ │ │ ├── tour-2.jpeg │ │ │ │ ├── tour-3.jpeg │ │ │ │ ├── tour-4.jpeg │ │ │ │ ├── tour-5.jpeg │ │ │ │ └── tour-6.jpeg │ │ │ ├── components │ │ │ │ ├── Title.js │ │ │ │ ├── PageLink.js │ │ │ │ ├── SocialLink.js │ │ │ │ ├── PageLinks.js │ │ │ │ ├── Service.js │ │ │ │ ├── Tours.js │ │ │ │ ├── Hero.js │ │ │ │ └── Services.js │ │ │ └── index.js │ │ └── .gitignore │ └── backroads-html │ │ ├── images │ │ ├── main.jpeg │ │ ├── about.jpeg │ │ ├── favicon.ico │ │ ├── tour-1.jpeg │ │ ├── tour-2.jpeg │ │ ├── tour-3.jpeg │ │ ├── tour-4.jpeg │ │ ├── tour-5.jpeg │ │ └── tour-6.jpeg │ │ └── js │ │ └── app.js ├── 10-tailwind-portfolio │ ├── project-assets │ │ ├── package.json │ │ └── tailwind.config.js │ ├── final │ │ ├── postcss.config.js │ │ ├── src │ │ │ ├── index.css │ │ │ ├── components │ │ │ │ ├── SectionTitle.jsx │ │ │ │ └── SkillsCard.jsx │ │ │ ├── main.jsx │ │ │ └── App.jsx │ │ ├── vite.config.js │ │ ├── tailwind.config.cjs │ │ ├── .gitignore │ │ └── index.html │ └── my-project │ │ ├── postcss.config.js │ │ ├── src │ │ ├── index.css │ │ ├── main.jsx │ │ ├── components │ │ │ ├── SectionTitle.jsx │ │ │ └── SkillsCard.jsx │ │ └── App.jsx │ │ ├── vite.config.js │ │ ├── tailwind.config.js │ │ ├── .gitignore │ │ ├── index.html │ │ └── README.md ├── 11-redux-toolkit-tutorial │ ├── final │ │ ├── public │ │ │ ├── robots.txt │ │ │ ├── favicon.ico │ │ │ ├── logo192.png │ │ │ └── logo512.png │ │ ├── src │ │ │ ├── store.js │ │ │ ├── index.js │ │ │ └── features │ │ │ │ └── modal │ │ │ │ └── modalSlice.js │ │ └── .gitignore │ ├── starter │ │ ├── public │ │ │ ├── robots.txt │ │ │ ├── favicon.ico │ │ │ ├── logo192.png │ │ │ └── logo512.png │ │ ├── src │ │ │ ├── store.js │ │ │ ├── index.js │ │ │ └── features │ │ │ │ └── modal │ │ │ │ └── ModalSlice.js │ │ └── .gitignore │ ├── vite-starter │ │ ├── src │ │ │ ├── App.jsx │ │ │ └── main.jsx │ │ ├── vite.config.js │ │ ├── .gitignore │ │ └── index.html │ ├── vite-final │ │ ├── vite.config.js │ │ ├── src │ │ │ ├── store.js │ │ │ └── main.jsx │ │ ├── .gitignore │ │ └── index.html │ └── README.md ├── 08-contentful-cms │ ├── starter │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ ├── tours.png │ │ │ │ ├── birthday.png │ │ │ │ ├── questions.png │ │ │ │ └── reviews.png │ │ │ └── main.jsx │ │ ├── vite.config.js │ │ ├── .gitignore │ │ ├── index.html │ │ └── package.json │ └── final │ │ ├── src │ │ ├── assets │ │ │ ├── tours.png │ │ │ ├── birthday.png │ │ │ ├── reviews.png │ │ │ └── questions.png │ │ ├── App.jsx │ │ └── main.jsx │ │ ├── vite.config.js │ │ ├── .gitignore │ │ ├── index.html │ │ └── package.json ├── 04-fundamental-projects │ ├── 05-menu │ │ ├── starter │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ └── main.jsx │ │ │ ├── public │ │ │ │ └── images │ │ │ │ │ ├── item-1.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 │ │ │ │ │ └── item-10.jpeg │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ └── package.json │ │ └── final │ │ │ ├── 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.config.js │ │ │ ├── src │ │ │ ├── Title.jsx │ │ │ ├── main.jsx │ │ │ ├── Menu.jsx │ │ │ └── MenuItem.jsx │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ └── package.json │ ├── 03-reviews │ │ ├── starter │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ ├── assets │ │ │ │ │ └── example.png │ │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── final │ │ │ ├── src │ │ │ ├── assets │ │ │ │ └── example.png │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 04-accordion │ │ ├── starter │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ │ ├── final │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ │ ├── main.jsx │ │ │ │ ├── App.jsx │ │ │ │ └── Questions.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── final-alternative │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ └── main.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 13-strapi-submenus │ │ ├── starter │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── final │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── main.jsx │ │ │ └── Hero.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 09-color-generator │ │ ├── starter │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── final │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ ├── main.jsx │ │ │ └── ColorList.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 02-tours │ │ ├── starter │ │ │ ├── src │ │ │ │ ├── Loading.jsx │ │ │ │ ├── main.jsx │ │ │ │ └── Tours.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ └── package.json │ │ └── final │ │ │ ├── src │ │ │ ├── Loading.jsx │ │ │ ├── main.jsx │ │ │ └── Tours.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ └── package.json │ ├── 07-slider │ │ ├── starter │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── final │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ ├── App.jsx │ │ │ └── main.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 06-tabs │ │ ├── starter │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── final │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ ├── main.jsx │ │ │ └── JobInfo.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 01-birthday-buddy │ │ ├── final │ │ │ ├── src │ │ │ │ ├── assets │ │ │ │ │ └── example.png │ │ │ │ ├── main.jsx │ │ │ │ ├── Person.jsx │ │ │ │ └── List.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ └── package.json │ │ └── starter │ │ │ ├── src │ │ │ ├── assets │ │ │ │ └── example.png │ │ │ ├── main.jsx │ │ │ ├── Person.jsx │ │ │ └── List.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ └── package.json │ ├── 11-navbar │ │ ├── final │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── starter │ │ │ ├── src │ │ │ ├── App.jsx │ │ │ └── main.jsx │ │ │ ├── vite.config.js │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 12-sidebar │ │ ├── final │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ │ ├── App.jsx │ │ │ │ ├── main.jsx │ │ │ │ └── Home.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── starter │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ ├── App.jsx │ │ │ ├── main.jsx │ │ │ └── Home.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 14-cart │ │ ├── final │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ │ ├── actions.js │ │ │ │ ├── utils.js │ │ │ │ └── main.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── starter │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ ├── assets │ │ │ │ └── actions.js │ │ │ ├── main.jsx │ │ │ ├── utils.js │ │ │ └── App.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ ├── 08-lorem-ipsum │ │ ├── final │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ │ └── main.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ │ └── starter │ │ │ ├── vite.config.js │ │ │ ├── src │ │ │ └── main.jsx │ │ │ ├── .gitignore │ │ │ └── index.html │ └── 10-grocery-bud │ │ ├── final │ │ ├── vite.config.js │ │ ├── src │ │ │ ├── main.jsx │ │ │ └── Items.jsx │ │ ├── .gitignore │ │ └── index.html │ │ └── starter │ │ ├── vite.config.js │ │ ├── src │ │ └── main.jsx │ │ ├── .gitignore │ │ └── index.html ├── 12-comfy-store │ ├── final │ │ ├── postcss.config.js │ │ ├── src │ │ │ ├── assets │ │ │ │ ├── hero1.webp │ │ │ │ ├── hero2.webp │ │ │ │ ├── hero3.webp │ │ │ │ └── hero4.webp │ │ │ ├── index.css │ │ │ ├── components │ │ │ │ ├── Loading.jsx │ │ │ │ ├── SectionTitle.jsx │ │ │ │ ├── ErrorElement.jsx │ │ │ │ ├── FeaturedProducts.jsx │ │ │ │ ├── CartItemsList.jsx │ │ │ │ └── FormInput.jsx │ │ │ ├── store.js │ │ │ └── main.jsx │ │ ├── vite.config.js │ │ ├── tailwind.config.cjs │ │ ├── .gitignore │ │ └── index.html │ └── project-assets │ │ ├── hero1.webp │ │ ├── hero2.webp │ │ ├── hero3.webp │ │ └── hero4.webp ├── 06-react-query │ ├── final │ │ ├── src │ │ │ ├── utils.js │ │ │ ├── App.jsx │ │ │ └── main.jsx │ │ ├── vite.config.js │ │ ├── .gitignore │ │ └── index.html │ ├── starter │ │ ├── src │ │ │ ├── utils.js │ │ │ ├── App.jsx │ │ │ └── main.jsx │ │ ├── vite.config.js │ │ ├── .gitignore │ │ └── index.html │ ├── server │ │ ├── tasks.json │ │ └── package.json │ └── .gitignore ├── global-context │ ├── vite.config.js │ ├── src │ │ ├── main.jsx │ │ └── context.jsx │ ├── .gitignore │ ├── index.html │ └── README.md ├── 07-unsplash-images │ └── final │ │ ├── vite.config.js │ │ ├── src │ │ └── App.jsx │ │ ├── .gitignore │ │ └── index.html ├── w-assets │ └── global-context-example │ │ ├── vite.config.js │ │ ├── src │ │ ├── main.jsx │ │ └── context.jsx │ │ ├── .gitignore │ │ ├── index.html │ │ └── package.json └── .gitignore ├── src ├── public │ └── robots.txt ├── components │ ├── layout │ │ ├── Layout.module.css │ │ └── Layout.js │ └── meetups │ │ └── MeetupList.module.css ├── index.css ├── index.js ├── setupTests.js ├── App.css └── reportWebVitals.js ├── src5 ├── images │ ├── image1.jpg │ ├── image2.jpg │ └── image3.jpg ├── Book.js └── books.js ├── src3 ├── components │ ├── UI │ │ ├── Card.module.css │ │ ├── Card.js │ │ ├── Button.module.css │ │ └── Button.js │ └── Users │ │ ├── UsersList.module.css │ │ ├── UsersList.js │ │ └── AddUser.module.css ├── index.css ├── setupTests.js ├── reportWebVitals.js └── index.js └── src sample project 2 ├── components ├── CourseGoals │ ├── CourseGoalList │ │ └── CourseGoalList.css │ └── CourseGoalItem │ │ ├── CourseGoalItem.css │ │ └── CourseGoalItem.js └── UI │ ├── Card.module.css │ └── Card.js ├── index.css ├── index.js ├── setupTests.js ├── App.css └── reportWebVitals.js /src4/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react-course-v3-main/09-mixmaster/final/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /src/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src5/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/src5/images/image1.jpg -------------------------------------------------------------------------------- /src5/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/src5/images/image2.jpg -------------------------------------------------------------------------------- /src5/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/src5/images/image3.jpg -------------------------------------------------------------------------------- /src/components/layout/Layout.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | margin: 3rem auto; 3 | width: 90%; 4 | max-width: 40rem; 5 | } -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/04-project-structure/final/Navbar/index.jsx: -------------------------------------------------------------------------------- 1 | export { default } from './Navbar'; 2 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/meetups/MeetupList.module.css: -------------------------------------------------------------------------------- 1 | .list { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/05-leverage-javascript/starter/README.md: -------------------------------------------------------------------------------- 1 | In this section, we will create all files from scratch. 2 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/project-assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "tailwindcss": "^3.3.5" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src3/components/UI/Card.module.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | background: white; 3 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); 4 | border-radius: 10px; 5 | } -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

Contentful Starter

; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /src sample project 2/components/CourseGoals/CourseGoalList/CourseGoalList.css: -------------------------------------------------------------------------------- 1 | .goal-list { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/04-project-structure/final/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | background: blue; 3 | color: white; 4 | } 5 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

Menu Starter

; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/axios/global.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | axios.defaults.headers.common["Accept"] = "application/json"; 4 | -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/vite-starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | function App() { 2 | return

Redux Toolkit

; 3 | } 4 | export default App; 5 | -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/final/axios/global.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | axios.defaults.headers.common['Accept'] = 'application/json'; 4 | -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/01-fundamentals/public/favicon.ico -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/01-fundamentals/public/logo192.png -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/01-fundamentals/public/logo512.png -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/03-reviews/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

Reviews Starter

; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/04-accordion/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

Accordion Starter

; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/final/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/src/images/book-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/01-fundamentals/src/images/book-1.jpg -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/src/images/book-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/01-fundamentals/src/images/book-2.jpg -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/src/images/book-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/01-fundamentals/src/images/book-3.jpg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/13-strapi-submenus/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

Strapi Starter

; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/05-axios-tutorial/public/favicon.ico -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/05-axios-tutorial/public/logo192.png -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/05-axios-tutorial/public/logo512.png -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src sample project 2/components/UI/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | background-color: white; 3 | border-radius: 6px; 4 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 5 | } -------------------------------------------------------------------------------- /src sample project 2/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/public/images/book-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/01-fundamentals/public/images/book-1.jpg -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/project-assets/hero1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/12-comfy-store/project-assets/hero1.webp -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/project-assets/hero2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/12-comfy-store/project-assets/hero2.webp -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/project-assets/hero3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/12-comfy-store/project-assets/hero3.webp -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/project-assets/hero4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/12-comfy-store/project-assets/hero4.webp -------------------------------------------------------------------------------- /src4/components/UI/Card.module.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | background: linear-gradient(red, yellow, green); 3 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); 4 | border-radius: 10px; 5 | } -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/09-color-generator/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return

Color Generator Starter

; 3 | }; 4 | export default App; 5 | -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/src/assets/hero1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/12-comfy-store/final/src/assets/hero1.webp -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/src/assets/hero2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/12-comfy-store/final/src/assets/hero2.webp -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/src/assets/hero3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/12-comfy-store/final/src/assets/hero3.webp -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/src/assets/hero4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/12-comfy-store/final/src/assets/hero4.webp -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/public/favicon.ico -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/public/logo192.png -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/public/logo512.png -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/final/src/assets/tours.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/08-contentful-cms/final/src/assets/tours.png -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/images/main.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/src/images/main.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/final/src/assets/birthday.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/08-contentful-cms/final/src/assets/birthday.png -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/final/src/assets/reviews.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/08-contentful-cms/final/src/assets/reviews.png -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/starter/src/assets/tours.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/08-contentful-cms/starter/src/assets/tours.png -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/images/about.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/src/images/about.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/images/tour-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/src/images/tour-1.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/images/tour-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/src/images/tour-2.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/images/tour-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/src/images/tour-3.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/images/tour-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/src/images/tour-4.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/images/tour-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/src/images/tour-5.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/images/tour-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/final/src/images/tour-6.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/05-leverage-javascript/starter/People.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const People = () => { 4 | return
People
; 5 | }; 6 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/02-tours/starter/src/Loading.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Loading = () => { 4 | return
; 5 | }; 6 | -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/final/src/assets/questions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/08-contentful-cms/final/src/assets/questions.png -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/starter/src/assets/birthday.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/08-contentful-cms/starter/src/assets/birthday.png -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/starter/src/assets/questions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/08-contentful-cms/starter/src/assets/questions.png -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/starter/src/assets/reviews.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/08-contentful-cms/starter/src/assets/reviews.png -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/11-redux-toolkit-tutorial/final/public/favicon.ico -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/11-redux-toolkit-tutorial/final/public/logo192.png -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/11-redux-toolkit-tutorial/final/public/logo512.png -------------------------------------------------------------------------------- /src3/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | 4 | } 5 | html{ 6 | font-family: sans-serif; 7 | background: #1f1f1f; 8 | } 9 | body{ 10 | margin: 0; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/main.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/main.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/11-redux-toolkit-tutorial/starter/public/favicon.ico -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/starter/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/11-redux-toolkit-tutorial/starter/public/logo192.png -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/starter/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/11-redux-toolkit-tutorial/starter/public/logo512.png -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/about.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/about.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/favicon.ico -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/tour-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/tour-1.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/tour-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/tour-2.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/tour-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/tour-3.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/tour-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/tour-4.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/tour-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/tour-5.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/images/tour-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/02-backroads-project/backroads-html/images/tour-6.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/04-project-structure/final/Example/FirstComponent.jsx: -------------------------------------------------------------------------------- 1 | const FirstComponent = () => { 2 | return
FirstComponent
; 3 | }; 4 | export default FirstComponent; 5 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/04-project-structure/final/Example/SecondComponent.jsx: -------------------------------------------------------------------------------- 1 | const SecondComponent = () => { 2 | return
SecondComponent
; 3 | }; 4 | export default SecondComponent; 5 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/06-react-query/starter/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/03-reviews/final/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/03-reviews/final/src/assets/example.png -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/03-reviews/starter/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/03-reviews/starter/src/assets/example.png -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-1.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-10.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-2.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-3.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-4.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-5.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-6.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-7.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-8.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/final/public/images/item-9.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-1.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-2.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-3.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-4.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-5.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-6.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-7.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-8.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-9.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/06-tabs/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | const url = 'https://course-api.com/react-tabs-project'; 2 | 3 | const App = () => { 4 | return

Tabs Starter

; 5 | }; 6 | export default App; 7 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/05-menu/starter/public/images/item-10.jpeg -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/01-birthday-buddy/final/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/01-birthday-buddy/final/src/assets/example.png -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/global-context/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/01-birthday-buddy/starter/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/React-JS-Project/HEAD/react-course-v3-main/04-fundamental-projects/01-birthday-buddy/starter/src/assets/example.png -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/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 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/project-assets/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | 10 | -------------------------------------------------------------------------------- /src sample project 2/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Card.module.css"; 3 | 4 | function Card(props) { 5 | return
{props.children}
; 6 | } 7 | 8 | export default Card; 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import "./index.css"; 5 | import App from "./App"; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | root.render(); 9 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/11-navbar/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Navbar from "./Navbar"; 2 | 3 | const App = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | export default App; 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Starter from "./tutorial/10-useReducer/starter/01-useReducer"; 2 | 3 | function App() { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /src sample project 2/components/CourseGoals/CourseGoalItem/CourseGoalItem.css: -------------------------------------------------------------------------------- 1 | .goal-item { 2 | margin: 1rem 0; 3 | background: #8b005d; 4 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); 5 | color: white; 6 | padding: 1rem 2rem; 7 | cursor: pointer; 8 | } 9 | -------------------------------------------------------------------------------- /src sample project 2/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import "./index.css"; 5 | import App from "./App"; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | root.render(); 9 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/components/Title.js: -------------------------------------------------------------------------------- 1 | const Title = () => { 2 | return ( 3 |
4 |

5 | axios tutorial 6 |

7 |
8 | ); 9 | }; 10 | export default Title; 11 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/final/components/Title.js: -------------------------------------------------------------------------------- 1 | const Title = () => { 2 | return ( 3 |
4 |

5 | axios tutorial 6 |

7 |
8 | ); 9 | }; 10 | export default Title; 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /src3/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src4/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/examples/custom.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const authFetch = axios.create({ 4 | baseURL: "https://course-api.com", 5 | headers: { 6 | Accept: "application/json", 7 | }, 8 | }); 9 | 10 | export default authFetch; 11 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | }; 10 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/final/axios/custom.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const authFetch = axios.create({ 4 | baseURL: 'https://course-api.com', 5 | headers: { 6 | Accept: 'application/json', 7 | }, 8 | }); 9 | 10 | export default authFetch; 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /src sample project 2/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src3/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Card.module.css"; 3 | 4 | const Card = (props) => { 5 | return ( 6 |
{props.children}
7 | ); 8 | }; 9 | 10 | export default Card; 11 | -------------------------------------------------------------------------------- /src4/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Card.module.css"; 3 | 4 | const Card = (props) => { 5 | return ( 6 |
{props.children}
7 | ); 8 | }; 9 | 10 | export default Card; 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/src/components/Loading.jsx: -------------------------------------------------------------------------------- 1 | const Loading = () => { 2 | return ( 3 |
4 | 5 |
6 | ); 7 | }; 8 | export default Loading; 9 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #goals { 2 | width: 35rem; 3 | max-width: 90%; 4 | margin: 3rem auto; 5 | } 6 | 7 | #goal-form { 8 | width: 30rem; 9 | max-width: 90%; 10 | margin: 3rem auto; 11 | padding: 2rem; 12 | box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); 13 | border-radius: 10px; 14 | } 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/App.js: -------------------------------------------------------------------------------- 1 | import Title from "./components/Title"; 2 | import Setup from "./examples/6-interceptors"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 | <Setup /> 9 | </main> 10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/components/PageLink.js: -------------------------------------------------------------------------------- 1 | const PageLink = ({ link, itemClass }) => { 2 | return ( 3 | <li key={link.id}> 4 | <a href={link.href} className={itemClass}> 5 | {link.text} 6 | </a> 7 | </li> 8 | ) 9 | } 10 | export default PageLink 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /src sample project 2/App.css: -------------------------------------------------------------------------------- 1 | #goals { 2 | width: 35rem; 3 | max-width: 90%; 4 | margin: 3rem auto; 5 | } 6 | 7 | #goal-form { 8 | width: 30rem; 9 | max-width: 90%; 10 | margin: 3rem auto; 11 | padding: 2rem; 12 | box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); 13 | border-radius: 10px; 14 | } 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <App /> 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/11-performance/final/03-hooks/Person.jsx: -------------------------------------------------------------------------------- 1 | const Person = ({ name, id, removePerson }) => { 2 | return ( 3 | <div> 4 | <h4>{name}</h4> 5 | <button onClick={() => removePerson(id)}>remove</button> 6 | </div> 7 | ); 8 | }; 9 | export default Person; 10 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/14-cart/starter/src/assets/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 DISPLAYING_ITEMS = "DISPLAYING_ITEMS"; 7 | -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/src/components/SectionTitle.jsx: -------------------------------------------------------------------------------- 1 | const SectionTitle = ({ text }) => { 2 | return ( 3 | <div className='border-b border-base-300 pb-5'> 4 | <h2 className='text-3xl font-medium tracking-wider capitalize'>{text}</h2> 5 | </div> 6 | ); 7 | }; 8 | export default SectionTitle; 9 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/final/src/components/SectionTitle.jsx: -------------------------------------------------------------------------------- 1 | const SectionTitle = ({ text }) => { 2 | return ( 3 | <div className='border-b border-gray-200 pb-5'> 4 | <h2 className='text-3xl font-medium tracking-wider capitalize'>{text}</h2> 5 | </div> 6 | ); 7 | }; 8 | export default SectionTitle; 9 | -------------------------------------------------------------------------------- /react-course-v3-main/global-context/src/main.jsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App.jsx"; 3 | import "./index.css"; 4 | import AppContext from "./context.jsx"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | <AppContext> 8 | <App /> 9 | </AppContext> 10 | ); 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <main> 7 | <Carousel /> 8 | {/* <SlickCarousel /> */} 9 | </main> 10 | ); 11 | }; 12 | export default App; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /src3/components/Users/UsersList.module.css: -------------------------------------------------------------------------------- 1 | .users { 2 | margin: 2rem auto; 3 | width: 90%; 4 | max-width: 40rem; 5 | } 6 | 7 | .users ul { 8 | list-style: none; 9 | padding: 1rem; 10 | } 11 | 12 | .users li { 13 | border: 1px solid #ccc; 14 | margin: 0.5rem 0; 15 | padding: 0.5rem; 16 | } -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /src4/components/UI/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | font: inherit; 3 | border: 1px solid #4f005f; 4 | background: black; 5 | color: white; 6 | padding: 0.25rem 1rem; 7 | cursor: pointer; 8 | width: 100%; 9 | margin-top: 30px; 10 | } 11 | 12 | 13 | 14 | .button:focus { 15 | outline: none; 16 | } -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/src/Book.js: -------------------------------------------------------------------------------- 1 | const Book = (props) => { 2 | const { img, title, author } = props; 3 | 4 | return ( 5 | <article className='book'> 6 | <img src={img} alt={title} /> 7 | <h2>{title}</h2> 8 | 9 | <h4>{author} </h4> 10 | </article> 11 | ); 12 | }; 13 | 14 | export default Book; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <Home /> 9 | <Modal /> 10 | <Sidebar /> 11 | </> 12 | ); 13 | }; 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/components/SocialLink.js: -------------------------------------------------------------------------------- 1 | const SocialLink = ({ itemClass, href, icon }) => { 2 | return ( 3 | <li> 4 | <a href={href} target='_blank' rel='noreferrer' className={itemClass}> 5 | <i className={icon}></i> 6 | </a> 7 | </li> 8 | ) 9 | } 10 | export default SocialLink 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode> 10 | ); 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/12-sidebar/starter/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 | <Home /> 9 | <Modal /> 10 | <Sidebar /> 11 | </> 12 | ); 13 | }; 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/src/components/SectionTitle.jsx: -------------------------------------------------------------------------------- 1 | const SectionTitle = ({ text }) => { 2 | return ( 3 | <div className="border-b border-gray-200 pb-5"> 4 | <h2 className="text-3xl font-medium tracking-wider capitalize">{text}</h2> 5 | </div> 6 | ); 7 | }; 8 | 9 | export default SectionTitle; 10 | -------------------------------------------------------------------------------- /react-course-v3-main/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 <h4 className='font-bold text-4xl'>There was an error...</h4>; 8 | }; 9 | export default ErrorElement; 10 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 7 | <App /> 8 | </React.StrictMode> 9 | ); 10 | -------------------------------------------------------------------------------- /react-course-v3-main/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 <h2>{error.message}</h2>; 7 | return <h2>there was an error...</h2>; 8 | }; 9 | export default SinglePageError; 10 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 6 | {people.map((person) => { 7 | return <Item key={person.id} {...person} />; 8 | })} 9 | </div> 10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode>, 10 | ) 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode> 10 | ); 11 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/08-custom-hooks/starter/useToggle.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const useToggle = (defaultValue) => { 4 | const [show, setShow] = useState(defaultValue); 5 | const toggle = () => { 6 | setShow(!show); 7 | }; 8 | return { show, toggle }; 9 | }; 10 | 11 | export default useToggle; 12 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 6 | {people.map((person) => { 7 | return <Person key={person.id} {...person} />; 8 | })} 9 | </div> 10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 6 | {people.map((person) => { 7 | return <Person key={person.id} {...person} />; 8 | })} 9 | </div> 10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/final/src/components/SkillsCard.jsx: -------------------------------------------------------------------------------- 1 | const SkillsCard = ({ icon, title, text }) => { 2 | return ( 3 | <article> 4 | <span>{icon}</span> 5 | <h4 className='mt-6 font-bold'>{title}</h4> 6 | <p className='mt-2 text-slate-500'>{text}</p> 7 | </article> 8 | ); 9 | }; 10 | export default SkillsCard; 11 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/starter/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 6 | {people.map((person) => { 7 | return <Person key={person.id} {...person} />; 8 | })} 9 | </div> 10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <main> 8 | <ThemeToggle /> 9 | <SearchForm /> 10 | <Gallery /> 11 | </main> 12 | ); 13 | }; 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 7 | <FirstComponent /> 8 | <SecondComponent /> 9 | </div> 10 | ); 11 | }; 12 | export default Example; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 6 | {people.map((person) => { 7 | return <Person key={person.id} {...person} />; 8 | })} 9 | </div> 10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | import { AppProvider } from "./context"; 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | <AppProvider> 8 | <App /> 9 | </AppProvider> 10 | ); 11 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/src/components/SkillsCard.jsx: -------------------------------------------------------------------------------- 1 | const SkillsCard = ({ icon, title, text }) => { 2 | return ( 3 | <article> 4 | <span>{icon}</span> 5 | <h4 className="mt-6 font-bold">{title}</h4> 6 | <p className="mt-2 text-slate-500">{text}</p> 7 | </article> 8 | ); 9 | }; 10 | 11 | export default SkillsCard; 12 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /src/components/layout/Layout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Layout.module.css"; 3 | import MainNavigation from "./MainNavigation"; 4 | 5 | function Layout(props) { 6 | return ( 7 | <div> 8 | <MainNavigation /> 9 | <main className={classes.main}>{props.children}</main> 10 | </div> 11 | ); 12 | } 13 | 14 | export default Layout; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 6 | {people.map((person) => { 7 | return <Person key={person.id} {...person} />; 8 | })} 9 | </div> 10 | ); 11 | }; 12 | export default List; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/01-birthday-buddy/final/src/Person.jsx: -------------------------------------------------------------------------------- 1 | const Person = ({ image, name, age }) => { 2 | return ( 3 | <article className='person'> 4 | <img src={image} alt={name} className='img' /> 5 | <div> 6 | <h4>{name}</h4> 7 | <p>{age} years</p> 8 | </div> 9 | </article> 10 | ); 11 | }; 12 | export default Person; 13 | -------------------------------------------------------------------------------- /src4/components/UI/Button.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classes from "./Button.module.css"; 3 | 4 | const Button = (props) => { 5 | return ( 6 | <button 7 | className={classes.button} 8 | type={props.type || "button"} 9 | onClick={props.onClick} 10 | > 11 | {props.children} 12 | </button> 13 | ); 14 | }; 15 | 16 | export default Button; 17 | -------------------------------------------------------------------------------- /src5/Book.js: -------------------------------------------------------------------------------- 1 | const Book = (props) => { 2 | const { img, title, author, index } = props; 3 | console.log(props); 4 | return ( 5 | <article className="book"> 6 | <img src={img} alt={title} /> 7 | <h2>{title}</h2> 8 | <h4>{author}</h4> 9 | <span className="number">{`# ${index + 1}`}</span> 10 | </article> 11 | ); 12 | }; 13 | 14 | export default Book; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <section> 7 | {people.map((person) => { 8 | return <Person key={person.id} {...person} />; 9 | })} 10 | </section> 11 | ); 12 | }; 13 | 14 | export default List; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/01-birthday-buddy/starter/src/Person.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Person = ({image,name,age}) => { 4 | return ( 5 | <article className='person'> 6 | <img src={image} alt={name} className='img' /> 7 | <div> 8 | <h4>{name}</h4> 9 | <p>{age} years</p> 10 | </div> 11 | </article> 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/14-cart/starter/src/utils.js: -------------------------------------------------------------------------------- 1 | // utils.js 2 | export const getTotals = (cart) => { 3 | let totalAmount = 0; 4 | let totalCost = 0; 5 | 6 | for (let { amount, price } of cart.values()) { 7 | totalAmount += amount; 8 | totalCost += amount * price; // Fix the calculation here 9 | } 10 | 11 | return { totalAmount, totalCost }; 12 | }; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <main> 9 | <Questions questions={questions} /> 10 | </main> 11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 9 | <App /> 10 | </React.StrictMode> 11 | ); 12 | -------------------------------------------------------------------------------- /src3/components/UI/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | font: inherit; 3 | border: 1px solid #4f005f; 4 | background: #4f005f; 5 | color: white; 6 | padding: 0.25rem 1rem; 7 | cursor: pointer; 8 | } 9 | 10 | .button:hover, 11 | .button:active { 12 | background: #741188; 13 | border-color: #741188; 14 | } 15 | 16 | .button:focus { 17 | outline: none; 18 | } -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 9 | <App /> 10 | </React.StrictMode> 11 | ); 12 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <section className='section-center'> 8 | <ToastContainer position='top-center' /> 9 | <Form /> 10 | <Items /> 11 | </section> 12 | ); 13 | }; 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div className='pt-24'> 7 | <SectionTitle text='featured products' /> 8 | <ProductsGrid /> 9 | </div> 10 | ); 11 | }; 12 | export default FeaturedProducts; 13 | -------------------------------------------------------------------------------- /react-course-v3-main/global-context/.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 | -------------------------------------------------------------------------------- /src3/components/UI/Button.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import classes from "./Button.module.css"; 3 | 4 | const Button = (props) => { 5 | return ( 6 | <button 7 | className={classes.button} 8 | type={props.type || "button"} 9 | onClick={props.onClick} 10 | > 11 | {props.children} 12 | </button> 13 | ); 14 | }; 15 | 16 | export default Button; 17 | -------------------------------------------------------------------------------- /src4/components/Game/NumberList.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | grid-template-columns: auto auto auto auto auto; 4 | gap: 50px; 5 | padding: 10px; 6 | } 7 | 8 | .container > div { 9 | background-color: rgba(255, 255, 255, 0.8); 10 | text-align: center; 11 | padding: 20px 0; 12 | font-size: 30px; 13 | cursor:pointer; 14 | border-radius: 7px; 15 | } -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/05-leverage-javascript/starter/List.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { people } from "../../../data"; 3 | import { Person } from "./Person"; 4 | 5 | export const List = () => { 6 | return ( 7 | <div> 8 | {people.map((person) => { 9 | return <Person key={person.id} {...person} />; 10 | })} 11 | </div> 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/01-birthday-buddy/starter/src/List.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Person} from './Person' 3 | 4 | export const List = ({people}) => { 5 | return ( 6 | <section> 7 | 8 | {people.map((person)=>{ 9 | 10 | return <Person key={person.id} {...person} /> 11 | 12 | })} 13 | </section> 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div className='section-center'> 7 | {items.map((menuItem) => { 8 | return <MenuItem key={menuItem.id} {...menuItem} />; 9 | })} 10 | </div> 11 | ); 12 | }; 13 | 14 | export default Menu; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/06-react-query/starter/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 | <section className="section-center"> 8 | <ToastContainer position="top-center" /> 9 | <Form /> 10 | <Items /> 11 | </section> 12 | ); 13 | }; 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 12 | <App /> 13 | </React.StrictMode> 14 | ); 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <AppContext> 9 | <App /> 10 | </AppContext> 11 | </React.StrictMode> 12 | ); 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <main> 9 | <Navbar /> 10 | <Hero /> 11 | <Sidebar /> 12 | <Submenu /> 13 | </main> 14 | ); 15 | }; 16 | export default App; 17 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/.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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 6 | {people.map((person) => { 7 | return <Item key={person.id} {...person} removePerson={removePerson} />; 8 | })} 9 | </div> 10 | ); 11 | }; 12 | export default memo(List); 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <div> 10 | <h4>{name}</h4> 11 | </div> 12 | ); 13 | }; 14 | export default Person; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <AppProvider> 9 | <App /> 10 | </AppProvider> 11 | </React.StrictMode> 12 | ); 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src3/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src4/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 9 | <AppProvider> 10 | <App /> 11 | </AppProvider> 12 | </React.StrictMode> 13 | ); 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <React.StrictMode> 8 | <AppProvider> 9 | <App /> 10 | </AppProvider> 11 | </React.StrictMode> 12 | ); 13 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/12-sidebar/starter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React, { StrictMode } from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | import { AppProvider } from "./context"; 6 | 7 | ReactDOM.createRoot(document.getElementById("root")).render( 8 | <StrictMode> 9 | <AppProvider> 10 | <App /> 11 | </AppProvider> 12 | </StrictMode> 13 | ); 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | <button 6 | className='btn' 7 | onClick={() => setCount(count + 1)} 8 | style={{ marginBottom: '1rem' }} 9 | > 10 | count {count} 11 | </button> 12 | ); 13 | }; 14 | export default Counter; 15 | -------------------------------------------------------------------------------- /src sample project 2/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/global-context/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>Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/06-react-query/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Query 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Comfy Store 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Advanced Topics 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/06-react-query/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Query 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/09-mixmaster/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MixMaster Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/.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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/06-tabs/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabs 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/14-cart/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cart 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/07-unsplash-images/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Unsplash Images 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contentful CMS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/02-tours/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tours 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/07-slider/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/11-navbar/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbar 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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* -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contentful Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | web portfolio 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/w-assets/global-context-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/04-project-structure/starter/Person.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Person = ({persons}) => { 4 | console.log(persons); 5 | return ( 6 |
7 | {name} 8 |
9 |

{name}

10 |

{age} years

11 |
12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/08-custom-hooks/starter/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/03-reviews/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reviews 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/04-accordion/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Questions 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/06-tabs/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabs Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/12-sidebar/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Context 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/14-cart/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cart Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | import { store } from "./store"; 6 | import { Provider } from "react-redux"; 7 | 8 | const container = document.getElementById("root"); 9 | const root = createRoot(container); 10 | 11 | root.render( 12 | 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/vite-final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/vite-starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/02-tours/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tours Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/07-slider/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/11-navbar/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbar Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/03-reviews/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reviews Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/04-accordion/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Accordion Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/12-sidebar/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Context Starter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/04-accordion/final-alternative/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Questions 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebDev Portfolio 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-course-v3-main/global-context/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /src3/components/Users/UsersList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "../UI/Card"; 3 | import classes from "./UsersList.module.css"; 4 | 5 | const UsersList = (props) => { 6 | return ( 7 | 8 |
    9 | {props.users.map((user) => ( 10 |
  • 11 | {user.name} ({user.age} years old) 12 |
    • 13 | ))} 14 |
15 | 16 | ); 17 | }; 18 | 19 | export default UsersList; 20 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Navbar from "./components/Navbar"; 2 | import Hero from "./components/hero"; 3 | import Skills from "./components/Skills"; 4 | import About from "./components/About"; 5 | import Projects from "./components/Projects"; 6 | 7 | const App = () => { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /react-course-v3-main/global-context/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 = (props) => { 8 | const [name, setName] = useState("Moemen"); 9 | return ( 10 | 11 | {props.children} 12 | 13 | ); 14 | }; 15 | 16 | export default AppContext; 17 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/examples/6-interceptors.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import authFetch from "../axios/interceptors"; 3 | 4 | const Interceptors = () => { 5 | const fetchData = async () => { 6 | try { 7 | const resp = await authFetch("/react-store-products"); 8 | } catch (error) {} 9 | }; 10 | 11 | useEffect(() => { 12 | fetchData(); 13 | }, []); 14 | 15 | return

interceptors

; 16 | }; 17 | export default Interceptors; 18 | -------------------------------------------------------------------------------- /react-course-v3-main/10-tailwind-portfolio/my-project/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | 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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/02-tours/starter/src/Tours.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Tour } from "./Tour"; 3 | 4 | export const Tours = ({ tours, RemoveTour }) => { 5 | return ( 6 |
7 |

our tours

8 |
9 |
10 | {tours.map((tour) => { 11 | return ; 12 | })} 13 |
14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/09-context-api/starter/NavLinks.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import UserContainer from "./UserContainer"; 3 | 4 | const NavLinks = () => { 5 | return ( 6 |
7 |
    8 |
  • 9 | home 10 |
    • 11 |
  • 12 | about 13 |
    • 14 |
15 | 16 |
17 | ); 18 | }; 19 | 20 | export default NavLinks; 21 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | } -------------------------------------------------------------------------------- /src sample project 2/components/CourseGoals/CourseGoalItem/CourseGoalItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './CourseGoalItem.css'; 4 | 5 | const CourseGoalItem = props => { 6 | // const [deleteText, setDeleteText] = useState(''); 7 | 8 | const deleteHandler = () => { 9 | // setDeleteText('(Deleted!)'); 10 | props.onDelete(props.id); 11 | }; 12 | 13 | return ( 14 |
  • 15 | {props.children} 16 |
    • 17 | ); 18 | }; 19 | 20 | export default CourseGoalItem; 21 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/05-leverage-javascript/starter/Person.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import avatar from "../../../assets/default-avatar.svg"; 3 | 4 | export const Person = ({ name, nickName = "shakeAndBake", images }) => { 5 | //const img = images?.[0].small?.url || avatar; 6 | const img = images?.[0].small?.url ?? avatar; 7 | return ( 8 | <div> 9 | <img src={img} alt={name} style={{ width: "50px" }} /> 10 | <h4>{name}</h4> 11 | <p>Nickname : {nickName}</p> 12 | </div> 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/components/Hero.js: -------------------------------------------------------------------------------- 1 | const Hero = () => { 2 | return ( 3 | <section className='hero' id='home'> 4 | <div className='hero-banner'> 5 | <h1>backroads app</h1> 6 | <p> 7 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae 8 | explicabo debitis est autem dicta. 9 | </p> 10 | <a href='#tours' className='btn hero-btn '> 11 | explore tours 12 | </a> 13 | </div> 14 | </section> 15 | ) 16 | } 17 | export default Hero 18 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/09-context-api/final/prop-drilling/NavLinks.jsx: -------------------------------------------------------------------------------- 1 | import UserContainer from './UserContainer'; 2 | 3 | const NavLinks = ({ user, logout }) => { 4 | return ( 5 | <div className='nav-container'> 6 | <ul className='nav-links'> 7 | <li> 8 | <a href='#'>home</a> 9 | </li> 10 | <li> 11 | <a href='#'>about</a> 12 | </li> 13 | </ul> 14 | <UserContainer user={user} logout={logout} /> 15 | </div> 16 | ); 17 | }; 18 | export default NavLinks; 19 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/09-context-api/final/prop-drilling/UserContainer.jsx: -------------------------------------------------------------------------------- 1 | const UserContainer = ({ user, logout }) => { 2 | return ( 3 | <div className='user-container'> 4 | {user ? ( 5 | <> 6 | <p>Hello There, {user.name.toUpperCase()}</p> 7 | <button type='button' className='btn' onClick={logout}> 8 | logout 9 | </button> 10 | </> 11 | ) : ( 12 | <p>Please Login</p> 13 | )} 14 | </div> 15 | ); 16 | }; 17 | export default UserContainer; 18 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/12-sidebar/final/src/Home.jsx: -------------------------------------------------------------------------------- 1 | import { useGlobalContext } from './context'; 2 | import { FaBars } from 'react-icons/fa'; 3 | 4 | const Home = () => { 5 | const { openSidebar, openModal } = useGlobalContext(); 6 | 7 | return ( 8 | <main> 9 | <button onClick={openSidebar} className='sidebar-toggle'> 10 | <FaBars /> 11 | </button> 12 | <button onClick={openModal} className='btn'> 13 | show modal 14 | </button> 15 | </main> 16 | ); 17 | }; 18 | export default Home; 19 | -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/src/components/FormInput.jsx: -------------------------------------------------------------------------------- 1 | const FormInput = ({ label, name, type, defaultValue, size }) => { 2 | return ( 3 | <div className='form-control'> 4 | <label htmlFor={name} className='label'> 5 | <span className='label-text capitalize'>{label}</span> 6 | </label> 7 | <input 8 | type={type} 9 | name={name} 10 | defaultValue={defaultValue} 11 | className={`input input-bordered ${size}`} 12 | /> 13 | </div> 14 | ); 15 | }; 16 | export default FormInput; 17 | -------------------------------------------------------------------------------- /react-course-v3-main/w-assets/global-context-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "global-context", 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 | } -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/02-tours/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-project", 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.27", 17 | "@types/react-dom": "^18.0.10", 18 | "@vitejs/plugin-react": "^3.1.0", 19 | "vite": "^4.1.0" 20 | } 21 | } -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/02-tours/starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-project", 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.27", 17 | "@types/react-dom": "^18.0.10", 18 | "@vitejs/plugin-react": "^3.1.0", 19 | "vite": "^4.1.0" 20 | } 21 | } -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-project", 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.27", 17 | "@types/react-dom": "^18.0.10", 18 | "@vitejs/plugin-react": "^3.1.0", 19 | "vite": "^4.1.0" 20 | } 21 | } -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/05-menu/starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-project", 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.27", 17 | "@types/react-dom": "^18.0.10", 18 | "@vitejs/plugin-react": "^3.1.0", 19 | "vite": "^4.1.0" 20 | } 21 | } -------------------------------------------------------------------------------- /react-course-v3-main/12-comfy-store/final/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App.jsx'; 4 | 5 | import 'react-toastify/dist/ReactToastify.css'; 6 | import './index.css'; 7 | import { ToastContainer } from 'react-toastify'; 8 | import { store } from './store.js'; 9 | import { Provider } from 'react-redux'; 10 | 11 | ReactDOM.createRoot(document.getElementById('root')).render( 12 | <Provider store={store}> 13 | <App /> 14 | <ToastContainer position='top-center' /> 15 | </Provider> 16 | ); 17 | -------------------------------------------------------------------------------- /src3/components/Users/AddUser.module.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2rem auto; 3 | padding: 1rem; 4 | width: 90%; 5 | max-width: 40rem; 6 | } 7 | 8 | .input label { 9 | display: block; 10 | font-weight: bold; 11 | margin-bottom: 0.5rem; 12 | } 13 | 14 | .input input { 15 | font: inherit; 16 | display: block; 17 | width: 100%; 18 | border: 1px solid #ccc; 19 | padding: 0.15rem; 20 | margin-bottom: 0.5rem; 21 | } 22 | 23 | .input input:focus { 24 | outline: none; 25 | border-color: #4f005f; 26 | } 27 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/04-project-structure/starter/List.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Person} from './Person' 3 | 4 | export const List = ({people}) => { 5 | { console.log(people)} 6 | return ( 7 | <section style={{ display:"flex",alignItems:"flex-start",justifyContent:"center",flexDirection:'column',gap:'1rem',padding:"0 20px" }}> 8 | 9 | {/* {people.map((person)=>{ 10 | 11 | return <Person key={person.id} {...person} /> 12 | 13 | })} */} 14 | </section> 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /react-course-v3-main/01-fundamentals/src/books.js: -------------------------------------------------------------------------------- 1 | import img1 from './images/book-1.jpg'; 2 | import img2 from './images/book-2.jpg'; 3 | import img3 from './images/book-3.jpg'; 4 | export const books = [ 5 | { 6 | author: 'Jordan Moore', 7 | title: 'Interesting Facts For Curious Minds', 8 | img: img1, 9 | id: 1, 10 | }, 11 | { 12 | author: 'James Clear', 13 | title: 'Atomic Habits', 14 | img: img2, 15 | id: 2, 16 | }, 17 | { 18 | author: 'Stephen King', 19 | title: 'Fairy Tale', 20 | img: img3, 21 | id: 3, 22 | }, 23 | ]; 24 | -------------------------------------------------------------------------------- /react-course-v3-main/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 | 5 | const [isLoading,setIsLoading] = useState(true) 6 | 7 | useEffect(()=>{ 8 | 9 | setTimeout(()=>{ 10 | 11 | setIsLoading(false); 12 | },3000); 13 | },[]) 14 | 15 | 16 | if(isLoading){ 17 | return <h2>Loading...</h2> 18 | } 19 | 20 | return <h2>Multiple Returns Basics</h2>; 21 | }; 22 | export default MultipleReturnsBasics; 23 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/01-birthday-buddy/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-project", 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.27", 17 | "@types/react-dom": "^18.0.10", 18 | "@vitejs/plugin-react": "^3.1.0", 19 | "vite": "^4.1.0" 20 | } 21 | } -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/01-birthday-buddy/starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-project", 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.27", 17 | "@types/react-dom": "^18.0.10", 18 | "@vitejs/plugin-react": "^3.1.0", 19 | "vite": "^4.1.0" 20 | } 21 | } -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/14-cart/starter/src/App.jsx: -------------------------------------------------------------------------------- 1 | // components 2 | import Navbar from "./Navbar"; 3 | import CartContainer from "./CartContainer"; 4 | import { useGlobalContext } from "./context"; 5 | 6 | function App() { 7 | const { loading } = useGlobalContext(); 8 | 9 | if (loading) { 10 | return ( 11 | <main> 12 | <div className="loading"></div> 13 | </main> 14 | ); 15 | } 16 | return ( 17 | <main> 18 | <Navbar /> 19 | <CartContainer /> 20 | </main> 21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/01-useState/starter/05-useState-gotcha.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const UseStateGotcha = () => { 4 | const [value,setValue]=useState(0) 5 | 6 | const handleClick=()=>{ 7 | 8 | setTimeout(()=>{ 9 | setValue((prevState)=>{ 10 | return prevState+1; 11 | }); 12 | },3000); 13 | } 14 | return <div> 15 | <h1>{value}</h1> 16 | <button type="button" className="btn" onClick={handleClick}>increase</button> 17 | </div>; 18 | }; 19 | 20 | export default UseStateGotcha; 21 | -------------------------------------------------------------------------------- /react-course-v3-main/05-axios-tutorial/src/final/examples/6-interceptors.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import authFetch from '../axios/interceptors'; 3 | const url = 'https://course-api.com/react-store-products'; 4 | 5 | const Interceptors = () => { 6 | const fetchData = async () => { 7 | try { 8 | const resp = await authFetch('/react-store-products'); 9 | } catch (error) {} 10 | }; 11 | 12 | useEffect(() => { 13 | fetchData(); 14 | }, []); 15 | 16 | return <h2 className='text-center'>interceptors</h2>; 17 | }; 18 | export default Interceptors; 19 | -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "contentful", 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 | "contentful": "^9.3.5", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.0.28", 18 | "@types/react-dom": "^18.0.11", 19 | "@vitejs/plugin-react": "^3.1.0", 20 | "vite": "^4.2.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /react-course-v3-main/08-contentful-cms/starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "contentful", 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 | "contentful": "^9.3.5", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.0.28", 18 | "@types/react-dom": "^18.0.11", 19 | "@vitejs/plugin-react": "^3.1.0", 20 | "vite": "^4.2.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src3/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | root.render( 9 | <React.StrictMode> 10 | <App /> 11 | </React.StrictMode> 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src5/books.js: -------------------------------------------------------------------------------- 1 | import img1 from "./images/image1.jpg"; 2 | import img2 from "./images/image2.jpg"; 3 | import img3 from "./images/image3.jpg"; 4 | 5 | export const books = [ 6 | { 7 | author: "David Grann", 8 | title: "Killers of the Flower Moon", 9 | img: img1, 10 | id: 1, 11 | }, 12 | 13 | { 14 | author: "Carissa Broadbent", 15 | title: "The Serpent & the Wings of Night", 16 | img: img2, 17 | id: 2, 18 | }, 19 | 20 | { 21 | author: "LJ Andrew", 22 | title: "Curse of Shadows and Thorns", 23 | img: img3, 24 | id: 3, 25 | }, 26 | ]; 27 | -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/backroads-html/js/app.js: -------------------------------------------------------------------------------- 1 | // ********** set date ************ 2 | // select span 3 | const date = (document.getElementById('date').innerHTML = 4 | new Date().getFullYear()) 5 | 6 | // ********** nav toggle ************ 7 | // select button and links 8 | const navBtn = document.getElementById('nav-toggle') 9 | const links = document.getElementById('nav-links') 10 | // add event listener 11 | navBtn.addEventListener('click', () => { 12 | links.classList.toggle('show-links') 13 | }) 14 | 15 | // ********** smooth scroll ************ 16 | // select links 17 | -------------------------------------------------------------------------------- /react-course-v3-main/02-backroads-project/final/src/components/Services.js: -------------------------------------------------------------------------------- 1 | import { services } from '../data' 2 | import Title from './Title' 3 | import Service from './Service' 4 | const Services = () => { 5 | return ( 6 | <section className='section services' id='services'> 7 | <Title title='our' subTitle='services' /> 8 | 9 | <div className='section-center services-center'> 10 | {services.map((service) => { 11 | return <Service {...service} key={service.id} /> 12 | })} 13 | </div> 14 | </section> 15 | ) 16 | } 17 | export default Services 18 | -------------------------------------------------------------------------------- /react-course-v3-main/03-advanced-react/src/tutorial/02-useEffect/final/01-code-example.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const CodeExample = () => { 4 | const [value, setValue] = useState(0); 5 | const sayHello = () => { 6 | console.log('hello there'); 7 | // be careful 8 | // setValue(value + 1); 9 | }; 10 | sayHello(); 11 | return ( 12 | <div> 13 | <h1>value : {value}</h1> 14 | <button className='btn' onClick={() => setValue(value + 1)}> 15 | click me 16 | </button> 17 | </div> 18 | ); 19 | }; 20 | export default CodeExample; 21 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/02-tours/final/src/Tours.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Tour from './Tour'; 3 | const Tours = ({ tours, removeTour }) => { 4 | return ( 5 | <section> 6 | <div className='title'> 7 | <h2>our tours</h2> 8 | <div className='title-underline'></div> 9 | </div> 10 | <div className='tours'> 11 | {tours.map((tour) => { 12 | return <Tour key={tour.id} {...tour} removeTour={removeTour} />; 13 | })} 14 | </div> 15 | </section> 16 | ); 17 | }; 18 | 19 | export default Tours; 20 | -------------------------------------------------------------------------------- /react-course-v3-main/04-fundamental-projects/12-sidebar/starter/src/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaBars } from "react-icons/fa"; 3 | import { useGlobalContext } from "./context"; 4 | const Home = () => { 5 | const { openSidebar, openModal } = useGlobalContext(); 6 | 7 | return ( 8 | <main> 9 | <button onClick={openSidebar} className="sidebar-toggle"> 10 | <FaBars /> 11 | </button> 12 | <button onClick={openModal} className="btn"> 13 | show modal 14 | </button> 15 | </main> 16 | ); 17 | }; 18 | 19 | export default Home; 20 | -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/final/src/features/modal/modalSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | const initialState = { 4 | isOpen: false, 5 | }; 6 | 7 | const modalSlice = createSlice({ 8 | name: 'modal', 9 | initialState, 10 | reducers: { 11 | openModal: (state, action) => { 12 | state.isOpen = true; 13 | }, 14 | closeModal: (state, action) => { 15 | state.isOpen = false; 16 | }, 17 | }, 18 | }); 19 | 20 | export const { openModal, closeModal } = modalSlice.actions; 21 | 22 | export default modalSlice.reducer; 23 | -------------------------------------------------------------------------------- /react-course-v3-main/11-redux-toolkit-tutorial/starter/src/features/modal/ModalSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | isOpen: false, 5 | }; 6 | 7 | const modalSlice = createSlice({ 8 | name: "modal", 9 | initialState, 10 | reducers: { 11 | openModal: (state, action) => { 12 | state.isOpen = true; 13 | }, 14 | closeModal: (state, action) => { 15 | state.isOpen = false; 16 | }, 17 | }, 18 | }); 19 | 20 | export const { openModal, closeModal } = modalSlice.actions; 21 | export default modalSlice.reducer; 22 | --------------------------------------------------------------------------------