Practice & Assessment
Test your understanding of React Fundamentals
Multiple Choice Questions
5What does the React Virtual DOM primarily help with?
Which attribute replaces 'class' in JSX?
What happens when you write a React component starting with a lowercase letter, e.g. <myComponent />?
Which statement about props in React is correct?
What does `props.children` contain?
Coding Challenges
1Build a Profile Card Component
Create a ProfileCard component that accepts name (string), role (string), avatarUrl (string), and bio (string) as props. Render a card layout showing all four values. The component must use destructured props, apply className attributes for styling, and handle a missing bio with a default value of 'No bio provided'. Expected output: a rendered card with all fields visible. No external libraries. Estimated time: 20 minutes.
Mini Project
Team Directory Page
Build a static team directory using only React fundamentals. Create a TeamMember component that accepts name, role, department, and email props. Create a TeamDirectory parent component that renders at least 5 TeamMember instances with hardcoded data. Add a PageHeader component that accepts a title and subtitle prop. Structure the app with App.jsx as the root. Use JSX correctly (className, self-closing tags, fragments where needed). No state, no hooks — props and composition only.