Setting up your React Development Environment for Beginners

Having worked across sites raking in over 50 billion website visits annually with Higglo Digital, I write about tech topics and teach…

Setting up your React Development Environment for Beginners

Having worked across sites raking in over 50 billion website visits annually with Higglo Digital, I write about tech topics and teach engineers to have solid foundations that will help them get ahead in their career. I also build awesome products for digital nomads — check it out!

JavaScript eBook

I’ve written an eBook on JavaScript that will take you from beginner to professional. Having been in your shoes moving to making over $200,000 per year in just a few years as a software engineer, I know exactly what it takes to get there. Check out the ebook now!

Setting up a development environment for React can seem like a daunting task, but it is actually quite straightforward once you know the steps involved. In this article, we will walk through the process of setting up a development environment for React from scratch.

Before we begin, make sure you have the following tools installed on your machine:

Node.js

React is built on top of Node.js, so you will need to have it installed to run React applications. You can download the latest version of Node.js from the official website here.

A text editor

You will need a text editor to write your code. I use VS Code and in my opinion, it’s the best out there with a fantastic community around it. Some other popular options include Sublime Text and Atom.

With these tools installed, we are ready to start setting up our development environment!

The first step is to create a new project directory and navigate to it in your terminal. Then, run the following command to create a new React application using the create-react-app tool:

npx create-react-app my-new-appThis command will create a new directory called **my-new-app** and generate all the files you need to get started with your new React application. It will also install all the necessary dependencies, so you can start developing right away. Once the command has finished running, navigate to the new project directory and start the development server by running the following command:

cd my-new-app npm startBonus Points: Take a look at Yarn instead of *npm* for your project. This will start the development server and open a new browser window with your React application. You should see a page with the text “Welcome to React” and the React logo.

At this point, your development environment is set up and ready to go. You can start writing code in the **src** directory and see your changes reflected in the browser as you save them.

There are a few other things you might want to consider as you develop your React application:

Debugging

Debugging your React application is an important part of the development process. To debug your code, you can use the browser’s developer tools or a tool like the React DevTools browser extension.

Testing

Testing your React components is a good way to ensure that your application is working as expected. As projects grow, code is harder to maintain as code functionality intertwines, so having a testing suite will help to catch regressions when those happen. There are several tools available for testing React components, such as Jest and Enzyme.

Linting

Linting your code helps you maintain a consistent style and catch syntax errors and other issues which is extremely important when working with other engineers. One of the most popular tools is ESLint, which I have used across every project for the past ~8 years. You can even set up your text editor to auto lint on save!

Overall, setting up a development environment for React is a straightforward process. With the right tools installed and a basic understanding of the development workflow, you can start building your own React applications in no time.

JavaScript eBook

I founded Higglo Digital and we can help your business crush the web game with an award-winning website and cutting-edge digital strategy. If you want to see a beautifully designed website, check us out.

I also created Wanderlust Extension to discover the most beautiful places across the world with highly curated content. Check it out!

Having worked across sites raking in over 50 billion website visits annually with Higglo Digital, I write about tech topics and teach…