> ## Documentation Index
> Fetch the complete documentation index at: https://buttercms.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React starter project

> Get up and running with React and ButterCMS in under two minutes, with a starter that showcases Pages, Collections, and a Blog engine.

<Info>
  **One-Click Deploy**: Skip local setup and [deploy to Vercel instantly](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Freact-starter-buttercms\&env=VITE_BUTTER_CMS_API_KEY\&envDescription=Your%20ButterCMS%20API%20Token\&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F).
</Info>

## Quick start

Install dependencies and run setup commands.

```bash theme={null}
git clone https://github.com/ButterCMS/react-starter-buttercms.git
cd react-starter-buttercms
npm install
```

Add your API token as an environment variable and run development server

```bash theme={null}
$ echo 'VITE_BUTTER_CMS_API_KEY=<Your API Token>' >> .env
$ npm run dev
```

**Local Development**: [http://localhost:3000/](http://localhost:3000/)

**GitHub Repository**: [https://github.com/ButterCMS/react-starter-buttercms](https://github.com/ButterCMS/react-starter-buttercms)

## What's included

| Feature                | Description                                                   |
| ---------------------- | ------------------------------------------------------------- |
| **Pages & Page Types** | Pre-built page templates with drag-and-drop schema definition |
| **Components**         | Modular content blocks for dynamic landing pages              |
| **Collections**        | Structured data for navigation, testimonials, FAQs            |
| **Blog Engine**        | Full blog with posts, categories, tags, and search            |
| **Media CDN**          | Automatic image optimization via Filestack                    |

## Deploy options

<CardGroup cols={1}>
  <Card title="Deploy to Vercel" icon="triangle" href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Freact-starter-buttercms&env=BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F">
    One-click deploy with automatic builds on content changes
  </Card>
</CardGroup>

## Resources

<CardGroup cols={2}>
  <Card title="GitHub Repository" icon="github" href="https://github.com/ButterCMS/react-starter-buttercms">
    View source code and contribute
  </Card>

  <Card title="React Guide" icon="book" href="../../frameworks/javascript-frameworks/react">
    Framework integration guide
  </Card>
</CardGroup>

## Additional reading

* [React vs React Native: Differences, Advantages & Limitations](https://buttercms.com/blog/react-vs-react-native/)
* [Vue vs React: Which is the Better Framework? (2021 Update)](https://buttercms.com/blog/vue-vs-react-which-is-the-better-framework/)
* [Angular vs React: Which Framework Is Best for Your Next Project?](https://buttercms.com/blog/angular-vs-react/)

## Next steps

<CardGroup cols={2}>
  <Card title="Core Concepts" icon="book" href="../../core-concepts/content-types/pages">
    Learn about Pages, Collections, and Components
  </Card>

  <Card title="API Reference" icon="code" href="../../api">
    Explore the full ButterCMS API
  </Card>
</CardGroup>