Build Your First Single Page React App Using regauge
This guide is targeted at those that have some experience on React, NodeJS, and JavaScript. The instruction is been designed and performed on Mac and VS Code, but you can opt your favorite IDE and OS platform.
You will learn how to setup your development environment, build a simple single page application with few components using regauge.
So set to start?
What is regauge?
Regauge is a CLI tool which helps quickly create a React application with the minimal configuration files and package commands in one single command. It also helps us to generate an application without any hidden magical functionality in it. Using the CLI tool you can also generate component in a single hit.
This CLI tool creates the React application and uses Javascript, Webpack (For project bundling), Jest (For unit testing) etc.
Before working with the react application, you need to set your development environment up.
Setup
If you haven’t done these before, it might feel lot of work just to get started with the simple application. Don’t worry, most of them are just for one time setup.
- VS Code: Install VS Code by downloading and running the Visual Studio Installer.
- NodeJS: Download NodeJS from the official site and choose “Recommended For Most Users” button. Make sure you are downloading any version equal or greater to 11.5.0. You can us different installer packages to setup nodejs in your favorite environment. It will also gets npm for you. regauge recommends to use npm only for now. Yarn support is yet to come.
- Chrome Browser: Chrome supports great experience for web development to many developers. Let us also have Google Chrome installed in the environment. Also make it as a default web browser so that your newly built app can open on chrome without any human interaction. Also make sure you are updating the browser whenever a new update arrives. To set Chrome as your default for now (settings -> apps -> default apps -> web browser)
- Git: Git is a version control system. Regauge highly recommend you to always version control your application. It uses git as it’s recommended VCS. Make sire you have the latest version of git installed in your system.
Yes and that’s all. Rest of the packages will get downloaded as part of the application.
Installing regauge
The installation for regauge can be done through terminal itself by running the following command,
npm install -g regaugeThe above command installs the latest version of regauge in your system. Note that we have used -g flag to install it globally. So that for later purpose also we can use the CLI tool seamlessly.
Instead of installing it globally you can use npx as well to execute the regauge command,
Checking The regauge Version
You can find the regauge version by running the command,
rg --versionThe latest version as of writing this blog is 0.3.1. It also provides us the node version which is installed in our system.
Create A React Application Using regauge
You can now setup a react application with the CLI. Again from the terminal first choose your favorite location where you want to store the source code of your application. I choose a location,
cd ~/projects/appsThen type the following command to setup your react project in javascript,
rg new my-first-app
This command will install the React app with all the configurations needed. You can choose of course another name :).
Start the server
Regauge supports hot reload in webpack configuration. Which means every time you make some changes in any component inside /src folder, your browser will automatically get reloaded. To run the server,
cd my-first-app
npm start
With this your app will start on port http://localhost:8080/.
Creating A New Component
By default, the project which you create using regauge CLI, comes with a App component. But as we know, single component for an application is not sufficient. So let’s create a new component to show a Card Component using regauge.
With the CLI command of regauge, we will generate a new component. Assume we are at the root directory of our project,
cd ./src/js
rg generate component CardThe important thing to note, the generate command creates the component with a relative path in the directory from where you are running the command in your CLI.
At this time our new Card component does nothing. We need to design that component which shows a title and description. Note that, whenever we will make any changes to the component, the browser will get auto loaded with the changes.
We will follow little TDD here, so we will open the newly created Card.test.js file and add the followings,
Once you have the expectation ready for the functionality, open Card.js from the same directory. Add the following code snippet so that the test passes.
Though we have the functionality ready, but it still won’t be visible in the application. In order to that, we need the Card to be integrated with App.js. Following the similar pattern of TDD, we need to modify the existing test cases for App.
And followed by the integration on App.
If you go to the application, you might notice there are significant changes happened on the app side. But still the card is not looking that promising. It needs some styling and this is the time when we will recall our favorite friend, SCSS. We will go to the same newly created Card component and add a new file called card.scss. Then add the following lines of code,
.card__wrapper {
box-shadow: 5px 5px 30px #888888;
padding: 5px 20px;
}Yes, that’s all. When your app refreshes due to the new change, you will see your application is now having a great looking card component at it’s body.
Conclusion
Fantastic, we just created our first React app using regauge. We will leave it at that for now. This was a very simple example, but this is a starting point. Regauge CLI is an awesome tool to simplify developing React Applications.
To see the complete source code of this demo application, please visit https://github.com/phoenixTW/my-first-app-using-regauge
