React Setup Guide

Table of Contents +

To start building applications with React, you need to set up your development environment. In this guide, we will follow the steps to install the necessary tools and software to create and run your first React application.

Language and Tools to Install

  • Node.js: Node.js is required to run the development server and manage packages.
  • npm or Yarn: These are package managers that help you install and manage libraries and dependencies for your React application.
  • Code Editor: We will use Visual Studio Code, but you can use any code editor of your choice.
  • Warp Terminal (Optional): A modern terminal that enhances your command line experience.
  • Browser: You will need a modern web browser like Chrome, Firefox, or Edge to run and test your React applications.

Node.js Installation

Node.js is a Javascript engine that will help us to run our React application. It also comes with npm (Node Package Manager), which is used to install libraries and dependencies for your React application.

  1. Download Node.js: Visit Node.js official website and download the LTS (Long Term Support) version recommended for most users.

  2. Run the Installer: Open the downloaded file and follow the installation wizard. Accept the license agreement and use the default settings.

  3. Verify Installation: After installation, open a terminal or command prompt and run the following commands to verify that Node.js and npm are installed correctly:

    Terminal window
    node --version
    npm --version

    You should see version numbers for both Node.js and npm.

npm or yarn Installation

You can use either npm (which comes with Node.js) as your package manager.

  1. Using npm: If you have installed Node.js, npm is already included. You can use it directly in your terminal. Alternatively you can install Yarn globally if you prefer it over npm.

    Terminal window
    npm install -g npm

  2. Verify Installation: Check if npm is installed correctly by running:

    Terminal window
    npm --version

Installing Visual Studio Code

Visual Studio Code (VS Code) is a popular code editor that provides a nice developers experience with features like it automatically highlight syntax and provides automatic code completion for JavaScript and React. It also has many extensions that will help you in developing react applications faster and more efficiently.

  1. Download Visual Studio Code: Go to the Visual Studio Code website and download the installer for your operating system.

  2. Run the Installer: Open the downloaded file and follow the installation instructions. You can choose to add VS Code to your PATH for easier access from the terminal.

  3. Install Extensions: After installation, open VS Code and install the following extensions for a better development experience:

    • ESLint: For linting JavaScript code.
    • Prettier: For code formatting.
    • Reactjs code snippets: For React-specific code snippets.

  4. Configure Settings: You can customize VS Code settings to your preference, such as enabling format on save and setting up a preferred theme.

Install Warp terminal (Optional)

Warp is a modern terminal that is an advanced command line experience with features like AI-powered commands, smart autocomplete, and a collaborative interface. It can be a great addition to your development setup.

  1. Download Warp: Visit the Warp website and download the installer for your operating system.

  2. Run the Installer: Open the downloaded file and follow the installation instructions.

  3. Launch Warp: After installation, open Warp and configure it according to your preferences.

  4. Explore Features: Take some time to explore Warp’s features, such as command history, AI suggestions, and collaborative sessions.

Install Browser

To run and test your React applications, you will need to install a modern web browser. Here are the steps to install one:

  1. Choose a Browser: Select a modern web browser such as Google Chrome, Mozilla Firefox, or Microsoft Edge. We are going to use Google Chrome but you can install any browser of your choice.

  2. Download the Installer: Visit the official website of the chosen browser and download the installer for your operating system.

  3. Run the Installer: Open the downloaded file and follow the installation instructions.

  4. Launch the Browser: After installation, open the browser and configure it according to your preferences.

Plugins and Extensions

We will also install some plugins and extensions in Visual Studio Code to enhance our development experience with React. Here are some recommended extensions:

  • ESLint: This plugin will integrates ESLint into VS Code for linting JavaScript and React code.
  • Prettier: Code formatter that supports many languages and integrates with ESLint.
  • Reactjs code snippets: Provides a collection of React snippets for faster development.

Now we are done with the setup. Next, we will create our first React application and run it.

Previous React Introduction Next First React App

Share & Connect

Share on LinkedIn