Kursinnhold

React Mastery

1. Fundamentals of React and Component-Based UI

What Is React and Why Use It?Comparing SPAs and MPAs in Web Development How React Works with the Virtual DOM Introducing JSX for Writing HTML in JavaScript Building Complex UI with JSX Rendering Elements in React Challenge: Render an Element in React Understanding React Components Passing Data with Props in React Challenge: Create Functional Components Conditional Rendering in React Challenge: Implement Conditional Rendering – Chat Notification Challenge: Implement Conditional Rendering – Bank Alert Rendering Collections of Data in React Challenge: Display Data Collections in React React Fundamentals Wrap-Up

2. Styling Techniques in React Applications

Introduction to Styling in React Using Inline Styles in React Applying Inline Styles in Practice Challenge: Use Inline Styles in a React Component Styling React Components with External CSS Applying External CSS in Practice Challenge: Apply External CSS to a React App Using CSS Modules for Scoped Styling in React Organizing File and Folder Structures for Styles Challenge: Use CSS Modules in React Styling Techniques in React Wrap-Up

3. React Hooks and Context for State Management

Introduction to React Hooks and Context Managing State with the useState Hook Challenge: Toggle Visibility with useState Working with References Using the useRef Hook Challenge: Build a Controlled Form Component Handling Side Effects with the useEffect Hook Challenge: Fetch and Display Data with useEffect Optimizing Performance with the useMemo Hook Challenge: Implement a Car List Filter with useMemo Sharing State Across Components with Context Using Context in a Real-World Scenario Challenge: Build a World of Astronomy App with Context React Hooks and Context Wrap-Up

4. Structuring Real-World React Projects

Setting Up Your React Development Environment Choosing a Code Editor for React Development Organizing the Project Folder Structure Working with the Terminal in React Development Starting and Running a React Project with Vite React Project Setup Wrap-Up

Using Context in a Real-World Scenario

Let's create a blog source about the planets. We will use Context to avoid prop drilling. The app will consist of the following components: App, Filter, PlanetList, and PlanetItem. To visualize their hierarchy, please refer to the image below.

Step 1

Create the Context in the context.js file at the top level.

js

Step 2

Let the entire app know that we are using context. So, we need to wrap the whole app with the Context.Provider in the App.jsx file.

jsx

Step 3

At this step, we must set the context's data (value prop for the Context.Provider component). Let's begin by rendering some data. Data is presented in the form of the array of objects:

js

Here's what we'll do:

Import data from the data.js file

js

Initialize the state for the planets as an empty array using the useState hook.

js

Use the useEffect hook to assign the imported data to the planets variable. This ensures that we have data to render.

js

Create the variable appData, representing the entire app data, which will be an object with the planets state.

js

Assign the appData variable to the value prop of the context provider.

jsx

Full code of the App.jsx file after the step three.

jsx

Step 4

Let's take a look at the PlanetList component. Its purpose is to render a specific markup. Inside this markup, we utilize the PlanetItem component. It's worth noting that we don't pass any props or utilize context within this component since there is no need to work with data at this level.

jsx

Step 5

In this step, we need to access the data in order to render the information about the planets. To do this, we will follow these steps:

Import the Context from the context.js file.

js

Use the useContext hook to retrieve the planets data from the context.

js

Render the markup using the map function, which allows us to iterate over the data set in React. Apply destructuring to access all the properties of each planet object.

jsx

Full code of the PlanetItem.jsx file after the step five.

jsx

Full app code:

Please take a moment to review the entire project, paying attention to the overall functionality and structure. For now, it is suggested to focus on understanding how the data is passed and rendered in the different components. Note how the data is obtained and utilized in the child components, excluding the Filter component. The Filter component will be a challenge in the next chapter, so you can further enhance the app's functionality.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 11

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår