Extract named, reusable pieces of a screen.

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 function component returns JSX. Its name begins with a capital letter so React treats it as a component rather than a built-in tag. Keep components at module scope; defining one inside another creates a new component type on each render and can reset its state.

Your earlier expressions work unchanged inside a component. The important new step is defining a responsibility: one component can show a learner’s calculated details, while App chooses where it appears. Rendering should calculate UI without writing to storage or changing external values.

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 NameFacts() {
  const name = 'praveen';
  return <section>
    <h2>{name.toUpperCase()}</h2>
    <p>{name.length} letters</p>
    <p>{[...name].reverse().join('')}</p>
  </section>;
}
export default function App() {
  return <main><h1>Component practice</h1><NameFacts /><NameFacts /></main>;
}

Apply this to your assignments

Move your square-root, integer-part, greatest-number and string tasks into named components. Then accept input through props in the Props lesson instead of duplicating values.

Your existing examples

• Rendering React component
• Evaluate addition of two variable values in React component
• Display variable value is even or odd in React component
• Evaluate expression in React component
• Print array of numbers 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

Render <NameFacts /> rather than nameFacts as a tag or invoking the function directly. Match named and default imports to their exports.

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