Ratings & reviews

4.97 ratings

Acacia B.

21 days ago

Clear explanations and excellent examples

Yigit H.

35 days ago

Pretty straightforward. I was familiar with typescript and I've been developing with Vue.js for a while now. With this course I have my first hands-on experience with React and no... Show more

Kui F.

37 days ago

Thank you for your effort to improve the learner's deep understanding and knowledge about React.... Show more


Complete all chapters to get certificate


Introduction to React


Obtain essential React concepts. Create reusable components using JSX, manage dynamic UI with React state, handle user interactions with event handling, and pass data between components using React props.

What is React?

Web Application Architectures

Virtual DOM and Browser DOM

Render Element to DOM Tree

Challenge: Render Element


Challenge: Functional Components

Conditional Rendering

Challenge: Render Content Conditionally

Render a Data Collection

Challenge: Render Collection

"Introduction to React" Section Sum Up



Explore the various methods of adding styles to the React applications. You will learn how to apply styles to individual components, use dynamic styles, and maintain a scalable and maintainable styling approach in your projects.

Inline Styles

Inline Styles in Practice

Challenge: Inline Styles

Styling with the CSS File

Styling with the CSS File in Practice

Challenge: Styling with the CSS File

CSS Modules

File Folder Structure Organization

Challenge: CSS Modules

"Styling" Section Sum Up

React Hooks and Context


Powerful features in modern React development. Hooks revolutionize how we write functional components, providing a concise and intuitive way to manage state and perform side effects. Conversely, Context allows us to share data through the component tree without prop drilling. Combining hooks and Context enables efficient state management and simplified data sharing in React applications.

Introduction: React Hooks and Context

useState Hook

Challenge: useState Hook

useRef Hook

Challenge: useRef Hook

useEffect Hook

Challenge: useEffect Hook

useMemo Hook

Challenge: useMemo Hook


Context in Practice

Challenge: Context

"React Hook and Context" Section Sum Up

React in the Real World


Step-by-step guide on how to start a real-world React project. From setting up your development environment to understanding project organization and critical tools, you'll gain the knowledge and confidence to embark on your React journey.

Setting Up Environment

Code Editor

Setting Up the Project Folder


Start the Project

"React in the Real World" Section Sum Up