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

Installing Node.js and npm

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:

codesudo 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:

codenode -v npm -v 

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

Installing create-react-app

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:

codenpm 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

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:

codenpx create-react-app my-app 

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

Running the ReactJS Application

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

Windows/Mac/Linux:

codecd my-app 
npm start 

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

Understanding the Project Structure

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

codemy-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

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

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

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!