
## Using a starter

Use the [gatsby-starter](https://github.com/reflexjs/gatsby-starter) template to create your next Gatsby + Reflexjs site.

```sh
gatsby new site reflexjs/gatsby-starter
```

Once your site is ready, you can run `yarn dev` to start the development environment.

## Add to existing site

You can also add Reflexjs to an existing Gatsby site.

### Install dependencies

```sh
npm i reflexjs gatsby-plugin-reflexjs babel-preset-gatsby @babel/preset-react
```

### Create a theme

Generate a theme using the Reflexjs CLI utility.

```sh
npx reflexjs --preset base
```

This will create a `theme.js` file using the _base_ preset at the root of your project.

⚠️ Move your theme to `src/gatsby-plugin-reflexjs/index.js`.

### Enable the plugin

Enable the `gatsby-plugin-reflexjs` in your `gatsby-config.js` file.

```js title=gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-reflexjs`],
}
```

### Add the Babel preset

Reflexjs uses a custom `jsx` pragma to convert style props. To enable this pragma, create a `.babelrc` file at the root of your project with the following:

```json
{
  "presets": [
    "babel-preset-gatsby",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic",
        "importSource": "reflexjs"
      }
    ]
  ]
}
```

<Callout>
  
This preset automatically sets the `jsx` pragma for you so that you don't need to import it in individual files

If you prefer manually enabling it, you can set the pragma in your file as follow:

```tsx title=src/pages/index.js
/** @jsxImportSource "reflexjs" */
import * as React from "react"

export default function IndexPage() {
  return <p variant="text">Hello World!</p>
}
```

</Callout>

You are now ready to start the development server using `gatsby develop`.


Gatsby

Using a starter