Edupoly Learning

Study notes

Apply static and data-driven styles to generated UI.

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

Use className to connect JSX to a CSS rule. The style prop accepts a JavaScript object with camelCase property names, such as backgroundColor. The outer braces enter JavaScript; the inner braces create the object. A variable can supply a color without turning the entire style object into a string.

Your flex-box assignments need a flex container and a child for each item. The layout belongs to the container; each card controls its own border, padding and text. Table styling follows normal CSS table rules. Prefer reusable classes for shared appearance and inline values for values that truly come from data.

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

Trace the values through each step before changing the code.

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

export default function App() {
  const color = 'crimson';
  const names = ['Asha', 'Ravi', 'Meena'];
  return <main>
    <h1 style={{color}}>Students</h1>
    <div style={{display: 'flex', flexWrap: 'wrap', gap: 12}}>
      {names.map(name => <article key={name} style={{padding: 16, border: '1px solid #888'}}>{name}</article>)}
    </div>
  </main>;
}

Expected result

A crimson heading and three bordered cards arranged in a wrapping row.

Apply this to your assignments

Reproduce your red heading, variable color, string cards, object cards and table examples. Move shared declarations into App.css and import it. Check the cards at a narrow browser width.

Your existing examples

Apply Red color to jsx h1 Element
Display each array element in flex Boxes
Display each array object in flex boxes
Display each array object in Table
Apply the color name stored in a variable to jsx h1

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

Use className, not class. CSS names such as background-color become backgroundColor in style objects.

Check your understanding

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

Reference

Official documentation for this topic · Vite setup requirements

JSX Styling