React Get Started

React Get Started

To get started with React, you need to set up a proper development environment. While you can technically add React to a simple HTML file using <script> tags, the standard and most efficient way to build React applications is by using a modern build toolchain.

This toolchain sets up your development environment so you can use the latest JavaScript features, provides a fantastic developer experience (like hot-reloading), and optimizes your application for production deployment.

Prerequisites

Before you can create your first React application, you must have a few essential tools installed on your computer:

1. Node.js and npm: React requires Node.js (a JavaScript runtime) to run its build tools. When you install Node.js, it automatically includes npm (Node Package Manager). You can download and install Node.js from their official website.
2. A Code Editor: You will need a text editor to write your code. Visual Studio Code (VS Code) is overwhelmingly the most popular choice among React developers due to its massive ecosystem of extensions.
3. Command Line / Terminal: You should be comfortable navigating folders and running basic commands in your terminal or command prompt.

To verify that Node.js and npm are installed, open your terminal and run:

node -v
npm -v

If both commands return version numbers, you are ready to go!

Creating a New React App (Two Methods)

Historically, the official way to create a React application was using Create React App (CRA). However, in recent years, Vite has emerged as the modern, blazing-fast alternative that most developers and the official React documentation now recommend.

We will cover both methods below.

Method 1: Using Vite (Recommended & Fast)

Vite is a modern build tool that provides a significantly faster and leaner development experience compared to CRA. It starts up almost instantly and updates the browser incredibly fast when you save your files.

To create a new React app using Vite, open your terminal, navigate to the folder where you want your project to live, and run:

npm create vite@latest my-first-react-app -- --template react

Once the process completes, you need to navigate into your new project folder and install the necessary dependencies:

cd my-first-react-app
npm install

Method 2: Using Create React App (Classic)

If you are following an older tutorial or joining an existing codebase, you might still see create-react-app. You can create an application by running the following command using npx (a package runner tool that comes with npm):

npx create-react-app my-first-react-app

Once the installation is complete, navigate into your new project folder and start the development server:

cd my-first-react-app
npm start

This will automatically open your new React application in your default web browser. You are now ready to start building your React application!