Course Content
Mastering React
1. Introduction to React Fundamentals
What is React?SPAs vs. MPAs in Web DevelopmentHow React Works with the Virtual DOMIntroducing JSX in ReactCreating Complex JSX Elements Rendering Elements in ReactChallenge: Render ElementReact ComponentProps in ReactChallenge: Functional ComponentsConditional RenderingChallenge: Render Content ConditionallyRender a Data CollectionChallenge: Render a Data CollectionIntroduction to React Section Sum-Up
2. Styling in React Apps
Introduction to Styling in ReactInline StylesInline Styles in PracticeChallenge: Inline StylesStyling with the CSS FileStyling with the CSS File in PracticeChallenge: Styling with the CSS FileStyling with the CSS ModulesFile Folder Structure OrganizationChallenge: CSS ModulesStyling in React Section Sum-Up
3. React Hooks and Context
Introduction: React Hooks and ContextuseState HookChallenge: Toggle VisibilityuseRef HookChallenge: Creating a Form ComponentuseEffect HookChallenge: Fetch and Display DatauseMemo HookChallenge: Car List FilteringContextContext in PracticeChallenge: World of Astronomy AppReact Hooks and Context Section Sum Up
Mastering React
Challenge: Styling with the CSS File
Task
We will now proceed to create the Alert
component, which will render all the elements passed as children and apply some specific styles to it. The task is:
- Create the component
Alert
that has thediv
element inside. - The
div
element should have thealert
class name. - The
div
element should have thechildren
prop as the content. - The
div
element should have the following CSS.
Hint
1. To create a
2. To pass
3. To add a class name to the
4. To import the file with styles in the
5. To apply styles to the
div
element in the component, use
<div>...</div>
. 2. To pass
props.children
as the text content enclose it within
{...}
and set props.children
. Result:
<div>{props.children}</div>
. 3. To add a class name to the
div
element, use the
className
attribute and set it to alert
. Result:
className="alert"
.4. To import the file with styles in the
index.js
file, use
import
statement and provide the correct path to the file.
Result: import './index.css'
. 5. To apply styles to the
div
element, use the class name
selector .alert
and insert the styles from the task.
Everything was clear?
Section 2. Chapter 7