Chapter 5: React with Rematch – The Best Couple – Part I

In this chapter, we'll learn how to transform the client's requirements into mockups, create a user interface, list products inside an infinite scrolling list and add them to a shopping cart, and create a favorites system where the user can add products to a favorites list.

This chapter is one of the most important chapters in the book because it will serve as the basis for later chapters. We'll use the latest React technologies and features to start building the first prototype of our Amazon-like application.

In this chapter, we'll cover the following topics:

• Preparing the environment
• Creating the UI components

By the end of the chapter, you'll be able to create an application, create isolated components with a design system such as Tailwind, and explain how independent components come together in a real-world application.

Technical requirements

To follow along with this chapter, you will require the following:

• A basic knowledge of Vanilla JavaScript and ES6 features
• A basic knowledge of HTML5 features
• Node.js >= 12 installed
• A basic knowledge of React and CSS (TailwindCSS)
• A browser (Chrome, Firefox)
• A code editor (for example, Visual Studio Code)

You can find the code for this chapter in the book's GitHub repository at https://github.com/PacktPublishing/Redux-Made-Easy-with-Rematch/tree/main/packages/chapter-5.

Preparing the environment

To get started with this chapter, we need to set up several things on our local machine, one of these being Node.js.

Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine, which comes bundled with a package manager called NPM. NPM is the world's largest software registry, and open source developers use NPM to share and borrow packages from each other.

The installation process for Node.js depends on your machine, so you can check the Node.js official website for official guidance: https://nodejs.org.

Once you have installed Node.js, we should be able to open a terminal and install Yarn. Yarn is an alternative to NPM, which is faster in several situations because it caches every package it downloads so that it never needs to do it again.

To install Yarn, just open a new terminal tab and run the following command:

npm install -g yarn

To check that the command ran correctly, run this command on the terminal...

Creating the user interface components

To start building the user interface, we should decide which components will be necessary, looking at the mockup we proposed.

We can see that we have a lot of components, so let's separate the bigger ones from the smaller ones:

• Header
• Product List
• Cart

These are the biggest ones, so let's go step by step.

Header

To create a Header component, let's start by creating a folder in our /src directory. This will be /components folder where we'll store all our components.

Then we'll create a Header.jsx file inside the /components directory with this content:

import React from "react";
export const Header = () => (
  <div className="grid grid-cols-0/5 grid-rows-1 bg-gray-900   p-3 gap-3 items-center">
    <h1 className="text-white text-3xl font-extrabold tracking-    tight underline">
...

Summary

In this chapter, we have learned how to prepare the environment to create an application and how we can transform requirements into something visible through mockups and bring things to life with React, Also we learned how to use a CSS framework such as Tailwind for styling our React components, and how we can split our code into components to maintain code that is cleaner and safer to use.

In the next chapter, we'll learn how to create business logic with Rematch for these components and see how React and Rematch fit perfectly for designing a long-term application that can be maintained and improved over time.