React's Building Blocks

Components and elements

React helps us write code that identifies what we want, and then we leave it up to React to perform all of the steps needed to get us to our desired result. To describe what we want, we use functional components. That is, we create a function that returns a React element or list of elements. These components can change the elements that they return based on the properties that are passed into the component and consider the current value of any state variables that the component may be managing.

A visual example

As an example, let’s take the view that consists of a title bar and a form that has three input areas: