React Components & Props

Reusable functional components and passing data down the tree

« React Introduction & JSX« Previous State with the useState Hook »Next »

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via JSX.

Passing and Receiving Props

Props are arguments passed into React components.

Props are passed to components via HTML attributes.

React props are read-only (immutable)! A component must never modify its own props.

Component with Typed Props

Try It Yourself »

function CourseCard({ title, lessonsCount, isFree }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <h3>{title}</h3>
      <p>{lessonsCount} comprehensive lessons included.</p>
      {isFree && <span style={{ color: 'green', fontWeight: 'bold' }}>FREE ACCESS</span>}
    </div>
  );
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Are React props mutable (changeable by the receiving component) or immutable (read-only)?

« Previous: React Introduction & JSX Next: State with the useState Hook »