What React is and why you install it separately

React is a JavaScript library that makes it easier to build interactive websites. Unlike HTML and CSS, which browsers understand natively, React code needs to be processed before a browser can use it. You install React on your computer as a development tool, write your code in React's format, and then React converts it into regular JavaScript that browsers can run.

You do not add React to a website the way you add a stylesheet. Instead, you set up a project folder on your computer, install React and its related tools into that folder, write your code there, and then build it into files ready for the web. This separation between your development environment and the final website is what makes React powerful — it lets you write cleaner code that gets automatically optimized before anyone sees it.

Key Takeaways

  • You need Node.js installed first, which gives you npm (a package manager that downloads React and other tools).
  • Create a new React project using the command npx create-react-app project-name, which sets up all the folders and files you need in one step.
  • Navigate into your project folder and run npm start to see your React site running in your browser at localhost:3000.
  • React projects use a folder structure where components live in separate files, and the src folder is where you write most of your code.

Install Node.js and npm first

React depends on Node.js, which is a version of JavaScript that runs on your computer instead of in a browser. When you install Node.js, you automatically get npm (Node Package Manager), which is the tool that downloads React and keeps track of all the other code your project needs.

Go to nodejs.org and read the LTS (Long Term Support) version for your operating system — Windows, Mac, or Linux. Run the installer and follow the prompts. Accept the default settings unless you have a specific reason to change them. After installation finishes, open a terminal or command prompt and type node --version and npm --version to confirm both installed correctly. You should see version numbers for each.

Create a new React project with create-react-app

The fastest way to start is using a tool called create-react-app, which sets up a complete React project with all the necessary files and configuration already in place. You do not have to manually create folders or install individual packages — create-react-app does it all.

Open your terminal or command prompt, navigate to the folder where you want to keep your projects, and run this command: npx create-react-app my-app. Replace "my-app" with whatever you want to call your project. The command will take a few minutes to read React, webpack (a tool that bundles your code), and other dependencies. When it finishes, you will see a message telling you the project is ready.

Navigate to your project and start the development server

Once create-react-app finishes, you need to move into your project folder. In your terminal, type cd my-app (using your actual project name). Then type npm start. This command starts a development server — a temporary web server running on your computer that lets you see your React site in real time.

Your browser should automatically open to localhost:3000, and you will see the default React welcome page. This page is not your actual site yet — it is just a template. The important thing is that React is running and you can see changes when ready. If you edit a file in your project, the page in your browser updates automatically without you having to refresh.

Understand the project folder structure

When create-react-app finishes, it creates several folders and files. The most important ones are in the src folder, which is where you write your React code. Inside src, you will find App.js (the main component), index.js (the entry point that tells React where to put your code in the HTML), and App.css (styles for your App component).

The public folder contains index.html, which is the actual HTML file that browsers load. React injects your components into a div with id="root" inside this file. The node_modules folder holds all the code you downloaded — React itself, webpack, and hundreds of other packages. You do not edit anything in node_modules; npm manages it for you. The package.json file is a list of all your project's dependencies and the scripts you can run (like npm start).

Edit your first component and see changes live

Open the src folder and find App.js. This file contains your first React component — a function that returns JSX, which looks like HTML but is actually JavaScript. Delete the existing code and replace it with this straightforward example:

function App() { return ( <div> <h1>Hello, React</h1> <p>This is my first React project.</p> </div> ); } export default App;

Save the file. Your browser at localhost:3000 should update when ready to show your new text. This is the core React workflow: write code in your editor, save it, and see the result when ready. As you build more complex components, this when ready feedback makes development much faster than traditional web development.

Build your project for the web when you are ready to publish

While you are developing, npm start runs a development server that is not optimized for speed or file size. When you are ready to put your site on the internet, you need to build it into production files. In your terminal, run npm run build. This command compresses your code, removes unnecessary parts, and creates a folder called build with files ready for a web server.

The build process takes a minute or two. When it finishes, the build folder contains everything you need to upload to a hosting service. You do not upload the src folder or node_modules — only the contents of the build folder go to the web. Many hosting services like Netlify and Vercel can automate this process, but understanding that npm run build is the step that prepares your code for the public web is the key concept.

Frequently Asked Questions

Do I need to know JavaScript before installing React?

Yes. React is a JavaScript library, so you should understand variables, functions, and how objects work. You do not need to be an informed, but if you have not written JavaScript before, learning the basics first will make React much clearer. React adds a layer on top of JavaScript; it does not replace it.

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

npm start runs a development server on your computer where you can test and edit your code with when ready updates. npm run build creates optimized files ready to upload to the internet. Use npm start while you are working, and npm run build only when your project is finished and you want to publish it.

Can I install React into an existing HTML file?

Yes, but it is more complicated. You can add React to a single HTML page using a script tag, but you lose the benefits of the development workflow and build tools. For learning and real projects, using create-react-app is the standard approach because it handles all the setup automatically.

What if npm start does not open my browser automatically?

Open your browser manually and go to localhost:3000. If nothing appears, check your terminal for error messages. Common issues are that port 3000 is already in use, or Node.js did not install correctly. Restarting your terminal or computer often fixes these problems.

Do I need to install React every time I create a new project?

No. You install Node.js once on your computer. After that, create-react-app downloads React for each new project into that project's folder. You only run npm install if you are working on someone else's project and need to read their specific dependencies.