React is a JavaScript library you install on your computer, not something you add to an HTML file like a script tag

React requires a build process — a set of tools that transform your code before it runs in a browser. You cannot straightforward read React and paste it into an HTML file the way you might with jQuery. Instead, you use Node.js (a program that runs JavaScript outside the browser) and npm (a package manager that downloads libraries) to set up a project folder with React already configured.

The fastest way to start is with Create React App, a tool that sets up a working React project in one command. It handles all the build configuration for you, so you can write React code when ready without learning webpack, Babel, or other build tools first.

Key Takeaways

  • You must install Node.js first, which includes npm — the tool that downloads and manages React and other libraries.
  • Create React App is the standard starting point for new React projects and requires only one command to set up a working folder.
  • After installation, you run a local development server on your computer to test your code before publishing it online.
  • React code lives in .jsx files (or .js files with React syntax), not in plain HTML files.

Install Node.js and npm on your computer

Go to nodejs.org and read the LTS (Long Term Support) version for your operating system — Windows, macOS, or Linux. Run the installer and follow the prompts. This installs both Node.js and npm together.

After installation, open your terminal or command prompt and type node --version and npm --version to confirm both installed correctly. You should see version numbers for each.

Node.js and npm are separate from your browser. They run on your computer and handle the behind-the-scenes work of preparing your React code for the browser to understand.

Create a new React project with Create React App

Open your terminal and navigate to the folder where you want to store your project. Then run this command:

npx create-react-app my-app

Replace my-app with whatever you want to name your project. This command downloads Create React App and uses it to build a new folder with all the files and settings React needs. The process takes a few minutes.

When it finishes, you will have a folder named my-app (or whatever you named it) containing a complete React project ready to edit.

Start the development server and see your project in the browser

In your terminal, navigate into your project folder by typing cd my-app. Then run:

npm start

This command starts a local development server on your computer. Your browser should open automatically and show a page with the React logo and some text. The address bar will show something like localhost:3000 — that is your computer acting as a temporary web server.

While npm start is running, any changes you make to your code files are automatically reloaded in the browser. This is called hot reloading and saves you from manually refreshing the page each time.

Understand the project folder structure

Create React App generates several folders and files. The ones you will edit most often are in the src folder:

  • App.js — the main React component that displays on the page
  • index.js — the entry point that tells React where to render your app in the HTML
  • App.css — styles for the App component

The public folder contains index.html, the single HTML file that React uses. React inserts components into a <div id="root"> tag in that file. You rarely need to edit index.html directly.

The node_modules folder contains all the libraries npm downloaded — React, ReactDOM, and hundreds of dependencies. Do not edit anything in this folder; npm manages it automatically.

Edit your first React component

Open src/App.js in a text editor. You will see a function that returns JSX — a syntax that looks like HTML but is actually JavaScript. Replace the content with:

function App() { return <h1>Hello, React</h1>; } export default App;

Save the file. Your browser should update automatically and show "Hello, React" on the page. This is your first React component working.

JSX lets you write HTML-like code inside JavaScript. React converts it to actual HTML and JavaScript that the browser understands. This is why you need the build process — the browser cannot read JSX directly.

Stop the development server and prepare to publish

When you are ready to put your project online, press Ctrl+C (or Cmd+C on macOS) in your terminal to stop the development server.

Then run:

npm run build

This command creates a build folder containing optimized, minified versions of your code ready for a web server. The files in build are what you upload to a hosting service like Netlify, Vercel, or a traditional web host.

During development, you use npm start. When publishing, you use the files from the build folder.

Frequently Asked Questions

Do I need to learn Node.js to use React?

No. Node.js and npm are tools that manage React behind the scenes. You write React code in JavaScript and JSX, not Node.js code. Node.js straightforward runs the build process on your computer.

Can I use React without Create React App?

Yes, but it requires manually setting up webpack, Babel, and other build tools. Create React App handles this for you, so it is the recommended starting point. Once you understand React, you can learn to configure builds yourself.

What is the difference between npm start and npm run build?

npm start runs a development server on your computer with hot reloading — useful while you are writing code. npm run build creates optimized files for publishing online. Use npm start while developing, and npm run build when you are ready to go live.

Why do I need a build process if I already know HTML, CSS, and JavaScript?

React uses JSX, which browsers do not understand natively. The build process converts JSX to regular JavaScript, combines multiple files into fewer files, and removes unused code to make your project smaller and faster. This happens automatically behind the scenes.

Where do I upload my React project after building it?

Upload the contents of the build folder to a hosting service. Netlify and Vercel are popular choices that connect directly to your code repository and rebuild automatically when you push changes. Traditional web hosts like GoDaddy or Bluehost also work if you upload files manually via FTP.