If you own a website, it is obvious that you have worked on a CMS (Content Management System). A content management system is an awesome tool used by developers and non-developers to create, manage and scale a website. However, in today’s rapidly changing world, it can be tough to handle the competition with a traditional CMS.
Traditional content management systems have both frontend and backend connected via application code base. On the other hand, headless CMS like Strapi has no link between the content at the backend and the front end.
The core thing to understand here is that headless CMS like Strapi allows the developers to be more flexible. They can choose their preferred UI, tech stack, frameworks, etc., to make the content shareable across multiple channels at once.
What is Strapi?
Like many other CMSs, Strapi is an open-source content management system that is headless. Headless here means that it does not have a front end.
Developers can use different types of user interfaces and tools to deliver content across various channels in various ways. Strapi provides developers with APIs like GraphQL and RESTful to create and manage content.
The Importance of React!
As Strapi is a headless CMS, there can be various frameworks that you, as a developer, can use to deliver top-notch content to your audience.
React is one of the finest Javascript libraries that can make API calls to the backend. It is a front-end library developed by Facebook.
How to use React with Strapi?
The marriage of React and Strapi can be the perfect thing to boost user experience. Therefore, if you are planning to implement them, this section will be fruitful for you. Let’s begin by setting up the headless CMS, Strapi!
Setting up Strapi!
To handle the API calls and keep data in the backend, you need an interface. Strapi provides you with a great one.
However, you have to create an app for that. To access the admin panel and create the app, use any of the mentioned commands.
npm npx create-strapi-app thesecret-project –quickstart yarn yarn install global create-strapi-app
yarn create-strapi-app thesecret-project –quickstart
yarn version 3 and above yarn dlx create-strapi-app thesecret-project –quickstart
When the application is created from your end, you can use the development mode of the application to make data collections in the backend. When the development mode is activated, it provides you with a server where you can manage data collections and create API endpoints to access those collections.
To use the development mode, use the following commands!
npm run develop
yarn run develop
Note: You need to run these commands in the secret-project folder.
Next, go to the address bar and enter http://localhost:1337/admin. It will open the admin screen where you need to fill in all your necessary details.
When you fill-up the form, you will land on the dashboard page of the app. The dashboard allows you to perform all the necessary operations of the app.
Let’s begin by creating a collection! A collection is a data group that has the same skeletal structure. On top of that, each of these collections in Strapi can be accessed via an API endpoint.
Here are the steps to create a collection!
1. Look for the Content-type Builder option under the Plugins.
2. In the opened menu, choose the “Create new collection type” option that will create a new collection for you.
3. On the next screen, fill in the name of the collection in the “Display name” box. This name will be used by Strapi to reference this collection. We have used “homes”.
4. Tap on the Continue button to finish creating the collection.
5. Now, you need to select the text field in base settings. Here, you have to enter the name of the field.
Read more: How to Effectively Use React With Strapi?