How to Effectively Use React With Strapi?
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!
1. 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.
6. Next, click on the Long Text option and click on Finish.
7. You can also make changes to the advanced settings if required.
8. When all this is done, click on the Save option. Your collection is registered.
You will see the “homes” collection listed in the application of the name that you set.
Note: Once the registration is complete, Strapi will automatically restart.
The next thing that you need to do is components. Components are data structures that you can use in collection types.
2. Steps to create a component!
1. Click on Content-type Builder, followed by Create new component.
2. In the pop-up window, change the base settings of the component. Write the component’s name, add the category, and select an icon. If the category is not there, make one by entering the name. We have used “blank_banner” as the name as well as the category.
3. Click on Continue.
In the next step, add the required fields and configure them as done above in case of a text field. Click on Save, and your component will be created.
Now that you have learned how to create a collection and component let’s add test entries in the collections. These entries are added to check if the collection handles the data as intended. Here is how you can create test entries.
- Open Content Manager from the menu on the left.
- Click on the “Create New Entry” button.
- In the Item box, write anything that you want.
- Save the item and further publish it to register it to the collection.
You can add as many entries as you want. We just need to check if the collection works as intended, so we need at least two entries.
Setting up Strapi also includes adding components to collections. Here are the steps!
- Choose your created collection type under the Collection Type option.
- Select “Add another field” and then Components.
- Here, you can either create a component or use an existing component.
- Click on use an existing one and choose the component you want.
- Now, you can either use the component a single time or repeat it (array form).
- Select the type and click on Finish.
3. Creating API Endpoints!
So far, we have created components, content types, and collections; now, we have to see if we can access them using API endpoints. Let’s learn how to create API endpoints in Strapi!
- Open the Settings menu.
- Look for the Roles option under the users and permissions plugin.
- Choose any of the Public or Authenticated roles.
- Look for the collection that you created under Permissions and click on it.
- Check the box against Find and Findone. You can also check the Create, Delete, or Update permissions based on your collection.
- Repeat the process for all the collections you have created and hit Save.
When you make the changes as in the steps above, the following endpoints will be created!
- Find (/api/collection name GET): This endpoint is used to get the items that are stored in the created collection.
- Find one (/api/collection name/ GET): With the find one endpoint, you get the item into the collection. You do this by replacing it with the ID of the item you want to reference.
Integrating the API With React!
Strapi is all about the backend. To access the information at the backend, you need a frontend. The best thing about Strapi is that it can be used with any type of frontend framework, and we are using React Development.
The integration of React with Strapi is simple! Here are the steps!
- Open the React project folder in the terminal.
- For the project, run the build command.
- A “build” folder will be generated after running the command. Copy the contents of this folder.
- Next, in the Strapi public folder, paste the contents of the build folder.
You can run the build command in two ways!
- yarn run build
- npm run build
Running the program!
When you run the program, you will get entries based on your entered command. For example, if you have a collection name, Restaurants.
GET – http://localhost:1337/api/restaurants will return the following response!
Conclusion
Though Strapi can be used with various other frontend tools, React is one of the best among all. You can implement any of the frontend frameworks, but the steps of implementation will be different.
By reading the above piece, you will have got a clear idea about the Strapi CMS and how to create various entities in it. Make sure you follow all the steps carefully. If you need professional assistance, get in touch with Dev IT Application Development Company.