Mobile Menu
BOOK A CALL
Home
Integrations
React

Integrate React with Webiny 

Headless CMS

Building user interfaces with React using Webiny as a data source using our GraphQL APIs makes for a declarative, clean and efficient codebase.

Why React?

React is so ubiquitous to the frontend development scene these days that the technology hardly needs an introduction. React makes it easy to create interactive UIs. It does this by creating a representation of the DOM, called the Virtual DOM, and updating only the right components when your data changes.

Why Webiny?

Webiny Headless CMS contains everything an enterprise needs to build, manage and deliver content at scale.


Webiny doesn't just manage your content, it also allows you to manage all of your projects centrally using built-in internationalization and multi-site features, and use advanced processes that support organization-wide collaboration.

React + Webiny integration

You can easily build a dynamic site or complex application with React and use Webiny to decouple engineering needs from your marketing team using a highly-scalable, fault-tolerant Serverless service that scales in and out in seconds. Use a single Webiny instance to manage content for an unlimited number of websites. All under one tenant in your own security perimeter.

React Benefits

Declaratively create interactive UIs.

Build encapsulated components that manage their own state.

Easily pass rich data through your app and keep state out of the DOM.

Also render your UI on the server using Node.

Webiny Headless CMS Benefits 

Keep your data in your cloud, under your own security perimeter.

Unlock greater performance by storing and delivering content closer to your users.

Webiny runs on highly-scalable fault-tolerant serverless services that scale in and out in seconds.

Marketing teams have full control to create and manage content, landing pages, files, and forms across multiple web properties.

Webiny is open source, released under an MIT license, and architected for extensibility.

Building a Frontend With React

Learn how to build a frontend for Webiny Headless CMS using React.

Step 1

Install and Deploy Webiny

Skip this step if you already have Webiny installed and deployed. Be sure to check out the prerequisites for installing Webiny on your local machine.

Then, create a new Webiny project by running the following command. If you get stuck or for more details, please see our documentation.

npx create-webiny-project my-webiny-project
Copy
Step 2

Create a new React site

Run the following command to create a React application bootstrapped with Facebook's Create React App tool.

Visit the React documentation to find out more.

npx create-react-app my-react-app
Copy
Step 3

Add and Configure React Apollo

Add Apollo Client and follow the instructions in the docs to configure it to connect to Webiny's GraphQL API using the API URL and your API Token.

Webiny API instructions →

npm install @apollo/client graphql
Copy

Check out these tutorials on using

Webiny + React on our blog

Menard Maranan

How to Build a Custom Field Plugin for Webiny Headless CMS

In this tutorial we will create a custom field type for Webiny Headless CMS.


Taminoturoko Briggs

Build a Job Board with React and GraphQL using Webiny Headless CMS

In this tutorial, we will learn about Webiny CMS and how to use it in React by building a job board application.

Victory Tuduo

Build a Marketing Site with Forms Functionality in React using Webiny

In this tutorial, we will learn about Webiny CMS and how to use it in React by building a marketing site with forms.

Christopher Okoro

Building a Voice Controlled News Application using React, Alan AI, and Webiny CMS

In this tutorial, we'll be building a voice-controlled news application using React, Alan AI, and Webiny CMS.

Taminoturoko Briggs

How to Implement Pagination with Webiny Headless CMS in React

In this tutorial, we are going to learn how to implement cursor-based pagination when using Webiny headless CMS in React.


Victory Tuduo

Build a ToDo app with React, Tailwind and Webiny Headless CMS

Create and destroy items on this ToDo list application using React and Tailwind with Webiny as a data source.


Working on a larger project that requires a Headless CMS?

Book a demo

Other Integrations

Webiny also supports other frontend technologies.

Gatsby logo

Gatsby

Gatsby integrates different content, APIs and services seamlessly into one experience.

Discover more →
Next.js logo

Next.js

Next.js is a React framework that lets you build hybrid static and server rendered applications.

Discover more →
Vue.js logo

Vue.js

Vue.js is an approachable, performant and versatile framework for building web user interfaces.

Discover more →
Flutter logo

Flutter

Build apps for any screen with Flutter. Compiles to mobile, web, desktop and JavaScript runtimes.

Discover more →
DevelopersInstall WebinyLicenseGitHub repositoryContribute
ProductsHeadless CMSPage BuilderFile ManagerForm BuilderPublishing WorkflowControl Panel
FeaturesMulti TenancySelf HostedOpen SourceServerless InfrastructureDevelopment FrameworkCMS+
IntegrationsNext.js CMSGatsby CMSReact CMSVue.js CMSFlutter CMS
ResourcesEnterpriseSlackBlogYouTubePartnersKnowledge Base
CompanyAbout UsCareersPrivacy PolicyTerms of ServiceContact Us
Webiny Inc © 2024
Email
  • We send one newsletter a week.
  • Contains only Webiny relevant content.
  • Your email is not shared with any 3rd parties.
Webiny Inc © 2024
Webiny Chat

Find us on Slack

Webiny Community Slack
or

Book a product demo

Webiny Product Demo call
By using this website you agree to our privacy policy