How to use Reflex with Create React App

Learn how to use Reflex components and blocks in a non-Gatsby app.

Arshad

- June 29, 2020 - 1 min read

Reflex components and blocks can be used in any React app and are not limited to Gatsby.

Here's how to use Reflex with Create React App:

Step 1: Create a new React app

npx create-react-app my-app

Step 2: Add Reflex components and the base preset

npm i @reflexjs/components @reflexjs/preset-base

Step 3: Wrap your <App /> in a ThemeProvider

src/index.js

import React from "react"
import ReactDOM from "react-dom"
import { ThemeProvider } from "theme-ui"
import theme from "@reflexjs/preset-base"
import App from "./App"
const rootElement = document.getElementById("root")
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  rootElement
)

You can now use Reflex components in any component.

src/App.js

import React from "react"
import {
  Section,
  H1,
  P,
  Button,
  Container,
} from "@reflexjs/components"
export default function App() {
  return (
    <Section py="8|12|16|24">
      <Container>
        <H1 m="0" fontWeight="extrabold" lineHeight="tight">
          Experiences that sell.
        </H1>
        <P fontSize="xl|2xl" mt="2">
          We connect you to the exclusive works from top artists around the
          world.
        </P>
        <Button variant="primary">Get Started</Button>
        </Grid>
      </Container>
    </Section>
  )
}

Check out the codesandbox example.