To follow this guide, you need to know the fundamentals of:<\/p>\n\n\n\n
- \n
- ReactJS,<\/li>\n\n\n\n
- Strapi, and<\/li>\n\n\n\n
- RESTful APIs.<\/li>\n<\/ul>\n\n\n\n
No need for advanced Strapi with React skills. Just make sure NodeJS version 12+ is installed, along with npm or yarn.<\/p>\n\n\n\n
What is Strapi?<\/h2>\n\n\n\n
Strapi is an open-source headless CMS (not based on any preliminary GUI). It lets you build powerful APIs quickly. With Strapi React integration, you can create flexible, dynamic applications. Strapi Frontend is highly customizable, easy to use, and supports RESTful and GraphQL APIs. It\u2019s ideal for managing content without worrying about the frontend\u2014simple yet robust.<\/p>\n\n\n\n
Configuring Strapi<\/h2>\n\n\n\n
First, we create a Strapi app to get started. Admins can use this app to manage backend operations. You can set it up using either npm or yarn:<\/p>\n\n\n\n
npm<\/strong>:<\/p>\n\n\n\n
npx create-strapi-app todo-list --quickstart<\/code><\/pre>\n\n\n\nyarn<\/strong>:<\/p>\n\n\n\n
yarn install global create-strapi-app\nyarn create-strapi-app todo-list --quickstart<\/code><\/pre>\n\n\n\nFor yarn version 3 and above:<\/strong><\/p>\n\n\n\n
yarn dlx create-strapi-app todo-list --quickstart<\/code><\/pre>\n\n\n\nAfter finishing creating the app, we run it in development mode. This mode sets up a local server where we can:<\/p>\n\n\n\n
- \n
- Manipulate data collections<\/li>\n\n\n\n
- Create API endpoints<\/li>\n\n\n\n
- Configure third-party authentication<\/li>\n\n\n\n
- Set up normal authentication<\/li>\n<\/ul>\n\n\n\n
Start development mode by running these commands in the to-do-list folder:<\/p>\n\n\n\n
npm:<\/strong><\/p>\n\n\n\n
npm run develop<\/code><\/pre>\n\n\n\nyarn:<\/strong><\/p>\n\n\n\n
yarn run develop<\/code><\/pre>\n\n\n\nType “
http:\/\/localhost:1337\/admin<\/code>” in your browser. You’ll see a dashboard where you can set up an admin account.<\/p>\n\n\n\n![\"Strapi\"](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXd7QSiHuWHVfs2_dtdVT3bUdGLMCRBooRSiu3JqTV_XYSHdOX__NQlwgLNgzhZqRMjF123vJMyPmat3KJ94dDm6jVEEAsuqxdlydzUAuMvRIZVnncwlp8ED2UhhqBwwOw3uxKDmtoOYAjznuxyXj87puXwethFPthkJOJaEvJ4knPIiCKcoU6s.png\")
<\/figure>\n\n\n\nThis account grants exclusive access to backend operations, ensuring your app\u2019s security.<\/p>\n\n\n\n
Once logged in, the dashboard gives you control over everything. You\u2019ll be able to manage collections, create APIs, and much more with ease.<\/p>\n\n\n\n
![\"Welcome](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXcpgphP77ldtcjWQOQ6f8tioHfvlhXoPbyW5vsRIrMDu6T9UFzlv31UgAZbh17d8qlMA65_rQx2dPZ1-UlGduZtXDSU0mbFfu-fvXy_kfAx4PKJ5eS44lnqXhzYIh8H6gSWAlZxJQ5_K6a6uc7c5oWBICcOdLMn6gvv9gXxTI4tmCfJXU5LhW0.png\")
<\/figure>\n\n\n\n![\"Want](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/Want-To-Build-a-To-Do-List-Application-with-Strapi-and-ReactJS.webp\")
<\/a><\/figure>\n\n\n\nBackend Development<\/h2>\n\n\n\n
Now, let\u2019s configure the app\u2019s backend. It\u2019s mandatory for data flows within the app. Follow these steps:<\/p>\n\n\n\n
Step 1: Create a To-Do Collection<\/h3>\n\n\n\n
A collection <\/strong>consists of similar data structures. For each collection, Strapi automatically creates an API <\/strong>endpoint. To create our “Todo” collection:<\/p>\n\n\n\n
- \n
- Go to the Content-Type Builder<\/strong> section under plugins<\/strong>. This is where we build collections.<\/li>\n<\/ul>\n\n\n\n
![\"Welcome](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXeu0xM7me9J5TowQOp5X7O4jSbHE3KO6eLpjjLdqa4HtCKt-hmd1PR7VUrohy39fY0c5sdS-YjYHDiRMmpI0SxN8uhcprwiIHou7XxqyhsZdjiQm4m4fTm-0jLbBVc02QB-oXA64zvlWuLWiFGJa2xNVHwRpCNNuYNLiHqqRwwv0hL_GYdZzWk.png\")
<\/figure>\n\n\n\n- \n
- Click on Create new collection type<\/strong>.<\/li>\n<\/ul>\n\n\n\n
![\"User\"](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXfX3rxgmbcq13HxlJWAoptcdBJCZijpGJT4V506eb1DvXBpKH5JKvx2DhQOh4XluvB-oQ7fNcas0kwp9nKFMarkpvfFUotjUMKHxReDo33_1nwvXpaS979oe_2AVlbEnFJ8Q5OFbRuQt4Z0FxnweXAaFhM9fk9vrwPCs-zefoYaKeCBXjPClaQ.png\")
<\/figure>\n\n\n\n- \n
- In the prompt, name it “Todo”<\/strong> (or anything else if you prefer). Strapi will auto-fill the rest of the fields based on this name.<\/li>\n<\/ul>\n\n\n\n
![\"display](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXcojZbjpynMZXDAFcx_UN2O08zHUoU29LzXwICIcIP69fPpuX4SYvV0P5uk1DX3nJ0cHEOVh1wqbms02QzVwlBqLWp1y0auo6KcO9tpD-mqdp9xgAGQBdZUAwWo0YK6FwHqBFCVRF6oUjyFoxL2N0HPaDn35p-e0E0KjzOI2CkYUDfZSXNyy_Y.png\")
<\/figure>\n\n\n\n- \n
- Hit Continue<\/strong> to proceed.<\/li>\n<\/ul>\n\n\n\n
![\"create](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXfW8gx0NXPkMmdyDOOrjfRIrIOiylsZPF2ceERjwnDkoAxnuKMw14feYJJjR2LoFHSTZuWy0c1Ys32iO6Pp7RnXuqsq2idEDhhziqHO1CNbULN7ehBFaWiQM7v6_821dt77bjNix104gyU2Djw5YZNmPtRl0wjFbS3AxCJNizZF54cY0eGd4w.png\")
<\/figure>\n\n\n\n- \n
- Next, we\u2019ll add a field to the collection.<\/li>\n\n\n\n
- For the to-do item description, add a text field<\/strong>.<\/li>\n<\/ul>\n\n\n\n
![\"Text\"](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXd9KQoVQ9yxF54fysn1gu5NgNmommPPz06UDCWa6DH3xEkYLiH3f7JHFI4nUnsGN_nic-bcIW7Ibksf-dY9707iIYS4tDxoVldpaPrUbZy9_D4wcrbHyh1Oij1HlVLgWMf-xFtUjYQg4eU4tG_yAyLwsyVS8mSqLg6l9qbxJYgTMUUxdjVcWg.png\")
<\/figure>\n\n\n\n- \n
- Name the field “item”<\/strong> (feel free to change it) and choose the long text<\/strong> option.<\/li>\n<\/ul>\n\n\n\n
![\"todo](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXcQ0wNOBdanqLr1i8FijuPCHrbK0RIAIeQk3lyTuKIDnB2mX-yWJevNDmskjmyPgrvIkrA-6dmO4nEqUNdko0wKQ17w8gvOfaKZiZRMseugMaE47G8hIZA1xz7Q79AK6dDi_LnzgfeLBU8jWbu7ovHc8v_wKGnZhUK2Puj9n02VDYQxH8hjAwM.png\")
<\/figure>\n\n\n\n- \n
- Finally, click Finish<\/strong> to save the field. <\/li>\n<\/ul>\n\n\n\n
![\"todo](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXdHQR9QHzb1ZzeYtSpybpqOo-LNz_3c5n1xmdO3kYqmVHiiDiUmnGWowVkjkcKiUS53Y5NpYtfXTy_EaAfH8nOB4kMjqmKwzGEfc77aR_O7h6I03c77cY5CsXhM-AWih-ik_Nj7HnGetppjy9uhl65XCpEvQOzk230fugnNC-V-Nse1aD2I-Q.png\")
<\/figure>\n\n\n\n- \n
- Then, hit Save<\/strong> to register the collection in the app.<\/li>\n<\/ul>\n\n\n\n
![\"todo](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXeZdA0iu9FxNDCLqxF5XMqegQyewcEF4Rh6ZXJdoOghuth_q2Vomz4tvBPfbhCLdMgXd18CML92UbLy85MwdnmVrPtyrpKbjxHJr0KOjI61rp86dAAyJw515SmRAUleVdDUxDcJRmMxtUg7UDa7r2oga6ilcRE-d6VKwQOhN1qMVgszBPKUKUU.png\")
<\/figure>\n\n\n\nWhen Strapi finishes applying changes, the server restarts. Your collection is now ready for use!<\/p>\n\n\n\n
Step 2: Add Test Entries<\/h3>\n\n\n\n
Now that the collection is set up, it\u2019s time to add some test entries. This helps us confirm that the collection is processing data correctly. Here’s how to add entries:<\/p>\n\n\n\n
- \n
- Go to Content Manager<\/strong>. This is where you can manage all your collection entries.<\/li>\n<\/ul>\n\n\n\n
![\"Todo](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXcqfbsRsNhWB8q5BQ0pod4m6x3qSDTw4qDUJ0xArJPBULiUvO3VkkBZUXbQSTuPkGq3f1Uo_DefKX2PXHuJclnqgGw3BTRoZFGL8zAjoMDTpwNnkTcApWmFId6574sspS_jV6HP7itKLzChlPOsMQ0_KyAzWlP_G02c3l225bkONdGWAlSp_g.png\")
<\/figure>\n\n\n\n- \n
- Create a new entry under the Todo collection by clicking the Create new entry<\/strong> button.<\/li>\n<\/ul>\n\n\n\n
![\"todo](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXdD6IojXhVLjeiRYFhN1f6tgssWya-qrd0ptX2iq8AW8JGsIrhaKR_DQ79IFMN8KYFh9liBKGjg4I209rdICzmUUOUtYJOCftnxFSiB9c74OvoEMKFsPfWsN_aGq1HCCv5-nTpYE_1UezawzDm23Egc71XzFj1j8qX0ru5Ih-lVkMp5ArKYqK4.png\")
<\/figure>\n\n\n\n- \n
- In the “item”<\/strong> field, enter some text.<\/li>\n<\/ul>\n\n\n\n
![\"Create](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXdMP64XnSyesB7dSmWyl8zJWgNetxJ4sXUigxb9mmkC7CsB3FLX0BKQChzcAIAHAH4y6ZMgXNUG8faMOvEtKpPy9v0kJDuDCOH6YlipjdqXjROi6ejfPIhZ7eRHGYggbh92HaA8PoLu9IhamP8KfUfb-LarNDWtf3jxX1swfKHzoO9galDMO9M.png\")
<\/figure>\n\n\n\n- \n
- Save it as a draft<\/strong> first.<\/li>\n<\/ul>\n\n\n\n
![\"Create](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXeRvsYteVISg2Dny-L0Ua4G3hbA9xZ9bIAdI4a8S4ME_lhLlJgwj_DvzDv5OwEvU-x7YsiBz8HaDv56PrHkR2WbDVRmKgXxrFDg3OZBJ506sWFdVZeEbYKORZ2KJFOfvGiAVkghV8VYOGNCGa362MXHhC-A1sOOq7sl-hXCze8r1NitHFtq5Eo.png\")
<\/figure>\n\n\n\n- \n
- Then, hit Publish<\/strong> to officially add it to the collection.<\/li>\n<\/ul>\n\n\n\n
![\"todo](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXftRfZRsKZF82IuMtZY9b9CjD5oXAuA5pT4Aq6OkOoKz2i-hK4p-2CMsE5nF2NkX0a-Z6mFv_swrSIm9j6SUHDrjUCku90Ko9fcyIfbr93JKR3MIPNyNvQhTXZM8nlibzNhO5HtLnv0JQjLYjDcFfUCCr_TP8hOKb0KLEBkCAzW04rdwRlKOg.png\")
<\/figure>\n\n\n\n- \n
- Make sure you repeat these steps<\/strong> at least twice so that you have two entries in your collection. With this, you can start testing how Strapi with React<\/strong> handles data flow.<\/li>\n<\/ul>\n\n\n\n
![\"Todo](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXfQkQ1s18UYikSP2fTG7rbUKk1Sg4ZQGFmZF1CsYDLqo14TAWqxf-GvBVPbO7KMhQTzwOfRFdsaNGRDuBGWfN6PO9zQpKGg5_tadb9diDpgUvP-nZ-MQi7J2AuwjzKbmXm-LBon7BYoAaqRNUkgsp8f2MwZl8ieAH6bsKpj0wYRL9RJ6mGtKj4.png\")
<\/figure>\n\n\n\nStep 3: API Endpoint Generation for Our Collection<\/h3>\n\n\n\n
Next, we create an API<\/strong> endpoint to connect our frontend to the Todo<\/strong> collection. It lets the frontend and data interact with each other. Follow these steps:<\/p>\n\n\n\n
- \n
- Go to Settings<\/strong> under General<\/strong>.<\/li>\n<\/ul>\n\n\n\n
![\"Welcome\"](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXcQNcEfskucTQHi3pBsNoSpDaQRtXgDhC3fGVYDm3r7Kh199Dh9KTvDAheFfhoTM8vgWgA0Q9Zy3hss2ezaBtg9OVTZWFNkWAoULLbFL5gsA6m8EssN6JssPD-BO7MwU3yiJXo32qIbEZxGWYVCAb-RNfkHQGFwKCmZiMDdaKdYptgDTaB5TYk.png\")
<\/figure>\n\n\n\n- \n
- Under User Permissions & Roles<\/strong>, you\u2019ll find Roles<\/strong>. Click on it.<\/li>\n<\/ul>\n\n\n\n
![\"Overview\"](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXdH5fG-nUBg29GgqRYOjjQEnvcaavYkaf8gSp9liXYkghOSCGzAX8ijtaZoy6lefOxfEduJBQFeZx-4jY8HMPS67wGtZ1L2cnSWfDCeKUxRzhZnEGV3lGbucGbDiSgGp8ok_T5xCwAUeF4Ncz5pCgo1H4bIbwxy4U0pFj7N0-2KG8WlModD19c.png\")
<\/figure>\n\n\n\n- \n
- Select Public<\/strong> to modify the permissions for public access.<\/li>\n<\/ul>\n\n\n\n
![\"Roles\"](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXfk6C536O2JtyQg7qCxgp0VSya12QmrshVeFf3KIc93IGXNnTzU3WLGyrxmxz7DJ-iYyEX51EHpgabqP_hVV1kq5LF8bt5yAT75_zlYiqSnkYSsabnCY-gSGyqKQ63hz6ve4J_zYKnvYocbMVbq2Emx_8Ij56BTl22Rf95CxCa9sQodAp7UvmI.png\")
<\/figure>\n\n\n\n- \n
- To control access, toggle the Todo dropdown<\/strong> in the Permissions <\/strong>section.<\/li>\n<\/ul>\n\n\n\n
![\"Todo\"](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXeym9t_hhT-lwVabKn9sks-e6c_IpHFSR4LhH-g1I6nk3ijimEs5yxdKCgiCFUBRR0rvbVy5mO3BoitY1hlCIN1iXXA-T-3DFQLMa6zY591t7c55F4nQ_P3LyqnOX8-s-3GbVZFk8e29o82H4KQ3s675Zns5lFz37UbDVc5RcGS7D82hPLEbAI.png\")
<\/figure>\n\n\n\n- \n
- To enable public access to the Todo collection<\/strong> without requiring authentication, click Select All<\/strong>.<\/li>\n<\/ul>\n\n\n\n
- \n
- <\/li>\n<\/ul>\n\n\n\n
![\"todo](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXe53wSXt7ABciFC2VaRRodxAWtuFDm9-voYtL4moPf6NjUigqhZvnIqtRIvrPuaOOY81qVrCsqujH_ZE0TlYY9m-y5LFuTsz07eVXodT8l4VaBM5s8HgWR6GCZVtQdp5SHA5UgPZz2hpdBbeU1e9rTCGysykpdxeQuL4LQwGx-IMOmXaNK1bjo.png\")
<\/figure>\n\n\n\n- \n
- Finally, click Save<\/strong> to confirm the changes.<\/li>\n<\/ul>\n\n\n\n
![\"Public\"](\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2024\/11\/AD_4nXcd5Y92GW9AJtppdqQx8U5awqSRPzVwRALw9XNriTHsPYFsNGYije7e3StSNuSqSAobbfG-6ZBwAJuoOpz36N5QVEg5eTUoJC9350rFk5RGlCjQQy2rJke8CKYavS13ZAIuG8jiLE4eLPq211xgYUDlY23H2SRcA5AIe3jxVE4UvTuYI15PQyU.png\")
<\/figure>\n\n\n\nOnce done, merged Strapi with React<\/strong> will create the endpoints necessary to link and work with the collection.<\/p>\n\n\n\n
API Endpoints for the Todo Collection<\/h2>\n\n\n\n
Here\u2019s a breakdown of the key Strapi<\/strong> API endpoints for managing your Todo<\/strong> collection:<\/p>\n\n\n\n
1. Find (\/api\/todos GET)<\/h3>\n\n\n\n
This endpoint retrieves all items in your Todo<\/strong> collection. The response will contain a list of items, as mentioned below:<\/p>\n\n\n\n
```json\n{\n \"data\": [\n {\n \"id\": 1,\n \"attributes\": {\n \"item\": \"item\",\n \"createdAt\": \"2022-04-19T10:33:44.577Z\",\n \"updatedAt\": \"2022-04-19T10:33:45.723Z\",\n \"publishedAt\": \"2022-04-19T10:33:45.718Z\"\n }\n },\n {\n \"id\": 2,\n \"attributes\": {\n \"item\": \"item 2\",\n \"createdAt\": \"2022-04-19T10:33:56.381Z\",\n \"updatedAt\": \"2022-04-19T10:33:58.147Z\",\n \"publishedAt\": \"2022-04-19T10:33:58.144Z\"\n }\n }\n ],\n \"meta\": {\n \"pagination\": {\n \"page\": 1,\n \"pageSize\": 25,\n \"pageCount\": 1,\n \"total\": 2\n }\n }\n}\n```<\/code><\/pre>\n\n\n\n2. Create (\/api\/todos POST)<\/h3>\n\n\n\n
This endpoint lets you create a new item. For example, sending this request:<\/p>\n\n\n\n
{\n \"data\": {\n \"item\": \"item 3\"\n }\n}<\/code><\/pre>\n\n\n\nWill return:<\/p>\n\n\n\n
{\n \"data\": {\n \"id\": 3,\n \"attributes\": {\n \"item\": \"item 3\",\n \"createdAt\": \"2022-04-19T13:17:36.082Z\",\n \"updatedAt\": \"2022-04-19T13:17:36.082Z\",\n \"publishedAt\": \"2022-04-19T13:17:36.079Z\"\n }\n },\n \"meta\": {}\n}<\/code><\/pre>\n\n\n\n3. Find One (\/api\/todos\/{id} GET)<\/h3>\n\n\n\n
Use the item\u2019s ID to retrieve a specific item. For example, calling
\/api\/todos\/2<\/code> will return:<\/p>\n\n\n\n{\n \"data\": {\n \"id\": 2,\n \"attributes\": {\n \"item\": \"item 2\",\n \"createdAt\": \"2022-04-19T13:15:10.869Z\",\n \"updatedAt\": \"2022-04-19T13:15:11.839Z\",\n \"publishedAt\": \"2022-04-19T13:15:11.836Z\"\n }\n },\n \"meta\": {}\n}<\/code><\/pre>\n\n\n\n4. Update (\/api\/todos\/{id} PUT)<\/h3>\n\n\n\n
Use this endpoint to update an item. For example, sending this request to
\/api\/todos\/2<\/code>:<\/p>\n\n\n\n{\n \"data\": {\n \"item\": \"2nd item\"\n }\n}<\/code><\/pre>\n\n\n\nWill update the item, and you\u2019ll get a response like:<\/p>\n\n\n\n
{\n \"data\": {\n \"id\": 2,\n \"attributes\": {\n \"item\": \"2nd item\",\n \"createdAt\": \"2022-04-19T13:17:36.082Z\",\n \"updatedAt\": \"2022-04-19T13:51:06.266Z\",\n \"publishedAt\": \"2022-04-19T13:14:59.823Z\"\n }\n },\n \"meta\": {}\n}<\/code><\/pre>\n\n\n\n5. Delete (\/api\/todos\/{id} DELETE)<\/h3>\n\n\n\n
This endpoint deletes an item from the collection. For instance, calling
\/api\/todos\/2<\/code> will delete the item, and you\u2019ll get:<\/p>\n\n\n\n{\n \"data\": {\n \"id\": 2,\n \"attributes\": {\n \"item\": \"item 2\",\n \"createdAt\": \"2022-04-19T13:17:36.082Z\",\n \"updatedAt\": \"2022-04-19T13:15:11.839Z\",\n \"publishedAt\": \"2022-04-19T13:15:11.836Z\"\n }\n },\n \"meta\": {}\n}<\/code><\/pre>\n\n\n\nWith these endpoints, you can easily interact with your Strapi React app and manage the Todo collection.<\/p>\n\n\n\n
Setting Up ReactJS<\/h2>\n\n\n\n
ReactJS is popularly used to develop web apps. Easy usability of this JS framework is the reason we chose it for this guide. To set up the React app, run either of the commands below:<\/p>\n\n\n\n
yarn<\/strong>:<\/p>\n\n\n\n
yarn install global create-react-app\nyarn create-react-app todo-frontend<\/code><\/pre>\n\n\n\nFor yarn 3 and above:<\/p>\n\n\n\n
yarn dlx create-react-app todo-frontend<\/code><\/pre>\n\n\n\nnpm<\/strong>:<\/p>\n\n\n\n
npx create-react-app todo-frontend<\/code><\/pre>\n\n\n\nOnce your React app is set up, create two files for the environment variables:<\/p>\n\n\n\n
.env.development:<\/strong><\/p>\n\n\n\n
REACT_APP_BACKEND=http:\/\/localhost:1337\/<\/code><\/pre>\n\n\n\n.env.production:<\/strong><\/p>\n\n\n\n
REACT_APP_BACKEND=\/<\/code><\/pre>\n\n\n\nNote: The .env.development file is used for your development environment. .env.production is used for production. The setup above smoothly integrates Strapi with React app and the backend.<\/p>\n\n\n\n
Frontend Development<\/h2>\n\n\n\n
With our React part now ready, we\u2019ll now ready up our to-do list app\u2019s frontend.<\/p>\n\n\n\n
First, copy the following code into the App.js file:<\/strong><\/p>\n\n\n\n
import { useState, useEffect } from 'react';\nimport TodoItem from '.\/TodoItem';\nimport '.\/App.css';\n\nfunction App() {\n const [todos, setTodos] = useState([]);\n const [newTodo, setNewTodo] = useState(\"\");\n\n useEffect(() => {\n update();\n }, []);\n\n function update() {\n fetch(`${process.env.REACT_APP_BACKEND}api\/todos`)\n .then(res => res.json())\n .then(todo => {\n setTodos(todo.data);\n })\n }\n\n function addTodo(e) {\n e.preventDefault();\n let item = newTodo;\n let body = {\n data: { item }\n };\n\n fetch(`${process.env.REACT_APP_BACKEND}api\/todos`, {\n method: \"POST\",\n headers: { 'Content-type': 'application\/json' },\n body: JSON.stringify(body)\n })\n .then(() => {\n setNewTodo(\"\");\n update();\n })\n }\n\n return (\n <div className=\"app\">\n <main>\n <form className=\"form\" onSubmit={addTodo}>\n <input type=\"text\" className=\"todo_input\" placeholder=\"Enter new todo\" value={newTodo} onChange={e => setNewTodo(e.currentTarget.value)} \/>\n <button type=\"submit\" className=\"todo_button\">Add todo<\/button>\n <\/form>\n\n <div>\n {todos.map((todo, i) => <TodoItem todo={todo} key={i} update={update} \/>)}\n <\/div>\n <\/main>\n <\/div>\n )\n}\n\nexport default App;<\/code><\/pre>\n\n\n\nOnce this is in place, create the TodoItem.jsx file in the same directory. This component will render each to-do item. Here\u2019s the code for TodoItem.jsx:<\/strong><\/p>\n\n\n\n
import { useState } from \"react\";\nimport '.\/App.css';\n\nfunction TodoItem({ todo, update }) {\n const [edit, setEdit] = useState(false);\n const [newTodo, setNewTodo] = useState(\"\");\n\n function changeTodo(e) {\n e.preventDefault();\n let item = newTodo;\n let pos = todo.id;\n let body = {\n data: { item }\n };\n\n fetch(`${process.env.REACT_APP_BACKEND}api\/todos\/${pos}`, {\n method: \"PUT\",\n headers: { 'Content-type': 'application\/json' },\n body: JSON.stringify(body)\n })\n .then(() => {\n setEdit(false);\n update();\n })\n }\n\n function deleteTodo(e) {\n e.preventDefault();\n let pos = todo.id;\n\n fetch(`${process.env.REACT_APP_BACKEND}api\/todos\/${pos}`, {\n method: \"DELETE\"\n })\n .then(() => update());\n }\n\n return (\n <div className=\"todo\">\n {!edit\n ? <div className=\"name\">{todo.attributes.item}<\/div>\n : <form onSubmit={changeTodo}>\n <input className=\"todo_input\" type=\"text\" placeholder=\"Enter new todo\" value={newTodo} onChange={e => setNewTodo(e.currentTarget.value)} \/>\n <button className=\"todo_button\" type=\"submit\">Change todo<\/button>\n <\/form>\n }\n <div>\n <button className=\"delete\" onClick={deleteTodo}>delete<\/button>\n <button className=\"edit\" onClick={() => {\n setEdit(!edit);\n setNewTodo(todo.attributes.item);\n }}>edit<\/button>\n <\/div>\n <\/div>\n );\n}\n\nexport default TodoItem;<\/code><\/pre>\n\n\n\nNext, add some basic CSS to style our app. Copy the following into App.css:<\/strong><\/p>\n\n\n\n
.app {\n display: flex;\n justify-content: center;\n text-align: center;\n}\n\n.todo_input {\n height: 16px;\n padding: 10px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n border: 2px solid blueviolet;\n}\n\n.todo_button {\n border: 2px solid blueviolet;\n background-color: transparent;\n height: 40px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.todo {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n font-weight: 700;\n margin-bottom: 5px;\n min-width: 340px;\n}\n\n.edit {\n width: 66px;\n font-weight: 700;\n background: blueviolet;\n border: none;\n border-top-right-radius: 5px;\n height: 33px;\n border-bottom-right-radius: 5px;\n color: white;\n font-size: medium;\n}\n\n.delete {\n width: 66px;\n font-weight: 700;\n background: white;\n border: 2px solid blueviolet;\n border-top-left-radius: 5px;\n height: 33px;\n color: blueviolet;\n border-bottom-left-radius: 5px;\n font-size: medium;\n}\n\n.form {\n padding-top: 27px;\n padding-bottom: 27px;\n}\n\n.name {\n max-width: 190.34px;\n text-align: left;\n}<\/code><\/pre>\n\n\n\nAll done. Now, when you run the app, the UI will render as expected, giving you an interactive to-do list powered by Strapi and ReactJS.<\/p>\n\n\n\n
Integrating React and Strapi<\/h2>\n\n\n\n
To combine React with Strapi into a seamless full-stack application, we can deploy everything on a single server. Here\u2019s how:<\/p>\n\n\n\n
- \n
- Open the React project folder in your terminal.<\/li>\n\n\n\n
- Run the build command to prepare your React app for production.<\/li>\n<\/ol>\n\n\n\n
For yarn:<\/strong><\/p>\n\n\n\n
yarn run build<\/code><\/pre>\n\n\n\nFor npm:<\/strong><\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n3. Once the build is complete, copy all files from the generated \u201cbuild\u201d folder.<\/p>\n\n\n\n
4. Paste these files into the Strapi \u201cpublic\u201d folder.<\/p>\n\n\n\n
After doing this:<\/p>\n\n\n\n
- \n
- Make sure to run your Strapi application.<\/li>\n\n\n\n
- Open your browser and go to
https:\/\/localhost:1337\/<\/code>.<\/li>\n<\/ul>\n\n\n\nYou\u2019ll have a React and Strapi merged full-stack project\u2014ready for deployment!<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
This to-do app is an elementary Ststrapi react example. If required, newer features can be added and customized. For advanced customizations, opt for ReactJS development services.<\/p>\n\n\n\n
Note: You can also use CSS for frontend instead of ReactJS as it provides much more simplicity. For critical front-end design modifications, hire ReactJS developers<\/a> to resolve end-point query issues.<\/p>\n\n\n\n
Frequently Asked Questions<\/h2>\n\n\n
\n\n\nHow to use Strapi with React?<\/h3>\n
\n\nTo use Strapi with React, set up your Strapi app for the backend and connect it via API endpoints. Then, fetch and manipulate the data in the React frontend. It allows easy integration of content management with ReactJS development services.<\/p>\n\n<\/div>\n<\/div>\n
\nHow to build a website with Strapi and React?<\/h3>\n
\n\nStart by creating a Strapi app for content management. Then, use React for web development to build the frontend, integrating it with Strapi React endpoints. This combination ensures a flexible, dynamic website with robust API interactions.<\/p>\n\n<\/div>\n<\/div>\n
\nIs Strapi good for big projects?<\/h3>\n
\n\nYes, Strapi scales well for large projects, offering high flexibility and support for ReactJS development services. With Strapi React, you can handle complex data structures and APIs. It’s a solid choice for CMS development services<\/a> in big, dynamic applications.<\/p>\n\n<\/div>\n<\/div>\n
\nWhich headless CMS is best for JavaScript?<\/h3>\n
\n\nStrapi CMS React is one of the best React libraries and frameworks<\/a> for building JavaScript apps. Its flexibility and ease of use make it perfect for React with Strapi integrations. Plus, you can hire ReactJS developers to leverage its full potential for any JavaScript project.<\/p>\n\n<\/div>\n<\/div>\n
\nWhat\u2019s the best way to fetch data from Strapi in React?<\/h3>\n
\n\nThe best way to fetch data from Strapi in React is by using React hooks like
useEffect<\/code> anduseState<\/code> for API calls. Usefetch<\/code> or Axios to interact with Strapi API and display data. This method works perfectly for React for web development<\/a>.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"A To-Do List application aids with holistic task management by letting you […]<\/p>\n","protected":false},"author":9,"featured_media":41446,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10496],"tags":[],"class_list":["post-41437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/41437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/comments?post=41437"}],"version-history":[{"count":13,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/41437\/revisions"}],"predecessor-version":[{"id":45322,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/41437\/revisions\/45322"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/media\/41446"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/media?parent=41437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/categories?post=41437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/tags?post=41437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Finally, click Save<\/strong> to confirm the changes.<\/li>\n<\/ul>\n\n\n\n
- <\/li>\n<\/ul>\n\n\n\n
- To enable public access to the Todo collection<\/strong> without requiring authentication, click Select All<\/strong>.<\/li>\n<\/ul>\n\n\n\n
- To control access, toggle the Todo dropdown<\/strong> in the Permissions <\/strong>section.<\/li>\n<\/ul>\n\n\n\n
- Select Public<\/strong> to modify the permissions for public access.<\/li>\n<\/ul>\n\n\n\n
- Under User Permissions & Roles<\/strong>, you\u2019ll find Roles<\/strong>. Click on it.<\/li>\n<\/ul>\n\n\n\n
- Go to Settings<\/strong> under General<\/strong>.<\/li>\n<\/ul>\n\n\n\n
- Make sure you repeat these steps<\/strong> at least twice so that you have two entries in your collection. With this, you can start testing how Strapi with React<\/strong> handles data flow.<\/li>\n<\/ul>\n\n\n\n
- Then, hit Publish<\/strong> to officially add it to the collection.<\/li>\n<\/ul>\n\n\n\n
- Save it as a draft<\/strong> first.<\/li>\n<\/ul>\n\n\n\n
- In the “item”<\/strong> field, enter some text.<\/li>\n<\/ul>\n\n\n\n
- Create a new entry under the Todo collection by clicking the Create new entry<\/strong> button.<\/li>\n<\/ul>\n\n\n\n
- Go to Content Manager<\/strong>. This is where you can manage all your collection entries.<\/li>\n<\/ul>\n\n\n\n
- Then, hit Save<\/strong> to register the collection in the app.<\/li>\n<\/ul>\n\n\n\n
- Finally, click Finish<\/strong> to save the field. <\/li>\n<\/ul>\n\n\n\n
- Name the field “item”<\/strong> (feel free to change it) and choose the long text<\/strong> option.<\/li>\n<\/ul>\n\n\n\n
- Hit Continue<\/strong> to proceed.<\/li>\n<\/ul>\n\n\n\n
- In the prompt, name it “Todo”<\/strong> (or anything else if you prefer). Strapi will auto-fill the rest of the fields based on this name.<\/li>\n<\/ul>\n\n\n\n
- Click on Create new collection type<\/strong>.<\/li>\n<\/ul>\n\n\n\n
- Go to the Content-Type Builder<\/strong> section under plugins<\/strong>. This is where we build collections.<\/li>\n<\/ul>\n\n\n\n