├── Assets ├── add-interactivity.png ├── describing-the-ui.png └── react-official-challenge.png └── README.md /Assets/add-interactivity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendFreaks/Learn-ReactJS/HEAD/Assets/add-interactivity.png -------------------------------------------------------------------------------- /Assets/describing-the-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendFreaks/Learn-ReactJS/HEAD/Assets/describing-the-ui.png -------------------------------------------------------------------------------- /Assets/react-official-challenge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendFreaks/Learn-ReactJS/HEAD/Assets/react-official-challenge.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Master ReactJS by Building Projects 2 | 3 | ⚛️ In batch 2, we'll take a deep dive into the world of ReactJS! We'll start with the fundamentals and move on to more advanced concepts like API calls, Hooks, and higher order components. 4 | 5 | 💻 You'll get plenty of hands-on practice with 50+ assignments, including ones that companies give during their interview process. 6 | 7 | 🌟 In addition to ReactJS, we'll also cover other advanced concepts like React Router, Tailwind CSS, Material UI, Redux, TypeScript, and NextJS. 8 | 9 | 🎨 And of course, we'll build five fully functional real-world projects! 10 | 11 | 👨‍💼 Plus, our top performer will get a chance to have a mock interview and a recommendation from me. 12 | 13 |
14 | 15 | Everything about Frontend Developer Mentorship 16 | 17 |
18 | 19 | 20 | ## **NOTE:** 21 | 22 | It's important to have a solid foundation in JavaScript before diving into React. Make sure you have a good understanding of variables, data types, functions, arrays, objects, loops, and conditional statements. 23 | 24 | If you are not sure you should choose batch 1 or batch 2. I would advise you to finish google keep clone or GitHub wrapper assignment mentioned in batch 1. If you are able to complete that, then you should choose batch 2. Otherwise learn HTML, CSS, and JavaScript while solving 20+ assignment. 25 | 26 | [Batch 1 Details](https://www.notion.so/Frontend-Developer-Essential-Course-209fe03307eb484bb49ea6134dac4266) 27 | 28 | [Assignment Link](https://www.notion.so/Mastering-the-JavaScript-Language-From-Basics-to-Advanced-afc1f82af2454d4492ff96cec939aaeb) 29 | 30 | [Submit Your Assignment In This Form](https://docs.google.com/forms/d/e/1FAIpQLScXfNlUz2a0XkZJ7uDOG4yEKwMi1QmrYW7wxWj0KPH8sAP76Q/viewform) 31 | 32 | **If you submitted the assignment, then you will get a link of WhatsApp community for asking your doubts and learning with a community. 33 | Also you will get a google sheet link, where you have to submit your assignment, so that We can track your progress.** 34 | 35 | ## Learn Fundamentals of ReactJS and Build Counter App 36 | 37 |
38 | 39 | Learn Fundamentals of ReactJS and Build Counter App 40 | 41 |
42 | 43 | 🎥 In this video, we cover the fundamental concepts of ReactJS, including: 44 | 45 | - Components 🧩: the building blocks of a React application 46 | - Functional vs Class Components 🏗️: the two types of components in React and their differences 47 | - Named and Default Import/Export 📡📦: how to import and export components in React 48 | - JSX 💻: a syntax extension for JavaScript that allows us to write HTML-like code in our JavaScript 49 | - Props 🎁: how to pass data from a parent component to a child component 50 | - Default Props 🏷️🎁: how to set default values for props 51 | - State 📊: a way to manage data within a component 52 | - Creating a Counter App 🔢: a hands-on example to demonstrate the concepts we covered 53 | - Questions to Solve ❓: some practice questions to test your understanding of the material 54 | - Simple Task 🤏: a hands-on exercise to reinforce your learning 55 | 56 | 🚀 By the end of this video, you'll have a solid understanding of the fundamentals of ReactJS and be ready to start building your own React applications. 57 | 58 | ### Task 1: 59 | 60 | 1. Add a reset button that resets the counter back to zero 61 | 2. Add a feature that allows the user to increment/decrement the counter by a custom value (e.g., 5 or 10) 62 | 3. Add a feature that allows the user to change the color of the counter based on its value (e.g., green for positive values, red for negative values). 63 | 4. Design your first app, and share the code sandbox link in google sheet for tracking your progress. 64 | 5. 🚀 Don't forget to share your learning and assignments on LinkedIn and Twitter using **#FrontendWithVishal** to showcase your skills to potential employers! 65 | 66 | ### Task 2: 67 | 68 | 1. Let's head over to the official documentation of ReactJS and read the Describing the UI section in its entirety. We covered these topics in the previous video, but developing the habit of reading documentation is essential to becoming a skilled developer. 📖🤓 [Start from Your First Component](https://react.dev/learn/your-first-component) 69 | 70 |
71 | Describing The UI Section of React Documentation 72 |
73 | 74 | 2. At the end of each article, you'll find a few challenges to tackle. These challenges will help solidify your understanding of the concepts and make it easier to remember the code syntax. There are a total of 22 challenges spread across 8 articles (start From [Your First Component](https://react.dev/learn/your-first-component) to [Keeping Components Pure](https://react.dev/learn/keeping-components-pure) ). 🧐💻 75 | 76 |
77 | React Official Challenge 78 |
79 | 80 | 3. How do you feel after completing these challenges? Did reading the official ReactJS documentation make it easier to understand the technology? Share your experiences and learning journey on LinkedIn and Twitter using the hashtag #FrontendWithVishal to inspire others to learn from the official documentation too. 🤝🚀 81 | 82 | ## Continue Fundamentals of ReactJS and Build Todo App 83 | 84 |
85 | 86 | Fundamentals of ReactJS and Build Todo App 87 | 88 |
89 | 90 | - Preview of Todo App 📝 91 | - Setting up the Coding Environment 💻 92 | - List Rendering 📋 93 | - Adding a Task ➕ 94 | - Deleting a Task ❌ 95 | - Conditional Rendering 🤔 96 | - Marking a Task as Complete ✅ 97 | - Adding Task Filters 🔍 98 | - Clearing All Completed Tasks 🗑️ 99 | - Showing Remaining Tasks Count 🔢 100 | - Refactoring APP into a Component 🔄 101 | - Understanding Fragment in React 🧩 102 | - Organizing all Components in the Components Folder 📁 103 | - How to Submit the Assignment? 📩 104 | 105 | 106 | ### Task 3: 107 | 108 | 1. Add, Delete and Mark as Complete the Task 109 | 2. Filter Active and Completed Task 110 | 3. Store Tasks in local storage, so that tasks doesn’t disappear on refreshing. 111 | 4. **(Optional)** Implement Drag and Drop Task feature, you can use react-beautiful-dnd npm package. Refer [https://www.npmjs.com/package/react-beautiful-dnd](https://www.npmjs.com/package/react-beautiful-dnd) 112 | 5. Design the website as illustrated in the video 113 | 6. Add Both light and dark theme 114 | 7. 🚀 Don't forget to share your learning and assignments on LinkedIn and Twitter using **#FrontendWithVishal** to showcase your skills to potential employers! 115 | 116 | ### Task 4: 117 | 118 | 1. Let's head over to the official documentation of ReactJS and read the Describing the UI section in its entirety. We covered these topics in the previous video, but developing the habit of reading documentation is essential to becoming a skilled developer. 📖🤓 [Start From Responding to Events](https://react.dev/learn/responding-to-events) 119 | 120 |
121 | Add Interactivity Section of React Documentation 122 |
123 | 124 | 2. At the end of each article, you'll find a few challenges to tackle. These challenges will help solidify your understanding of the concepts and make it easier to remember the code syntax. There are a total of 22 challenges spread across 8 articles(Start From [Responding to Events](https://react.dev/learn/responding-to-events) to [Updating Arrays in State](https://react.dev/learn/updating-arrays-in-state) ). 🧐💻 125 | 126 | 3. How do you feel after completing these challenges? Did reading the official ReactJS documentation make it easier to understand the technology? Share your experiences and learning journey on LinkedIn and Twitter using the hashtag #FrontendWithVishal to inspire others to learn from the official documentation too. 🤝🚀 127 | 128 | ### Task 5: 129 | 130 | 1. Did you understand how ReactJS renders components? Take a moment to explain the concepts of **Triggering** a render, **Rendering** the component, and **Committing** to the DOM in a LinkedIn post or Twitter thread with a helpful image. Don't forget to use the hashtag #frontendwithVishal. [Learn How React Component Trigger Rendering and Render the Component](https://react.dev/learn/render-and-commit) 131 | 132 | **NOTE:** Understanding how React components render will help you grasp advanced topics in ReactJS and make debugging your code much easier. So, this task is a must-do! 🤔👨‍💻 133 | 134 | ## Assignment 3: Build a Quiz App 135 | 136 |
137 | 138 | Build a Time Bound Question / Answer Web App 139 | 140 |
141 | 142 | ### Task 6: 143 | 144 | 1. Build a time-bound question-answer web app using ReactJS. 145 | 2. Add a timer that stops when the time runs out and displays the user's score. 146 | 3. Include a review answer section where users can go back and check their answers. 147 | 4. Ensure the web app has an aesthetically pleasing design. 148 | 5. 🚀 Don't forget to share your learning and assignments on LinkedIn and Twitter using **#FrontendWithVishal** to showcase your skills to potential employers! 149 | 150 | ## Solution of Quiz App | Crash Course of React Router 151 | 152 |
153 | 154 | Build a Time Bound Question / Answer Web App 155 | 156 |
157 | 158 | - 🎥 In this video, we will build Quiz App(which is an assignment given by a startup), also we will learn about React Router in details: 159 | - 🧩 Quiz App Project Overview 160 | - 🔧 Create New Sandbox and Project File Structures 161 | - 📝 Task 1: Create Three Routes 162 | - 🔍 Create Not Found Page and Route, Redirect Not Found Page to Home Page 163 | - 🚪 useNavigate React Hook 164 | - 👋 Task 2: Create Welcome Page 165 | - ❓ Task 3: Create Quiz Page and Question Component 166 | - ⏮️⏭️ Task 4: Create Back & Next Question Button, Disabled Back & Next Button 167 | - 🔍 Create Submit Button, Better way of Creating Submit Button 168 | - 🧮 Task 5: Calculate Score 169 | - 🔗 Task 6: Navigate to Score Page, useLocation React Hook 170 | - 📝 Task 7: Show Submitted Answer on Score Page 171 | - 🔁 Task 8: Create Start Again Quiz Button 172 | - ⏱️ Task 9: Create a Timer 173 | - 🔍 Task 10: Create Review Answer Component 174 | - 🧩 Overview of Project and Conclusion 175 | - 📝 Assignment 176 | 177 | ### Note: 178 | 179 | It is self paced course, so you can finished the assignments according to your time. But, I highly suggest to finish the assignment within 2-3 days, so that you can move to next assignment and finish this course fast and move to batch 3. 180 | --------------------------------------------------------------------------------