Name: Modern React Foundations: A Practical Developer Guide
Rating: 4.8 (4 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byEhsan Shekari

Last updated 5/2026

English

What you'll learn

Learn React concepts from scratch with useful examples.
Learn JSX, Props, and States through practical, hands-on exercises.
Learn how to send HTTP requests in React and display a list of results.
React Internals and Performance Optimization

Course content

7 sections • 68 lectures • 4h 32m total length

Course Introduction3:30
Source Code0:02
What, Why, and React Alternatives2:02
What is a Component?2:28
Understand that a component is a reusable piece of code that takes inputs and generates the corresponding html, enabling code reuse, faster development, and teamwork in React.
Set up the Coding Environment on Windows3:07
Create Your First React Project3:30
Project Structure4:43
Creating the First React Component3:48
Revisit the Code2:08
Explore how a React app renders components with react-dom using JSX. See how the root element hosts components in index.html and how the dev server bundles files for local development.

Chapter Introduction0:25
Explore JavaScript, JSX, and XML basics through a simple subscription form example with a label, an input, and a submit button.
A Better Structure2:59
Implementing SubscriptionForm Component5:56
Inline Styles3:28
JavaScript Expressions3:03
One Root Element and React Fragments3:29
CSS Classes5:37
Organize a subscription form by extracting styles to a CSS file, importing it, and applying a submit-btn class; fix html4 and class name issues, and check the browser console.

Project Overview2:37
Talk About the Components!1:18
Explore building reusable components, from search bars and bordered boxes to anime cards with image, title controlled by a prop, and a button that changes by layout.
SearchInput Component7:32
Anime Component3:31
AnimeList Component5:20
Create a reusable box component and an anime list in a React app, using bootstrap styles and a two-column layout to display two anime components.
Anime API and axios2:10
Talk More About Search1:43
Explore how the search feature updates the user interface by managing the search state in the app component and passing results to the animal list for rendering.
Search Function3:56
SearchInput Props2:05
Controlled Inputs3:47
Consume the API Response6:26
Can not Mutate State7:04
Learn to manage a favorites list in a React app by storing anime series in state, wiring an add-to-favorites button, and understanding why mutating state breaks the UI.
Add to Favorites3:34
Remove from Favorites5:19
Loading Component3:43
CSS Modules3:33
Loading and Error States4:22
Yet Another Issue!2:03
useEffect Hook in Detail7:53
Learn how the use effect hook controls code execution with a dependency array, running on first render, on re-renders, or when specific state variables change.
The Initial Search3:45
Import useEffect and trigger initial search. Pass initial text to search input, ensure Dororo and Pokemon results with consistent image height via inline styles and the anim API.
Conditional Rendering with Loading and Error States4:30
A Quick Change1:16

Requirements

Basic JavaScript Knowledge
Basic HTML & CSS Knowledge

Description

Modern React Foundations: A Practical Developer Guide

Learn React the Right Way – Beginner to Pro with Examples!

Want to learn React but don’t know where to start? This hands-on, beginner-friendly course will take you from zero to hero in React with excellent examples and a structured approach.

What You’ll Learn:

What is React & Why React? – Understand the core concepts and why React is the go-to library for modern web development.
Setting Up Your Development Environment – Get started with the right tools and setup for a smooth React workflow.
JSX – The Heart of React – Learn JSX fundamentals with a subscription form example.
Props – Making Components Dynamic – Build a Quote component and understand how props work.
State – Managing Data in React – Learn React state with a Counter example.
Anime Search App – Build an Anime Explorer app where users can:

Search for anime titles (API integration)
Add & remove anime to favorites (State & Props in action!)
Handle loading & error of the API call
Style the app with Bootstrap 5 and conditional rendering

React Internals and Performance Optimization – Learn how React works internally, how React applications can be optimized and what are the tools can be utilized for performance optimization

Why Take This Course?

Practical, with well designed Examples – No boring theory and long lectures! You’ll learn everything with meaningful examples.
Functional Components Only – Learn the modern way of writing React apps.
Fast-Paced & Beginner-Friendly – No fluff, just clear, structured lessons to get you up and running fast!

By the end of this course, you’ll have a strong foundation in React and the confidence to build your own applications!

Join now and start your React journey today!

Who this course is for:

Complete beginners who want to learn React quickly and practically.
Developers switching to React from other frameworks.
Those who want to start learning React or improve their skills.
Front-end development enthusiasts.

What you'll learn

Explore related topics

Course content

Introduction9 lectures • 25min

JSX7 lectures • 25min

Props8 lectures • 27min

State and Event Handling5 lectures • 20min

Anime Search App22 lectures • 1hr 27min

Styling in React8 lectures • 51min

React Internals and Performance Optimization9 lectures • 37min

Requirements

Description

Who this course is for: