Key Concepts

Review core concepts you need to learn to master this subject

Function Components

// The two components below are equivalent. class GreeterAsClass extends React.Component { render() { return <h1>Hello, {this.props.name}!</h1>; } } function GreeterAsFunction(props) { return <h1>Hello, {props.name}!</h1>; }

In React, you can use a function as a component instead of a class. Function components receive props as a parameter.

In the example code, we show two equivalent components: one as a class and one as a function.

Function Components
Lesson 1 of 3
  1. 1
    In the code editor, take a look at Example.js. The first Example component is defined as a JavaScript class, but it doesn’t have to be! In React, we can also define components as JavaScript fu…
  2. 2
    Like any component, function components can receive information via props. To access these props, give your function component a parameter named props. Within the function body, you can access th…
  3. 3
    Well done! You’ve written your first function component. Here’s a recap: * Function components are React components defined as JavaScript functions * Function components must return JSX * Functi…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo