React Bricks: a CMS with visual editing based on React components

Bookmark

Headless CMSs are great for developers, but not for content creators.


React Bricks is the first CMS that is super-great for Developers (it's just React, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works!

24 min
31 Aug, 2021

Comments

Sign in or register to post your comment.
AI generated transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.
Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022 
TestJS Summit 2022TestJS Summit 2022
25 min
CCTDD: Cypress Component Test Driven Design
The first part of the talk will focus on a variety of patterns when using Cypress Component Testing and TDD to create React components. The code samples will be from Angular's Tour of Heroes to make the content relatable to a wider community. Currently I am working on a GitBook rewriting it in React using Cypress Component Tests, there should be plenty of content to distill into the talk.
The second part of the talk will focus on test strategies, types of testing and where to apply them, and finally compare
&
contrast them to the familiar industry approaches.
We will finish with key takeaways, sample application repos to help with learning, and rollout strategies.
React Summit 2022React Summit 2022
8 min
How to achieve layout composition in React
Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.

Workshops on related topic

React Summit 2022React Summit 2022
148 min
Hands-on with AG Grid's React Data Grid
Workshop Free
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.
- Getting started and installing AG Grid
- Configuring sorting, filtering, pagination
- Loading data into the grid
- The grid API
- Using hooks and functional components with AG Grid
- Capabilities of the free community edition of AG Grid
- Customizing the grid with React Components
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
Workshop Free
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
React Summit 2023React Summit 2023
32 min
From Idea to Production: React Development with a Visual Twist
Workshop Free
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: 
- Download
&
Setup: Getting Codux Ready for the Workshop
- Project Picker: Cloning and Installing a Demo Project
- Introduction to Codux Core Concepts and Its UI
- Exercise 1: Finding our Feet
- Break
- Exercise 2: Making Changes While Staying Effective
- Exercise 3: Reusability and Edge Case Validation
- Summary, Wrap-Up, and Q
&
A
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
Workshop Free
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:
- Introduction to Localization
- Introduction to Contentful
- Localization in Contentful
- Introduction to Remix
- Setting up a new Remix project
- Rendering content on the website
- Implementing Localization in Remix Website
- Recap
- Next Steps
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Crash Course into Remix & Storyblok
Workshop Free
You may read already about Remix. You probably already used it, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why Storyblok in combination with Remix is the best combo for your next project. Stop by and try it yourself!
Table of content: 
- Introduction to Remix, atomic design
&
the headless world
- Environment setup
- Creating pages and understanding how the dynamic routing splat routes works
- Future tips and Q
&
A
Prerequisite(s): Node.js installed, GitHub account.
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
Workshop Free
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.