DocumentationBlocks LibraryGuidesGitHub

Create React App

Add Reflexjs to a Create React App project.

Create a new App

Start by creating a new app using create-react-app.

npx create-react-app my-app

Install dependencies

npm i reflexjs

Create a theme

Generate a theme using the Reflexjs CLI utility.

npx reflexjs --preset base

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

⚠️ Move theme.js inside the src directory.

Update index.js

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import theme from "./theme"
import { ThemeProvider } from "reflexjs"
<ThemeProvider theme={theme}>
<App />
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:

You are now ready to start using Reflexjs to style your pages.

Import JSX Pragma

Reflexjs uses a custom jsx pragma to convert style props. To enable this pragma, add the following to the top of you .jsx or .tsx files.

/** @jsxImportSource "reflexjs" */


/** @jsxImportSource "reflexjs" */
function App() {
return (
<div p="10" textAlign="center">
<p color="primary">
Edit <code>src/App.js</code> and save to reload.
export default App
GatsbyTheme Specification

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub