ReactJS Masterclass: Beginner To Advanced – Build Real Projects (85+ Videos)

Welcome to the React tutorial series for beginners.In this series we will learn React right from the beginning. This is not any other half-baked series on React but instead a complete course which will teach you ReactJS right from scratch.Who this course is for: 1. Beginners who want to learn React 2. Experienced developers who come from other front-end frameworks and want to explore React 3. College students who want to start learning React 4. Startup founders/ coders who want to build an interactive front-end for their web app. Prerequisites: 1. Having a basic understanding of JavaScript syntax will help a lot.

Curated by: Code Stoic (93 videos)

---

Currently Playing: ReactJS Tutorial 50: Creating State To Save Food Data

🔧 Building a React app and need a backend? Learn FastAPI — the modern Python backend that pairs perfectly with React. ✅ JWT Authentication, OAuth, REST APIs — everything your React app needs. 👉 FastAPI Complete Course (limited discount): https://www.udemy.com/course/fastapi-course-python/?couponCode=YOUTUBE2026 📦 Also check out: • Django Masterclass (44hrs, 9 real projects): https://www.udemy.com/course/django-course/?couponCode=YOUTUBE2026 • Python Masterclass 2026 (80hrs):https://www.udemy.com/course/python-masterclass-course/?couponCode=YOUITUBE2026 ───────────────────────── In this lecture we will learn how to create a state variable in React to store data fetched from an API

---

Tracks in this Playlist

• ReactJS Tutorial 1 : Introduction To ReactJS
• ReactJS Tutorial 2: Installing Required Tools
• ReactJS Tutorial 3 : Create React App Using VITE
• ReactJS Tutorial 4 : How React App Works
• ReactJS Tutorial 5 : Creating A Component In React
• ReactJS Tutorial 6 : Auto Format React Code With Prettier
• ReactJS Tutorial 7 : What Is JSX In React
• ReactJS Tutorial 8 : Reusability of Components In React
• ReactJS Tutorial 9 : What are Props In React
• ReactJS Tutorial 10 : Destructuring Props
• ReactJS Tutorial 11 : Immutability of Props
• ReactJS Tutorial 12 : Passing Arrays & Objects To Components Using Props
• ReactJS Tutorial 13 : Rendering Arrays Or Lists In React
• ReactJS Tutorial 14 : Rendering Array Of Objects In React
• ReactJS Tutorial 15 : Rendering Components Inside A Loop
• ReactJS Tutorial 16 : Conditionally Rendering JSX & Components
• ReactJS Tutorial 17 : Conditional Rendering Using Element Variables
• ReactJS Tutorial 18 : Using Ternary Operators In React
• ReactJS Tutorial 19: Conditionally Rendering List Items
• ReactJS Tutorial 20 : Conditionally Rendering A Message Using Ternary
• ReactJS Tutorial 21 : Event Handling In React
• ReactJS Tutorial 22 : State In React, Props V/S State In React
• ReactJS Tutorial 23: State In React
• ReactJS Tutorial 24: Creating Multiple States In React
• ReactJS Tutorial 25: Handling Input Fields In React
• ReactJS Tutorial 26: Handling Multiple Inputs In React
• ReactJS Tutorial 27: Handling Form Submission In React
• ReactJS Tutorial 28: Todo App Part 1 Setting Up The App
• ReactJS Tutorial 29: Todo App Part 2 Preview Of The App
• ReactJS Tutorial 30: Todo App Part 3 Creating Input Component
• ReactJS Tutorial 31: Todo App Part 4 Submitting Todo Items
• ReactJS Tutorial 32: Todo App Part 5 Displaying Todos
• ReactJS Tutorial 33: Todo App Part 6 Inline Styling In React Components
• ReactJS Tutorial 34: TodoApp Part 7 CSS Stylesheets To Style Components
• ReactJS Tutorial 35: Todo App Part 8 CSS Modules For Styling
• ReactJS Tutorial 36: Todo App Part 9 Creating Header & Styling It
• ReactJS Tutorial 37: Todo App Part 10 Separating JSX Into Components
• ReactJS Tutorial 38: Todo App Part 11 Styling The Form
• ReactJS Tutorial 39: Todo App Part 12 Styling Todo Items
• ReactJS Tutorial 40: Todo App Part 13 Adding A Delete Button
• ReactJS Tutorial 41: Todo App Part 14 Delete Functionality In React
• ReactJS Tutorial 42: Todo App Part 15 Adding Complete Task Functionality
• ReactJS Tutorial 43: Marking Todo Items As Complete
• ReactJS Tutorial 44: Counting Completed & Total Todos
• ReactJS Tutorial 45: Sorting Items In A Todo List
• ReactJS Tutorial 46: Recipe App Introduction
• ReactJS Tutorial 47: Setting Up Project & Making API Calls Using Postman
• ReactJS Tutorial 48: useEffect Hook In React
• ReactJS Tutorial 49: Making API Call In React
• ReactJS Tutorial 50: Creating State To Save Food Data
• ReactJS Tutorial 51: Building The Food List Component
• ReactJS Tutorial 52: Food Item Component
• ReactJS Tutorial 53: Creating The Nav Component
• ReactJS Tutorial 54: Creating The Search Component
• ReactJS Tutorial Part 55: Styling The Food Item Component
• ReactJS Tutorial 56: Outer Container Component
• ReactJS Tutorial 57: Creating The Inner Container Component
• ReactJS Tutorial 58: Creating The Food Detail Component
• ReactJS Tutorial 59: Fetching Recipes From API
• ReactJS Tutorial 60: Fetching Recipe Instructions
• ReactJS Tutorial 61: Designing The Recipe Detail Component
• ReactJS Tutorial 62: Fetching Ingredients
• ReactJS Tutorial 63: Splitting Items Into Multiple Components
• ReactJS Tutorial 64: Styling Items Container
• ReactJS Tutorial 65: useReducer Hook In React
• ReactJS Tutorial 66: Using Object As State In useReducer
• ReactJS Tutorial 67:Using Complex Object As State In useReducer
• ReactJS Tutorial 68: Understanding Reducer Using Bank Account Example
• ReactJS Tutorial 69: React Router Part 1: Server Side Rendering v/s Client Side Rendering
• ReactJS Tutorial 70: React Router Part 2 : Creating Routes
• ReactJS Tutorial 71: React Router Part 3 Link Component In React
• ReactJS Tutorial 72: React Router Part 4 Nesting Routes
• ReactJS Tutorial 73: React Router Part 5 Dynamic Routes
• ReactJS Tutorial 74: React Router Part 6 useNavigate Hook In React
• ReactJS Tutorial 75: Context API In React
• ReactJS Tutorial 76: Separating Context Into Its Own File In React
• ReactJS Tutorial 77: Sharing Context With Other Components In React
• ReactJS Tutorial 78 : Using Reducer With Context Provider In React
• ReactJS Tutorial 79: Passing Complex State To Reducer
• ReactJS Tutorial 80: Creating Custom Hooks In React
• ReactJS Tutorial 81: Creating Our Own useLocalStorage Hook In ReactJS
• React JS Tutorial For Beginners : Part 20 Using State In A Functional Component
• React JS Tutorial For Beginners : Part 21 Conditional Rendering
• React JS Tutorial For Beginners : Part 22 Conditional Rendering Using Elements
• React JS Tutorial For Beginners : Part 23 Ternary Conditional
• React JS Tutorial For Beginners : Part 24 Introduction To Map
• React JS Tutorial For Beginners : Part 25 List Rendering
• React JS Tutorial For Beginners : Part 26 Understanding Keys
• React JS Tutorial For Beginners : Part 28 Rendering Array
• React JS Tutorial For Beginners : Part 29 Handling User Input Part 1
• React JS Tutorial For Beginners : Part 30 Handling User Input Part 2
• React JS Tutorial For Beginners : Part 31 Form Submission
• React JS Tutorial For Beginners : Part 32 Todo App In React Part 1