Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.2 Thinking in React: Functional Components

In this lesson, we’ll start by writing a simple but flawed React component. We’ll then refactor it using the single-responsibility principle, and refactor again to use React’s stateless functional component pattern.

Code Snippet

React supports stateless functional components. The following class component

class Username extends React.Component {
    render () {
        return <h1>{this.props.name}</h1>;
    }
}

can be rewritten as the functional component below:

function Username(props) {
    return <h1>{props.name}</h1>;
}

Related Links

1.Thinking in React: Functional Components
2 lessons, 09:18

Free Lesson
1.1
Introduction
00:48

1.2
Thinking in React: Functional Components
08:30


1.2 Thinking in React: Functional Components

Back to the top