• Post category:StudyBullet-3
  • Reading time:4 mins read


Using Headless CMS Strapi to build a todo app with React

What you will learn

Learn how to build api with Headless CMS Strapi

Experience how it can suit any framework

Create a crud application with Strapi

Review React basic feature to create app with Strapi

Description

Why use Strapi?

Strapi is an open-source, Node js-based Headless CMS that saves developers a lot of time while allowing them to use their preferred tools and frameworks. Strapi also allows content editors to automate the delivery of content (text, photos, video, and so on) across all devices.

Why React?

React js is an open-source JavaScript package that is used to create single-page apps user interfaces. For web and mobile apps, it’s utilized to manage the view layer. We can also make reusable UI components with React. Jordan Walke, a Facebook software engineer, was the first to create React. In 2011, React was launched on Facebook’s newsfeed, followed by Instagram in 2012.


Get Instant Notification of New Courses on our Telegram channel.


Developers may use React to build massive web applications that can alter data without reloading the page. React’s major goal is to be quick, scalable, and easy to use. It only works on the application’s user interfaces. This relates to the MVC template’s view. It could be you.

In this course, we will walk you through

  • Deploy Strapi to Heroku
  • Learn CRUD operation by making a Strapi todo app
  • Add the todos collection in localhost Strapi
  • Prepare the APIs in the React App
  • Read the todos
  • Create todo
  • Delete a specific todo
  • Add styles to the todo app
  • Detect whether the input element is clicked or not
  • Set the edit mode and non edit mode
  • Create the update function
English
language

Content

Introduction
Deploy strapi to Heroku
Learn CRUD operation by making a Strapi todo app
Add the todos collection in localhost Strapi
Prepare the APIs in the React App
Read the todos
Create todo
Delete a specific todo
Add styles to the todo app
Detect whether the input element is clicked or not
Set the edit mode and non edit mode
Create the update function