Quick Start Guide

Welcome to the React Bricks Quick Start Guide!

If you are coming here from a running starter project, you can skip to step 3.
Otherwise, read on! 😊

Step 1: create a free account

Click the button, fill in your data, confirm your email address and... see here again in 2 minutes!

Create a free account

---

Step 2: create a new project

Be sure you have a Node.js (at least 16) installed on your machine and, from the shell (prompt), launch the following command:

npx create-reactbricks-app@latest

Once the CLI has finished, you can enter the app folder (cd your-app) and launch the app (yarn dev for Next.js or Remix, yarn start for Gatsby).

---

Step 3: Try the editing interface

It's time to look at React Bricks visual editing interface!

For your convenience, in the starter projects we put an "Edit content" button in the header (which you will remove for a real project). Click on the button and log in using the credentials you chose when you registered.

Look around and try to edit the content, add new blocks, remove blocks, save, or create new pages. This is the kind of experience your editors will get.

---

Step 4: Look at the code

Now, let's have a look at the code: the project is a Next.js, Gatsby or Remix website.

There is a special "react-bricks" directory which has the configuration for React Bricks and some example bricks (the content blocks).

If you chose a starter with Tailwind CSS, you will find a "react-bricks-ui" folder with a complete design system you can use to play with React Bricks and as a reference for your own bricks.

Once you are familiar with the directory structure, it's time to create your own bricks and dive a bit deeper into React Bricks. To do this, we suggest that you follow the Step-by-step interactive tutorial.

---

Step 5: Deep-dive

When you are ready to learn the complete React Bricks framework, we suggest that you read the full documentation.

Even if you skim the pages, it's important to see what's possible, so that, when you create your real project, you will know where to look when you are stuck.