How to create a React app, and build your own website

Create a template React app

Photo by Igor Miske on Unsplash

Introduction

This is the first article and step in a 4 steps walkthrough to help anyone who would like to learn to build a website from scratch without bundled tools and website templates such as Squarespace, Wix and etc. The 4 parts are broken down as the following:

1. Registering a domain name with Google Domains.
2. Server hosting with AWS Lightsail.
3. Coding your website in ReactJs.
4. Installing your ReactJS app on the server and configuring Lightsail.

This is broken down into 4 parts to keep each article short and separate, and so that anyone who may have issue with 1 part, may just read through that particular article.

With the introduction out of the way, let’s get started.

What we’ll cover in this part

This article will be a short one as it is impossible to have a step-by-step guide to building your custom website with React. That is a journey that you would have to explore on your own and rely on either React, or other FE frameworks and languages that you are familiar with to build the website you want.

What this article will do is show you how to create the template react app. We’ll then cover the full integration or deployment step with our Lightsail instance in our 4th and final part.

By the end of it, you’ll have a local React app that can be run locally and displayed on your own browser through localhost:3000.

Install node and npm

First of all, check if you have node and npm install on your local machine by opening up your Command Line Interface. If you’re on window, the default will be cmd.exe or your Command Prompt, and on Mac, it will be terminal. You open open each of these apps by using windows search or spotlight search.

Once cmd/terminal has been opened, type in the following

node -v

If node is installed, the cmd/terminal should return a version number.

You will see a version number if node is installed.

If you see a version number, that’s great, and you can move on to creating the React app below. Else, do follow the simple steps on the Nodejs website here to download and install Node and NPM on your local machine.

Once installed, if you type “node -v” again in your cmd/terminal, you should see the version number and ready to create the template React app. NPM is included with the Node.js installation, but you can verify the installation by typing in “npm -v” too.

We require Node and NPM here as NPM is the tool that we’ll require to download and install the our template react app.

Create a template React App

First, within your cmd/terminal, you would want to change the directory that the command line is currently working in to a directory you’re familiar with. This can be done with the method “cd”. To change the directory to a folder within the current directory, use “cd {folder name}, and to move up the directory hierarchy , use “cd ..”

cd
cd {folder name}
cd ..

If you’re unsure of which folder the cmd/terminal is currently in, use “ls” to view the list of files and folders available in the current directory.

ls

I would recommend using the desktop as it is easy to see and find the app folder then.

It is usually in the format of “C:\Users\{your windows/mac user name}\desktop”, and you can type that directly into the cmd/terminal if you have trouble finding it.

npx create-react-app my-app
cd my-app
npm start

Type these 3 lines into your cmd/terminal.

Andddddd….you’re done. Your template app is up-and-running on your local machine.

Now, let’s explain the 3 lines of code.

npx create-react-app my-app

NPX is the package runner tool that comes with the NPM that we’ve installed to download and install react app on our local machine. “create-react-app” is the command for npx to create our react app, and “my-app” is the name of the app, and you may change this to something you’re more comfortable with.

cd my-app

This is telling your cmd/terminal to enter the directory or folder that npx has created all the react files with the name of the app. You can also view this directly through your normal windows or mac folder.

Next steps

We’re now ready to move on to the final step of deploying our react app to our Lightsail server and setting everything up so that it is accessible by the public internet.

You can continue to the final part.

Here are the links to the rest of the parts:

Part 1: Register your Google Domain

Part 2: Setup AWS Lightsail

Part 4: Deploy your React app and configure your Lightsail instance

If you have any questions, please feel free to drop a comment in the story, and I’ll do my best to help you answer them. Thank you!

Let’s stay connected. Follow me on Medium if you like this article. You may also view my website at yuhaocooper.com to view my result of building my own website using the above steps.