Зміст курсу

Mastering React

1. Introduction to React Fundamentals

What is React?SPAs vs. MPAs in Web Development How React Works with the Virtual DOM Introducing JSX in React Creating Complex JSX Elements Rendering Elements in React Challenge: Rendering Element React Component Props in React Challenge: Functional Components Conditional Rendering Challenge: Conditional Rendering - Chat Notification Challenge: Conditional Rendering - Bank Alert Rendering a Data Collection Challenge: Rendering a Data Collection Introduction to React Section Sum-Up

2. Styling in React Apps

Introduction to Styling in React 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 Styling with the CSS Modules File Folder Structure Organization Challenge: CSS Modules Styling in React Section Sum-Up

3. React Hooks and Context

Introduction: React Hooks and Context useState Hook Challenge: Toggling Visibility useRef Hook Challenge: Creating a Form Component useEffect Hook Challenge: Fetching and Displaying Data useMemo Hook Challenge: Car List Filtering Context Context in Practice Challenge: World of Astronomy App React Hooks and Context Section Sum Up

4. React in the Real World

Setting Up Environment Code Editor Setting Up the Project Folder Terminal Starting the Project React in the Real World Section Sum Up

Mastering React

Challenge: Car List Filtering

Task

Create the CarList component responsible for rendering a list of cars and providing a search functionality to filter them based on their names. It allows users to enter a search term and dynamically filters the list of cars based on that input.

Instructions

Import the necessary hooks from the React library.
Inside the CarList component, declare a state variable searchInput and a state updater function setSearchInput using the useState hook. Initialize searchInput with an empty string.
Use the useMemo hook to memoize the filteredCars array. The memoization logic should filter the cars based on the searchInput. If searchInput is empty, return all cars; otherwise, filter the cars based on the search input.
In the useMemo dependency array, specify the correct variables the memoized function depends on.

Include an import statement to import the necessary hook from the React library.
Use the useState hook to declare a state variable and its updater function.
The useMemo hook memoizes the filtered cars array, preventing unnecessary recalculations.
In the dependency array of useMemo, include the variables that the memoized function depends on (cars and searchInput).

Все було зрозуміло?

Секція 3. Розділ 9

Зміст курсу

Mastering React

1. Introduction to React Fundamentals

2. Styling in React Apps

3. React Hooks and Context

4. React in the Real World

Setting Up Environment Code Editor Setting Up the Project Folder Terminal Starting the Project React in the Real World Section Sum Up

Mastering React

Challenge: Car List Filtering

Task

Instructions

Import the necessary hooks from the React library.
Inside the CarList component, declare a state variable searchInput and a state updater function setSearchInput using the useState hook. Initialize searchInput with an empty string.
Use the useMemo hook to memoize the filteredCars array. The memoization logic should filter the cars based on the searchInput. If searchInput is empty, return all cars; otherwise, filter the cars based on the search input.
In the useMemo dependency array, specify the correct variables the memoized function depends on.

Include an import statement to import the necessary hook from the React library.
Use the useState hook to declare a state variable and its updater function.
The useMemo hook memoizes the filtered cars array, preventing unnecessary recalculations.
In the dependency array of useMemo, include the variables that the memoized function depends on (cars and searchInput).

Все було зрозуміло?

Секція 3. Розділ 9