Setting up a React.js Application

How a new web developer can get a project started

Photo by Lautaro Andreani on Unsplash

I’ve been in digital design for a few years now, and setting up projects can feel like an obstacle. So I thought I’d share some web development steps that could help beginners get a react application running from scratch.

Step 1
Download Node.js

Image from Node.js

So why download this? Well — Node.js is a javascript environment that lets you execute javascript code outside of a web browser. This will allow you to create a react application on your computer locally.

Step 2
Download VS Code

Image from Visual Studio Code

Visual Studio Code (VS Code) is a code editor that allows developers to code their projects. There are plenty of code editors, and it can be overwhelming, so I chose one for you. Just learn the ins and outs of this one code editor.

Step 3
Make a GitHub Account

Image from Github

Assuming you’re completely new, you might not know where to start. Github is a repository that allows you to push your code and save it outside your computer.

Step 4
Create a Repo on Github

Image from Github

Create a project repository by clicking on your profile icon and selecting ‘New repository’, name it, and copy the link.

Step 5
Crack Open your Terminal

Photo by Goran Ivos on Unsplash

In your computer’s terminal, clone your newly generated project repo and type in the following…

cd documents
git clone https://github.com/filename_of_repository

Step 6
Launch VS Code

Image by Derrik

Open VS Code, and open your cloned document in the ‘documents’ folder.

Step 7
Install Dependencies

In your VS Code terminal type in the following…

npm install -g npm

This will initiate the Node.js environment in your application.

And then to create the application type in the following…

npx create-react-app 
npm start

Step 8
Gaze at that Sweet Application

Image from Visual Studio Code

So in order to view this application, you’ll need to type in your web browser: localhost:3000

Tada! You should have a template React application you can start playing around with.

React.js is a framework that allows you to build dynamic components and all this other fancy stuff I’m still learning. React is a great technology to learn on your development journey and is even used by companies like Meta, Uber, Netflix, and Airbnb.

Hope that helps & thanks for reading!

Because a thing seems difficult for you, do not think it impossible.
— Marcus Aurelius

Pro tip: You can clap up to 50 times! (: