[Implementing checkout with React.js] Part 1: Simple Saloon Reservation App

Online Payments

So many businesses today use payment services, so we will be implementing checkout on a saloon app with React.js which permits checkout with different types of payment methods. For this blog, we are going to set up a saloon app. Hope you enjoy!!!

In this project, we will be using the following libraries.
React.js: It is a JavaScript library for building user interfaces and it is maintained by Facebook and a community of individual developers https://reactjs.org/.
Material-UI : It is an open-source project that features React components that implement Google’s Material Design https://material-ui.com/.
React-Router: It is the standard routing library for React.

First let's create a react project and install material -ui. To create an empty project, we will use the create-react-app cli. https://github.com/Cressence/saloon

create-react-app saloon
cd saloon

Use either npm or yarn to install material-ui. and add Robot font.

yarn add @material-ui/core
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Next, install react-router

yarn add react-router-dom

Setup routing to display a test component. so your app.js file will look like this

src/App.js

So first we have our first screen to display all hairstyle and prices available. We will create a folder and add out jsx component and its style sheet as follows:
src/pages/main/main.jsx
src/pages/main/main.style.js
src/pages/singleItem.jsx
src/pages/singleItem.style.js

Check out the code here https://github.com/Cressence/saloon/tree/hair-styles.

We will get something like this below

That's it for setting up our simple saloon app, next would be deploying it on netlify. Hope you enjoyed the read.