Let’s learn our first programming pattern!

In this lesson, we’ll take a look at a simple version of a programming pattern. The following lessons will expand upon that lesson, and by the end, we’ll have a programming pattern in its full complexity.

Our programming pattern uses two React components: a stateful component, and a stateless component. “Stateful” describes any component that has a state property; “stateless” describes any component that does not.

In our pattern, a stateful component passes its state down to a stateless component.

Click “Next” to go to the next exercise and walk through an example!


In this video, in the “Before” scene, the user interface is defined by a single, complex component.

In the “After” scene, the user interface is defined by a clear hierarchy of components in which the stateful component, Post, passes state information to stateless components, like User info, Content, and Stats.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?