Modern React From The Beginning Excursus: Strapi As Back-End
Subscribe On YouTube
- Episode 1: Creating Your First React App
- Episode 2: Starting With React Components & JSX
- Episode 3: Working With Lists
- Episode 4: Multiple Components
- Episode 5: Introducing Arrow Functions And Object Destructuring
- Episode 6: Event Handling
- Episode 7: State Management
- Episode 8: Extracting Components
- Episode 9: Using The Effect Hook
- Episode 10: Handling Of Asynchronous Data
- Episode 11: Reducer Hook For Advanced State Management
- Episode 12: Adding A Delete Action
- Excursus: Strapi As Back-End
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.
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!
Modern React with Redux*
Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!
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!
The Complete Strapi Course*
Build Apps at the speed of thought with the simplest most versatile open source headless CMS
* 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!