Posted By Sebastian

Modern React From The Beginning Excursus: Strapi As Back-End

Subscribe On YouTube


Up to this point we’ve already developed our React application and thereby covered concepts and techniques of a modern React application.

We’ve also learned how to manage data within out React application by using state and techniques for asynchronous data handling. However, up until now the data which is used in out application is coming from inside of our component. In most real-world scenarios the data which is used and processed in the React front-end application is not defined and created in the React application itself. Instead a connection to a back-end is used for data access.

There are many possibilities of back-end technologies which can be used together with your React front-end application. In most cases you’ll end up using a back-end technology which is accessible via web services (e.g. REST web services) or GraphQL.

Implementing A Back-End With Strapi

So before we’re able to extend our React application to retrieve data from a back-end we need to implement a back-end server and make web services available.

Of course you can implement such a back-end from scratch. However there is a much easier approach: using a headless CMS like Strapi.

Strapi – A Headless Node.js-based CMS System For Building Back-Ends

Strapi is a new generation of Content Management Systems (CMS), a headless CMS. It offers basic CMS functionalities for managing content and users.

Strapi gives you freedom of choosing the rest of the components of your website including database and the technology you want to use to present your content (e.g. front-end frameworks). That’s the reason why Strapi is categorized as a headless CMS.

Strapi is based on JavaScript and Node.js. You can create and manage your content easily and then access it via REST web services or GraphQL.

What’s Next – A New Tutorial Series On Strapi

Before we’re going to move on with our React application we’re going to cover Starpi in a separate tutorial series next. With that tutorial you’ll be able to learn everything you need to know to setup a Strapi back-end from scratch. This series can be used independently from the Modern React From The Beginning tutorial but at the same time will be the basis to continue the the React series.

Advertisement: Top 3 React Online Courses

If you want to dive deeper and become a React pro also consider taking one of the following great online courses.

React – The Complete Guide (incl Hooks, React Router, Redux)*
Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Go To Course*

Modern React with Redux*
Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

Go To Course*

The Complete React Developer Course (w/ Hooks and Redux)*
Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

Go To Course*

If you’d like to learn Strapi from the ground up you should also take a look at the following course:

The Complete Strapi Course*
Build Apps at the speed of thought with the simplest most versatile open source headless CMS

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!

Using and writing about best practices and latest technologies in web design & development is my passion.