# React

import { PagesBuildPreset, Render, PackageManagers, DashButton } from "~/components";

[React](https://reactjs.org/) is a popular framework for building reactive and powerful front-end applications, built by the open-source team at Facebook.

In this guide, you will create a new React application and deploy it using Cloudflare Pages.

## Setting up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate React's official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new React project, run the following command:

<PackageManagers
	type="create"
	pkg="cloudflare@latest"
	args="my-react-app --framework=react --platform=pages"
/>

`create-cloudflare` will install dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI and the Cloudflare Pages adapter, and ask you setup questions.

Go to the application's directory:

```sh
cd my-react-app
```

From here you can run your application with:

```sh
npm run dev
```

<Render file="tutorials-before-you-start" product="pages" />

<Render
	file="framework-guides/create-github-repository_no_init"
	product="pages"
/>

## Deploy with Cloudflare Pages

<Render file="deploy-via-c3" product="pages" params={{ name: "React" }} />

### Deploy via the Cloudflare dashboard

1. In the Cloudflare dashboard, go to the **Workers & Pages** page.

   <DashButton url="/?to=/:account/workers-and-pages" />
2. Select **Create application** > **Pages** > **Import an existing Git repository**.
3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:

<div>

<PagesBuildPreset framework="react" />

</div>

After configuring your site, you can begin your first deploy. You should see Cloudflare Pages installing `react`, your project dependencies, and building your site, before deploying it.

:::note

For the complete guide to deploying your first site to Cloudflare Pages, refer to the [Get started guide](/pages/get-started/).

:::

After deploying your site, you will receive a unique subdomain for your project on `*.pages.dev`.
Every time you commit new code to your React application, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes look to your site before deploying them to production.

:::note[SPA rendering]

By default, Cloudflare Pages assumes you are developing a single-page application. Refer to [Serving Pages](/pages/configuration/serving-pages/#single-page-application-spa-rendering) for more information.

:::

<Render
	file="framework-guides/learn-more"
	product="pages"
	params={{ one: "React" }}
/>