Previous
Written by: rJTutorial Team | Last Updated:

React Setup

Setting up your development environment is the first step toward building modern, reactive user interfaces. React isn't just a library you drop into a script tag anymore; it relies on a robust ecosystem of tools to compile code, manage dependencies, and provide a smooth developer experience.

Node.js

Before getting started with React development, ensure you have Node.js installed on your system. Node.js is a JavaScript runtime that allows you to run code outside of a browser. For React developers, Node.js is essential because it includes npm (Node Package Manager), which we use to install libraries and run build scripts.

You can download and install it from here.

Best Practice: Always download the LTS (Long Term Support) version of Node.js. It is more stable and less likely to have compatibility issues with third-party libraries than the "Current" version.
Developer Tip: After installing, open your terminal and type node -v and npm -v. If you see version numbers, you're ready to go!

Creating Our First React App

To make the setup process easier, the React team created a tool called Create React App (CRA). This tool automates the configuration of Webpack, Babel, and ESLint, allowing you to focus on writing code rather than configuring build tools.

Step 1: Open Your Terminal

Navigate to the directory where you want to store your project files (e.g., your "Documents" or "Projects" folder).

Step 2: Create a React Application

Run the following command to create a new React application named my-react-app:

npx create-react-app my-react-app

We use npx (Node Package Runner) instead of npm here. This ensures you are always using the latest version of the Create React App tool without having to install it globally on your computer.

Watch Out: The installation process can take a few minutes depending on your internet speed, as it downloads several hundred megabytes of dependencies into the node_modules folder.

Alternatively, if you have already created a folder and are currently inside it, you can create the app in the current directory by using a period:

npx create-react-app .
Common Mistake: Ensure your folder name doesn't contain spaces or capital letters (e.g., use my-react-app instead of My React App). Npm naming restrictions will cause the installation to fail otherwise.

Step 3: Navigate to the App Directory

If you specified a folder name in the previous step, you need to move your terminal's focus into that new folder before you can run any commands:

cd my-react-app

Step 4: Start the Application

Once you are inside the project folder, start the local development server with:

npm start

This command launches a local development server. By default, your browser will automatically open to http://localhost:3000, displaying the spinning React logo. Any changes you make to your code will now "Hot Reload," meaning the browser updates instantly without you needing to refresh the page manually.

Developer Tip: While create-react-app is the classic way to start, many professional developers now use Vite for faster build times. Once you're comfortable with React, give npm create vite@latest a try!
Common Mistake: Beginners often try to run npm start before navigating into the project folder using the cd command. If you see an error saying "missing script: start," check your current directory!
Previous