Functional Components and Props
Create components as functions, accept and destructure props, use PropTypes or TypeScript types to document expected data shapes.
What Is a React Component?
A React component is a JavaScript function that returns JSX. Components are the building blocks of React applications — reusable, composable pieces of UI.
function Welcome() {
return <h1>Welcome to CoddyKit!</h1>;
}
// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;Props — Passing Data Down
Props (properties) are how you pass data from parent to child. The component receives them as its first argument as a plain object.
function Greeting({ name, role }: { name: string; role: string }) {
return <p>Hello, {name}! Your role is {role}.</p>;
}
// Usage:
<Greeting name="Alice" role="admin" />All lessons in this course
- JSX: Syntax and Transpilation
- Functional Components and Props
- useState Hook: State and Re-renders
- Lists Keys and Conditional Rendering