Unlike the headless CMS who claim to be "the perfect CMS for React", but they are really just APIs with no connection with the front-end technology, React Bricks is created from the ground up in React with TypeScript and meant to be used with React.
React Bricks infact is both a React library (to create your content blocks as React components and edit content) and a SaaS where the content is persisted.
A React Bricks application (for example created with Next.js or Gatbsy) is composed of:
This front-end application talks with React Bricks APIs to persist and retrieve the content and to process images which are optimized for responsive view and blur-up lazy loading and served from a fast global CDN.
The bricks are your content blocks, the different Lego bricks that your content editors may use to compose the pages.
They are just React components which import React Bricks' special visual editing componentds and render them in the returned JSX.
Another peculiarity is that they must have a "schema" static property which defines the brick name, label, default values, which props can be edited via sidebar controls (and with which type of control), eventual repeating nested items, etc.
Almost everything in React Bricks is customizable.
For example, you can provide your own components as sidebar controls (want a custom color picker? great!), you can create your own visual editing components, you can have custom fields on pages, you can access everything in your content blocks via hooks, you can configure from the logo to the responsive breakpoints, or use any React framework, any router, and so on...
React Bricks works with any CSS framework and any CSS-in-js library that our customers tried so far.
With React Bricks you don't have to go back and forth between the headless CMS where you set up fields, queries to fetch those fields and the React frontend where you finally use them.
You define your fields as props of your component, never leaving your code editor with your React project.
There are many ways to learn React Bricks. We suggest you to start with the Tutorial.
The Tutorial will guide you step-by-step in the set up of a new React Bricks App, the creation of content blocks and the deployment in production.
You gain points as you proceed and as you correctly answer the question at the end of each section... with a final surprise!Go to the Step by step Tutorial
Since React Bricks is very flexible, when you need to find how to do something, the Documentation comes in handy. It is very complete and with a powerful search.Go to the Documentation
We are preparing a video introduction and a set of "how to" videos. Stay tuned!