Search⌘ K
Home
Courses
The Road to React: The One with Hooks

React Component Definition (Advanced)

Explore advanced patterns for defining React components using JavaScript arrow functions. Learn how to write concise JSX with implicit returns or use block bodies when necessary. This lesson helps you understand refactoring options to create clean and readable React function components.

We'll cover the following...

The following refactorings are optional recommendations to explain the different JavaScript/React patterns. You can build complete React applications without these advanced patterns, so don’t be discouraged if they seem too complicated.

All components in the src/App.js file are function components. JavaScript has multiple ways to declare functions. So far, we have used the function statement, though arrow functions can be used more concisely:

Node.js
// function declaration
function () { ... }
// arrow function declaration
const () => { ... }

You can remove the parentheses in an arrow function ...