A Comprehensive Guide to Installing ReactJS on Windows, Mac, and Linux

Welcome to a step-by-step guide on how to install ReactJS, one of the leading JavaScript libraries for creating dynamic user interfaces. ReactJS is predominantly used for building single-page applications and is maintained by Facebook and a community of developers.

This tutorial aims to guide you through the installation process of ReactJS on different operating systems - Windows, Mac, and Linux. Before diving into the ReactJS installation, let's ensure you have Node.js and npm (Node Package Manager) installed on your system, as these form the groundwork for setting up ReactJS.

Installing Node.js and npm

link to this section

Regardless of the operating system, the first step is to install Node.js and npm.

Windows/Mac Users: Visit the official Node.js website ( https://nodejs.org/ ) and download the installer corresponding to your operating system (Windows or macOS). It's advisable to choose the LTS (Long Term Support) version as it's more stable. The npm comes bundled with Node.js, so you don't need a separate installation for it.

Linux Users: You can install Node.js and npm using a package manager. For Debian-based Linux distributions, you can use the following commands:

sudo apt update 
sudo apt install nodejs npm 

Once the installation is complete, you can verify by checking their versions. Run these commands in your terminal:

node -v npm -v 

The above commands will print the installed versions of Node.js and npm, respectively.

Installing create-react-app

link to this section

create-react-app is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. You can install it using npm.

Windows/Mac/Linux:

npm install -g create-react-app 

This command installs create-react-app globally on your system allowing you to create new projects from anywhere in your system.

Creating a New ReactJS Project

link to this section

Now, let's create a new ReactJS application using create-react-app .

Windows/Mac/Linux:

Navigate to the directory where you want your project to reside and run:

npx create-react-app my-app 

Remember to replace my-app with your desired application name.

Running the ReactJS Application

link to this section

Finally, let's navigate into your new project's folder and start the application:

Windows/Mac/Linux:

cd my-app 
npm start 

Your default browser should now open, and your application will be visible at http://localhost:3000 .

Understanding the Project Structure

link to this section

ReactJS applications created with create-react-app have the following directory structure:

my-app/ 
    README.md 
    node_modules/ 
    package.json 
    .gitignore 
    public/ 
        index.html 
        favicon.ico 
    src/ 
        App.js 
        index.js 
        App.css 
        index.css 
  • README.md - A default markdown file to document information about your project, such as how to run the application and what the project is about.

  • node_modules/ - This folder is where npm installs all the dependencies needed for the project. This directory doesn't need to be uploaded to version control systems as npm can always recreate it using the package.json file.

  • package.json - This important file contains metadata about the project, such as the project's name, version, scripts, and the list of its dependencies.

  • package-lock.json - This file is automatically generated for any operations where npm modifies either the node_modules directory or the package.json file. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

  • .gitignore - The .gitignore file specifies intentionally untracked files that Git should ignore - usually system files or dependencies, like the node_modules folder.

  • public/ - This directory contains static files that aren't processed by Webpack (the bundled used by create-react-app). Here's where the index.html file lives, along with any other static assets you may need.

    • index.html - This is the HTML file that gets served up when someone visits your site. It has a div with an id of root, and this is where React will inject your application's content.
  • src/ - This is the directory where you'll write all of your React code.

    • App.js - This is the main component in your React application.

    • index.js - This is the JavaScript entry point file. It renders the App component into the root div in index.html .

    • index.css & App.css - These are the CSS files corresponding to index.js and App.js respectively.

Setting Up a Code Editor

link to this section

For developing your React applications, you'll need a good text editor or IDE. There are many options available, but Visual Studio Code (VS Code) and Atom are widely used by the community.

VS Code is a source-code editor developed by Microsoft for Windows, Linux, and macOS. It includes embedded Git control, GitHub, syntax highlighting, intelligent code completion, snippets, and code refactoring.

Atom, on the other hand, is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plugins written in Node.js, and embedded Git Control, developed by GitHub.

Choose the one that suits you best, download and install it from their official websites.

Adding React Developer Tools to Your Browser

link to this section

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You will get two new tabs in your Chrome DevTools: "Components" and "Profiler".

The "Components" tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering. You can inspect and edit their current props and state in the "Components" tab.

The "Profiler" tab is an advanced feature that lets you measure performance metrics for your React app.

Conclusion

link to this section

That's it! You have successfully installed ReactJS on your machine and set up your development environment. You now have the foundation to start building robust React applications. Future blogs will dive deeper into creating React components, handling state, and routing in React applications. Stay tuned, and happy coding!