A Comprehensive Guide to Installing ReactJS on Windows, Mac, and Linux
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
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.
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.
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
Now, let's create a new ReactJS application using
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
Finally, let's navigate into your new project's folder and start the application:
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
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.htmlfile 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.
Appcomponent into the root div in
App.css- These are the CSS files corresponding to
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
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.
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!