Guide · Open source
How to use React: install, render your first component
Updated · written with AI from the project's own documentation and checked against our catalogue data
React is a JavaScript library for building user interfaces. You describe what the screen should look like for each state of your data, and React updates only the parts that change. This guide walks through installing React with npm, rendering a first component, and deciding whether React fits your project.
Reactreact/react · ★ 252k · MIT Install options & downloads Quick start
- 1Install Node.js. React's listed prerequisite is Node.js. Install it before continuing.
- 2Install React and React DOM. Run npm install react react-dom in your project folder.
- 3Create a root element. Import createRoot from react-dom/client and pass it a container element from your page.
- 4Define a component. Write a function that takes props and returns markup, such as HelloMessage with a name prop.
- 5Render the component. Call root.render with your component to display it in the page.
- 6Read the docs. Work through the Quick Start and Tutorial on react.dev to learn state and composition.
What React is and what it is not
React is a library for building user interfaces. It is built around components: small, self-contained pieces of UI that you combine into larger screens. Each component can manage its own state, and you can pass data between components.
The README describes React as declarative. You design a simple view for each state of your application, and React efficiently updates and renders the right components when your data changes.
- Declarative: describe the view for each state, and React handles updates.
- Component-based: build encapsulated components and compose them.
- Flexible: React makes no assumptions about the rest of your stack, so you can add it to existing code.
- Beyond the browser: React can render on the server using Node and power mobile apps through React Native.
Install React with npm
The listed prerequisite is Node.js. React is installed from npm, the Node package manager, along with React DOM, which renders React into a web page.
Run the install command from your project folder.
- Install Node.js first, since the install uses npm.
- React and React DOM are installed together.
npm install react react-domRender your first component
The README's first example imports createRoot from react-dom/client, defines a component called HelloMessage that takes a name prop, and renders it into an element with the id container on the page.
The example uses JSX, an HTML-like syntax. The README notes that JSX is not required to use React, but it makes code more readable.
- Create a root with createRoot, passing the page element.
- Call root.render with your component.
- The example renders "Hello Taylor" into the container.
import { createRoot } from 'react-dom/client';
function HelloMessage({ name }) {
return <div>Hello {name}</div>;
}
const root = createRoot(document.getElementById('container'));
root.render(<HelloMessage name="Taylor" />);Choose how far to adopt React
The README says React was designed for gradual adoption. You can use as little or as much as you need, so you do not have to rebuild an existing app to start.
For a new project, the README points to a separate toolchain called Create a New React App. For a first taste, use the Quick Start guide on react.dev.
- Quick Start: get a taste of React.
- Add React to an Existing Project: use React in part of an app.
- Create a New React App: a more complete JavaScript toolchain for new projects.
Where to learn more
The official documentation at react.dev is divided into sections. The Tutorial is a tic-tac-toe walkthrough, and Thinking in React explains how to approach building a UI as components. The API Reference covers the details.
If you want to help improve React, the README links to a Contributing Guide and a list of good first issues on GitHub.
- Tutorial: a tic-tac-toe project.
- Thinking in React: how to structure a UI.
- API Reference: details of React's functions.
What people use it for
- Building interactive web interfaces with JavaScript.
- Adding React gradually to an existing project.
- Reusing the same component model for mobile apps through React Native.
- Rendering pages on the server with Node.
- Learning how modern front-end user interfaces are structured.
Frequently asked questions
Is React free to use?
Yes. React is MIT licensed, as stated in the README's License section. You can read the full license in the repository's LICENSE file.
What do I need before installing React?
The listed prerequisite is Node.js. React is installed from npm with the command npm install react react-dom.
Is React a full framework?
No. The README says React makes no assumptions about the rest of your stack. For routing and data fetching in a new project, it points to a separate toolchain, Create a New React App.
Do I have to use JSX?
No. The README says JSX is not required to use React, but it makes code more readable and feels like writing HTML.
Can I use React for mobile apps?
The README says React can power mobile apps using React Native, so you can reuse the same component model there.
How does React compare to Vue, Svelte, Angular or Preact?
Vue, Svelte, Angular and Preact are comparable projects. This source does not compare their features, so check each project's documentation against your needs.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use React if you are building interactive web interfaces in JavaScript, want to add it gradually to an existing project, or want to reuse components in React Native. Pick something else if you want a complete, opinionated framework with routing and data fetching built in, or if you need a no-code website builder.
Install options & downloads