How to Create a React App

Scenario

React is a front-end library for building user interfaces. If you’re a developer familiar with HTML, CSS, and javascript and would like a way to build sites faster, more scalable, and a bit simpler, then adopting React is a switch you don’t need but should check out. In this tutorial, I’ll go over how to create a base react app with the terminal in an integrated development environment (IDE). This tutorial will be done on Windows 10.

Prerequisites

Before we get started you’ll need the following:

• Node.js can be installed here
• an IDE (I’ll be using Visual Code Studio)

Step 1: Project directory

First things first I’m going to create a folder on my desktop named React App. Open the folder right-click an empty space and click open with code.

If this doesn’t work or you don’t have the option you can open the explorer in visual code and manually open the folder. By opening Visual Code Studio and clicking “open folder” then selecting your react app folder on the desktop and then “select folder”.

Step 2: Opening The Terminal

On the drop-down menus click terminal then new terminal.

The terminal should open on the bottom with something similar to this below.

Step 3: Create React App

The terminal is pretty easy to use but can be scary at first. We’re going to run the command “npx create-react-app@latest counter — use-npm”, this will install react app and name it “counter”, and add some folders.

This will take a moment but once it’s complete you should see the terminal say “happy hacking!”

Step 4: Open React App

That’s it you have a react app now we need to change directories into the react app so well run cd counter this line changes us into the folder named app that our react app is in.

From here we run npm start and our browsers should open up displaying a react app!

Step 5: Building React App

There are lots of ways to make apps with react and a ton more. Here are some references where you can learn to build starter projects for your portfolio.

Udemy Course — Build Movie Search Engine Using ReactJS

FreeCodeCamp — Free React Course for 2022

w3schools — React Tutorial

Enjoy building your apps and becoming a react developer.