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

86%
14%
0%
0%
0%
info

Complete all chapters to get certificate

0%

Introduction to React

chevron

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

JSX

Render Element to DOM Tree

Challenge: Render Element

Components

Challenge: Functional Components

Conditional Rendering

Challenge: Render Content Conditionally

Render a Data Collection

Challenge: Render Collection

"Introduction to React" Section Sum Up

Styling

chevron

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

chevron

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

Context in Practice

Challenge: Context

"React Hook and Context" Section Sum Up

React in the Real World

chevron

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

Terminal

Start the Project

"React in the Real World" Section Sum Up