Building User Interfaces by Composing Primitive React Components
In this lesson we’ll compose a basic login form using all primitive components, we’ve created in the previous lessons. We’ll create a complete layout without writing any custom styles, just by composing primitive components: Box, Flex, Grid, Stack, Text, Heading, Link, Button, and Input.
We’ll create a login page as an example. It has a heading, a form with two text fields — login and password, a password reset link, a submit button, and a disclaimer text with a link.
Checkout this lesson’s Git repository for all the components we’re going to use.
Artem Sapegin: [0:00] First, let's create the Markdown file Login.md to be able to see our interface in styleguidist. Here, we only render a component without any props.
[0:09] Now, create a component file Login.js, and start styleguidist. Import React, and all our primitive components. Create a new component Login.
[0:22] Use the Flex component to center the content horizontally and vertically.
[0:31] Use the Stack component to add whitespace between the heading and the form. Then use the Stack again to add whitespace between form elements.
[0:42] Nesting stacks is a pattern I often use to create layouts. Usually, we need large spacing between main page sections, then smaller spacing between their subsections, and so on.
[0:52] Also, know that we're changing the default HTML element in primitives to main here and form here. This allows us to reduce the number of DOM nodes and make the markup lighter and more readable.
[1:04] The username field is straightforward. We're using the Stack again and change the HTML element to label. The password field is a bit more complex because we want to position the password reset link on the right side of the label.
[1:34] Remember that we need to wrap our link component and the text component with appropriate styles. Also, we're using an id to connect the label to the input. We can't wrap it in the label like the username field, because it could break the link.
[1:48] Create a submit button and a disclaimer text below the form.