Styling Basics in React

Requirement

Learn the difference between inline styles (using JavaScript objects) and standard CSS classes (using the className attribute) in React.

Assignments (Start First)

1. Simple beginner UI task: Create a DangerButton component that uses an inline style object to make its background red and text white.
2. Slightly improved version: Convert the DangerButton to use a standard CSS class called btn-danger instead of inline styles.
3. Practical real-world component: Build a ProfileAvatar component. Give it an inline style to dynamically set its backgroundImage based on an imageUrl prop.
4. "The Escalation": Create a StatusBadge component that accepts a status prop ("online" or "offline"). Conditionally apply either a green or gray background color using inline styles based on the prop.

Lessons (Optional)

• className: Because class is a reserved word in JavaScript, React uses className for applying CSS classes.
• Inline Styles: Inline styles in React are written as JavaScript objects, where CSS properties are camelCased (e.g., backgroundColor instead of background-color).

The Summary and Quizzes

1. Concept explanation: React gives you the flexibility to style elements via standard CSS classes or dynamic inline styles when values need to change based on JS variables.
2. Why it works in React: React translates the style object into standard CSS strings when it renders the Virtual DOM to the actual browser DOM.
3. Challenge question: Write the exact JSX syntax to apply an inline style that sets font-size to "20px" on a <p> tag.