How to set up React.js for development!

So you want to learn react in 2020, but aren’t sure where to start? I’m here to help! This guide will be broken into several small sections, with the first being how to install a code editor and react application on your computer.

The first thing we need to have is our code editor. I personally use Visual Studio Code. It is a lightweight editor created and maintained by Microsoft, and is one of the most widely used and beloved editors out there. It is free, has a ton of plugins, themes, icon sets, and has a solid community behind it. If you’d rather have something else, I can highly recommend WebStorm(Paid), Atom(Free), or Brackets(Free). I have personally used all of the above, but Visual Studio Code is my go-to for both work and leisure. If you’d like to download it, it can be found below:
https://code.visualstudio.com/

Next, we want to install Node. To do so, you want to navigate here
https://nodejs.org/en/download/, and install based on whatever your preferred OS is. Once the installation is complete, you will want to open a terminal and run the following command.

node -v

What this does, is it checks your current version of Node. My installed version is v13.3. After installing Node, we will now have access to NPM, which stands for Node Package Manager. This will allow you to install packages to your project.

With this out of the way, the next thing we want to do is create a directory on our local machine, which is where we will store our React application. While naming is completely up to you, I highly recommend naming your directory something memorable, like development. In order to do this, you will want to run the following command:

mkdir development

What the above command means in a nutshell is to make a directory named development. mkdir is short for make directory and development is the name of that newly made directory.

Next, we will want to move into this directory, and this can be accomplished with the following command:

cd development

cd is short for change directory. This will essentially move your terminal into the place on your computer that we just created, and this is the place we will want to create our new React application! Now that we are where we want to be, we will go ahead and create our folder for our application here. What is cool is you can chain terminal commands together, which you can see below.

mkdir my-react-project && cd my-react-application

Now that we are in our directory, we will want to run the following command:

npm install -g create-react-app

This sets our computer up so we can create react applications with a simple command, instead of going through all the manual set up ourselves.

Next, we want to run the following 3 commands:

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

What we just did was we set up a new react application named my-app, by simply running npx create-react-app, followed by the name of our new application. We then moved into the directory where the application lives, and started it up with the last command. If this all worked successfully, we should see the following screen:

While this is just the first in a series, this is the foundation for everything from here on out. In the next article, I will cover setting up Visual Studio Code further, and after that we will build out our first component!

If you would like to read more, I suggest heading over to the official documentation located here: https://reactjs.org/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s