Keep component appearance consistent across instances.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

A component’s CSS classes should express its role, while props supply differences such as a theme or status. CSS is still normal CSS: importing a stylesheet does not automatically scope every selector. Use distinctive class names or a CSS module when class collisions matter.

Your table and icon examples combine reusable structure with conditional appearance. Keep a readable text label beside an icon. For a repeated card, calculate the style from the card’s own props rather than a global variable that couples every instance.

Data / props ↓ JavaScript expression ↓ JSX elements ↓ Visible UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

function Result({name, marks}) {
  const passed = marks >= 35;
  return <article style={{padding: 16, border: `2px solid ${passed ? 'green' : 'crimson'}`}}>
    <h2>{name}</h2><p>{marks}: {passed ? 'Pass' : 'Needs practice'}</p>
  </article>;
}
export default function App() {
  return <main><Result name="Asha" marks={80} /><Result name="Ravi" marks={30} /></main>;
}

Apply this to your assignments

Convert your JSX styling examples into components accepting color and records. Revisit the arithmetic tasks listed in this worksheet and add a clearly labelled result style.

Your existing examples

• Apply red color to React Component
• Conditional Styling a table
• Conditional Styling class based
• Conditional Styling icons
• Apply the color name stored in a variable in React Component
• Display each string of array in flex boxes in React Component

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet and submission controls.

Common mistakes

Do not communicate pass/fail solely by color. Numeric props use braces: marks={80}, not a string unless conversion is intentional.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements