![](\"https://lh4.googleusercontent.com/hX9hG8wUHdHJ2rsqOkiQb9fPUC9R3ZQ03g2I6ljzu7iq9D03WLpedXFf6UNwg7yuYVeVf2tO6DRomV3v_Eu4ToY78tNjdE5jpoEVHm6FPmv8kKPEZy7TES0mwQabMnbMG-ghUbV2\")
Creating interactive end-user Interfaces is difficult regardless of the programming platform. Web Page design takes time, effort, and attention to detail, but React simplifies the user interface design and developers’ lives.
You may be curious about using React to build User Interfaces (UI). With its excellent JavaScript structure, the growth process is considerably more manageable.
Big corporations like Facebook, Airbnb, Netflix, and PayPal use it. You surely don't want to ruin your chance of creating an excellent UI for your project.
You should hire the best React development company to get your hands on highly efficient and competitive React designers.
Facebook created and maintained React, a JavaScript library. React is a practical, straightforward, and adaptable open-source JavaScript library for developing simple, quick, and scalable online apps.
React is a widely sought-after option for developing user-friendly and engaging web pages and apps that allow developers to be more creative.
What makes React so popular among businesses and brands?
React is easy to use and offers dynamism to any UI layout. It also enables rapid application progress with good quality, saving time for both clients and designers.
React allows significant data changes to affect specified UI elements automatically. Because of this advanced feature, you do not need to do anything further to upgrade your UI.
Reusability is a cure for developers. React offers tools and frameworks that developers may reuse to build new apps. This platform allows contrivers to reuse segments made for other apps with similar functionality. It reduces growth time and ensures faultless functioning.
A potent combination of JavaScript and HTML code is constantly employed, streamlining the whole coding process. The JS library has numerous methods that translate HTML elements into needed functions and simplify the overall project.
React combines JavaScript and HTML tags. Then React acts as a mediator, representing the DOM and helping decide which element needs to be changed. The HTML elements and JS codes make dealing with large amounts of data easier.
Facebook put a lot of work on React. Likely the best way to construct great, SEO-friendly user experiences spanning browsers and engines.
Because React is so simple, it perfectly implements the DOM (document object model). It does not utilize the design but allows developers to change the DOM version in memory. This feature automatically improves application performance.
React lags one-way data binding. It means anybody can trace all modifications made to any data section. Its simplicity is reflected here.
If you've heard of React but aren't sure whether to utilize it in your project, here are the top ten reasons why React could be the best choice.
Unlike Angular and Vue, React is considerably easier to understand. It's one of the critical reasons React proliferated. It helps firms construct projects rapidly. The more challenging technology or structure is to comprehend, the lengthier it takes to develop. And we humans prefer to shun complex tasks. However, because React is a straightforward platform, enterprises and major brands are more tempted to use it.
The UI of a program is critical nowadays. A poorly designed UI reduces an application's chances of success. However, a high-quality UI increases the likelihood of people using your program. So, creating rich end-UIs is crucial for a program to exist. The helpful information is that React's declarative elements allow us to construct high-quality, rich UXs.
JSX, a voluntary semantic extension, allows you to design your elements for React. These elements allow HTML quoting and make subcomponent rendering easy for contrivers. JSX is already used to design bespoke elements, construct high-volume apps, and transform HTML mock-ups into ReactElement trees.
Frequent updates can pose problems with complex logic since a single move might substantially affect other aspects. Facebook fixed the issue by making React's elements reusable. Reusable elements allow formulators to reuse digital materials. It's also simple to add essential components like keys, input fields, and a checkbox to wrapper elements, which will then be moved to the root component. Because each element in React has its internal logic quickly changed, this strategy increases application growth productivity.
Defining the app's structure early in the design process is crucial. The DOM model is, in a nutshell, a tree-structured model. Slight UI changes at higher levels might have significant consequences. A virtual DOM created by Facebook can address such differences. As its name indicates, the virtual DOM is a virtual representation that allows testing and evaluating risks before making any changes. Faster app performance and a better UX.
SEO is the key to any internet business's success. Google favors apps that load quickly and render quickly. React's quick rendering minimizes webpage load time compared to other platforms, which helps businesses rank higher on Google Search Engine Result Pages.
Incorporating new technology into projects may be enjoyable and helpful, but only when done correctly. Facebook recognizes this and has introduced much-needed React and Chrome dev tools to its React structure. These React tools let designers find the child and parent elements, investigate components' hierarchical structures, and examine elements' states and properties.
One of the advantages of utilizing React, like Angular, is the strong community. Every day, thousands of React designers improve the web platform. The project has 136,079 stars and 1,331 regular patrons, at the time of writing this. Experts often provide unlimited React tutorial videos and in-depth React papers and blogs. Also, React experts frequently answer questions on QA sites, so you can always receive professional help.
React ensures that changes in the child structure do not impact the parent structure. So, if a designer modifies an object, they need to edit its states. They will upgrade only one element. This flow of data and architecture improves the code's stability and the application's pace.
Still undecided about React?
Check out some instances of React solutions that are inspiring. Many Fortune 500 organizations use React for their web pages and mobile apps. Several high-profile firms use the React framework, including Netflix, PayPal, the BBC, Lyft, and the Times New York, to cite just a few. Tencent QQ, Walmart, Tesla, and Airbnb are just a few well-known companies that have used the React structure in their mobile applications. To put it simply, React is a convenient web and mobile app growth platform.
Now that you know the benefits and best practices of React, you can see why it is an excellent framework. Large and mid-sized businesses alike are using React to create their web pages' UIs, which should come as no surprise.
","url":"https://backend.shahednasser.com/10-reasons-why-you-should-use-react-for-building-interactive-user-interfaces/","canonical_url":null,"uuid":"bbb1997e-8a87-450e-a3ee-623061efa645","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"61bc7669c393bb64592d8688","reading_time":5,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Creating interactive end-user Interfaces is difficult regardless of the programming platform. Web Page design takes time, effort, and attention to detail, but React simplifies the user interface design and developers’ lives.
You may be curious about using React to build User Interfaces (UI). With its excellent JavaScript structure, the growth process is considerably more manageable.
Big corporations like Facebook, Airbnb, Netflix, and PayPal use it. You surely don't want to ruin your chance of creating an excellent UI for your project.
You should hire the best React development company to get your hands on highly efficient and competitive React designers.
Facebook created and maintained React, a JavaScript library. React is a practical, straightforward, and adaptable open-source JavaScript library for developing simple, quick, and scalable online apps.
React is a widely sought-after option for developing user-friendly and engaging web pages and apps that allow developers to be more creative.
What makes React so popular among businesses and brands?
React is easy to use and offers dynamism to any UI layout. It also enables rapid application progress with good quality, saving time for both clients and designers.
React allows significant data changes to affect specified UI elements automatically. Because of this advanced feature, you do not need to do anything further to upgrade your UI.
Reusability is a cure for developers. React offers tools and frameworks that developers may reuse to build new apps. This platform allows contrivers to reuse segments made for other apps with similar functionality. It reduces growth time and ensures faultless functioning.
A potent combination of JavaScript and HTML code is constantly employed, streamlining the whole coding process. The JS library has numerous methods that translate HTML elements into needed functions and simplify the overall project.
React combines JavaScript and HTML tags. Then React acts as a mediator, representing the DOM and helping decide which element needs to be changed. The HTML elements and JS codes make dealing with large amounts of data easier.
Facebook put a lot of work on React. Likely the best way to construct great, SEO-friendly user experiences spanning browsers and engines.
Because React is so simple, it perfectly implements the DOM (document object model). It does not utilize the design but allows developers to change the DOM version in memory. This feature automatically improves application performance.
React lags one-way data binding. It means anybody can trace all modifications made to any data section. Its simplicity is reflected here.
If you've heard of React but aren't sure whether to utilize it in your project, here are the top ten reasons why React could be the best choice.
Unlike Angular and Vue, React is considerably easier to understand. It's one of the critical reasons React proliferated. It helps firms construct projects rapidly. The more challenging technology or structure is to comprehend, the lengthier it takes to develop. And we humans prefer to shun complex tasks. However, because React is a straightforward platform, enterprises and major brands are more tempted to use it.
The UI of a program is critical nowadays. A poorly designed UI reduces an application's chances of success. However, a high-quality UI increases the likelihood of people using your program. So, creating rich end-UIs is crucial for a program to exist. The helpful information is that React's declarative elements allow us to construct high-quality, rich UXs.
JSX, a voluntary semantic extension, allows you to design your elements for React. These elements allow HTML quoting and make subcomponent rendering easy for contrivers. JSX is already used to design bespoke elements, construct high-volume apps, and transform HTML mock-ups into ReactElement trees.
Frequent updates can pose problems with complex logic since a single move might substantially affect other aspects. Facebook fixed the issue by making React's elements reusable. Reusable elements allow formulators to reuse digital materials. It's also simple to add essential components like keys, input fields, and a checkbox to wrapper elements, which will then be moved to the root component. Because each element in React has its internal logic quickly changed, this strategy increases application growth productivity.
Defining the app's structure early in the design process is crucial. The DOM model is, in a nutshell, a tree-structured model. Slight UI changes at higher levels might have significant consequences. A virtual DOM created by Facebook can address such differences. As its name indicates, the virtual DOM is a virtual representation that allows testing and evaluating risks before making any changes. Faster app performance and a better UX.
SEO is the key to any internet business's success. Google favors apps that load quickly and render quickly. React's quick rendering minimizes webpage load time compared to other platforms, which helps businesses rank higher on Google Search Engine Result Pages.
Incorporating new technology into projects may be enjoyable and helpful, but only when done correctly. Facebook recognizes this and has introduced much-needed React and Chrome dev tools to its React structure. These React tools let designers find the child and parent elements, investigate components' hierarchical structures, and examine elements' states and properties.
One of the advantages of utilizing React, like Angular, is the strong community. Every day, thousands of React designers improve the web platform. The project has 136,079 stars and 1,331 regular patrons, at the time of writing this. Experts often provide unlimited React tutorial videos and in-depth React papers and blogs. Also, React experts frequently answer questions on QA sites, so you can always receive professional help.
React ensures that changes in the child structure do not impact the parent structure. So, if a designer modifies an object, they need to edit its states. They will upgrade only one element. This flow of data and architecture improves the code's stability and the application's pace.
Still undecided about React?
Check out some instances of React solutions that are inspiring. Many Fortune 500 organizations use React for their web pages and mobile apps. Several high-profile firms use the React framework, including Netflix, PayPal, the BBC, Lyft, and the Times New York, to cite just a few. Tencent QQ, Walmart, Tesla, and Airbnb are just a few well-known companies that have used the React structure in their mobile applications. To put it simply, React is a convenient web and mobile app growth platform.
Now that you know the benefits and best practices of React, you can see why it is an excellent framework. Large and mid-sized businesses alike are using React to create their web pages' UIs, which should come as no surprise.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creating interactive end-user Interfaces is difficult regardless of the programming platform. Web Page design takes time, effort, and attention to detail, but "},{"type":"element","tagName":"a","properties":{"href":"https://reactjs.org"},"children":[{"type":"text","value":"React"}]},{"type":"text","value":" simplifies the user interface design and developers’ lives."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You may be curious about using React to build User Interfaces (UI). With its excellent JavaScript structure, the growth process is considerably more manageable."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Big corporations like Facebook, Airbnb, Netflix, and PayPal use it. You surely don't want to ruin your chance of creating an excellent UI for your project."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You should "},{"type":"element","tagName":"a","properties":{"href":"https://www.esparkinfo.com/web-app-development/react-js.html"},"children":[{"type":"text","value":"hire the best React development company"}]},{"type":"text","value":" to get your hands on highly efficient and competitive React designers."}]},{"type":"element","tagName":"h2","properties":{"id":"what-is-react"},"children":[{"type":"text","value":"What is React"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://lh4.googleusercontent.com/hX9hG8wUHdHJ2rsqOkiQb9fPUC9R3ZQ03g2I6ljzu7iq9D03WLpedXFf6UNwg7yuYVeVf2tO6DRomV3v_Eu4ToY78tNjdE5jpoEVHm6FPmv8kKPEZy7TES0mwQabMnbMG-ghUbV2","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Facebook created and maintained React, a JavaScript library. React is a practical, straightforward, and adaptable open-source JavaScript library for developing simple, quick, and scalable online apps."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React is a widely sought-after option for developing user-friendly and engaging web pages and apps that allow developers to be more creative."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What makes React so popular among businesses and brands?"}]},{"type":"element","tagName":"h2","properties":{"id":"react-interactive-ui-features"},"children":[{"type":"text","value":"React Interactive UI Features"}]},{"type":"element","tagName":"h3","properties":{"id":"simple-to-use"},"children":[{"type":"text","value":"Simple to use"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React is easy to use and offers dynamism to any UI layout. It also enables rapid application progress with good quality, saving time for both clients and designers."}]},{"type":"element","tagName":"h3","properties":{"id":"declarative"},"children":[{"type":"text","value":"Declarative"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React allows significant data changes to affect specified UI elements automatically. Because of this advanced feature, you do not need to do anything further to upgrade your UI."}]},{"type":"element","tagName":"h3","properties":{"id":"reusable-elements"},"children":[{"type":"text","value":"Reusable Elements"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Reusability is a cure for developers. React offers tools and frameworks that developers may reuse to build new apps. This platform allows contrivers to reuse segments made for other apps with similar functionality. It reduces growth time and ensures faultless functioning."}]},{"type":"element","tagName":"h3","properties":{"id":"libraries-for-javascript-programming"},"children":[{"type":"text","value":"Libraries for JavaScript programming"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A potent combination of JavaScript and HTML code is constantly employed, streamlining the whole coding process. The JS library has numerous methods that translate HTML elements into needed functions and simplify the overall project."}]},{"type":"element","tagName":"h3","properties":{"id":"assistance-with-components"},"children":[{"type":"text","value":"Assistance with Components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React combines JavaScript and HTML tags. Then React acts as a mediator, representing the DOM and helping decide which element needs to be changed. The HTML elements and JS codes make dealing with large amounts of data easier."}]},{"type":"element","tagName":"h3","properties":{"id":"seo-friendly"},"children":[{"type":"text","value":"SEO-friendly"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Facebook put a lot of work on React. Likely the best way to construct great, SEO-friendly user experiences spanning browsers and engines."}]},{"type":"element","tagName":"h3","properties":{"id":"lightweight-dom-integration"},"children":[{"type":"text","value":"Lightweight DOM integration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Because React is so simple, it perfectly implements the DOM (document object model). It does not utilize the design but allows developers to change the DOM version in memory. This feature automatically improves application performance."}]},{"type":"element","tagName":"h3","properties":{"id":"expert-data-binding"},"children":[{"type":"text","value":"Expert Data Binding"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React lags one-way data binding. It means anybody can trace all modifications made to any data section. Its simplicity is reflected here."}]},{"type":"element","tagName":"h3","properties":{"id":"other-benefits-of-react"},"children":[{"type":"text","value":"Other Benefits of React"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Facilitates coding of JavaScript"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Outstanding cross-platform support"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Manages dependencies"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Easy template design"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"UI-driven designs"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Simple to adopt"}]}]},{"type":"element","tagName":"h2","properties":{"id":"ten-reasons-to-use-react-in-your-project"},"children":[{"type":"text","value":"Ten Reasons to Use React in Your Project"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you've heard of React but aren't sure whether to utilize it in your project, here are the top ten reasons why React could be the best choice."}]},{"type":"element","tagName":"h3","properties":{"id":"1-it-is-simple-to-learn"},"children":[{"type":"text","value":"1. It is simple to learn."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Unlike Angular and Vue, React is considerably easier to understand. It's one of the critical reasons React proliferated. It helps firms construct projects rapidly. The more challenging technology or structure is to comprehend, the lengthier it takes to develop. And we humans prefer to shun complex tasks. However, because React is a straightforward platform, enterprises and major brands are more tempted to use it."}]},{"type":"element","tagName":"h3","properties":{"id":"2-creating-rich-user-interfaces"},"children":[{"type":"text","value":"2. Creating rich user interfaces"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The UI of a program is critical nowadays. A poorly designed UI reduces an application's chances of success. However, a high-quality UI increases the likelihood of people using your program. So, creating rich end-UIs is crucial for a program to exist. The helpful information is that React's declarative elements allow us to construct high-quality, rich UXs."}]},{"type":"element","tagName":"h3","properties":{"id":"3-it-supports-custom-components"},"children":[{"type":"text","value":"3. It supports custom components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"JSX, a voluntary semantic extension, allows you to design your elements for React. These elements allow HTML quoting and make subcomponent rendering easy for contrivers. JSX is already used to design bespoke elements, construct high-volume apps, and transform HTML mock-ups into ReactElement trees."}]},{"type":"element","tagName":"h3","properties":{"id":"4-it-boosts-developers-output"},"children":[{"type":"text","value":"4. It boosts developers' output"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Frequent updates can pose problems with complex logic since a single move might substantially affect other aspects. Facebook fixed the issue by making React's elements reusable. Reusable elements allow formulators to reuse digital materials. It's also simple to add essential components like keys, input fields, and a checkbox to wrapper elements, which will then be moved to the root component. Because each element in React has its internal logic quickly changed, this strategy increases application growth productivity."}]},{"type":"element","tagName":"h3","properties":{"id":"5-it-provides-quick-rendering"},"children":[{"type":"text","value":"5. It provides quick rendering"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Defining the app's structure early in the design process is crucial. The DOM model is, in a nutshell, a tree-structured model. Slight UI changes at higher levels might have significant consequences. A virtual DOM created by Facebook can address such differences. As its name indicates, the virtual DOM is a virtual representation that allows testing and evaluating risks before making any changes. Faster app performance and a better UX."}]},{"type":"element","tagName":"h3","properties":{"id":"6-its-search-engine-optimized"},"children":[{"type":"text","value":"6. It's search engine optimized."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"SEO is the key to any internet business's success. Google favors apps that load quickly and render quickly. React's quick rendering minimizes webpage load time compared to other platforms, which helps businesses rank higher on Google Search Engine Result Pages."}]},{"type":"element","tagName":"h3","properties":{"id":"7-it-includes-a-growth-toolbox"},"children":[{"type":"text","value":"7. It includes a growth toolbox"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Incorporating new technology into projects may be enjoyable and helpful, but only when done correctly. Facebook recognizes this and has introduced much-needed React and Chrome dev tools to its React structure. These React tools let designers find the child and parent elements, investigate components' hierarchical structures, and examine elements' states and properties."}]},{"type":"element","tagName":"h3","properties":{"id":"8-supportive-community"},"children":[{"type":"text","value":"8. Supportive community"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"One of the advantages of utilizing React, like Angular, is the strong community. Every day, thousands of React designers improve the web platform. The project has 136,079 stars and 1,331 regular patrons, at the time of writing this. Experts often provide unlimited React tutorial videos and in-depth React papers and blogs. Also, React experts frequently answer questions on QA sites, so you can always receive professional help."}]},{"type":"element","tagName":"h3","properties":{"id":"9-it-improves-code-stability"},"children":[{"type":"text","value":"9. It improves code stability"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React ensures that changes in the child structure do not impact the parent structure. So, if a designer modifies an object, they need to edit its states. They will upgrade only one element. This flow of data and architecture improves the code's stability and the application's pace."}]},{"type":"element","tagName":"h3","properties":{"id":"10-numerous-fortune-500-companies-use-it"},"children":[{"type":"text","value":"10. Numerous Fortune 500 companies use it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Still undecided about React?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Check out some instances of React solutions that are inspiring. Many Fortune 500 organizations use React for their web pages and mobile apps. Several high-profile firms use the React framework, including Netflix, PayPal, the BBC, Lyft, and the Times New York, to cite just a few. Tencent QQ, Walmart, Tesla, and Airbnb are just a few well-known companies that have used the React structure in their mobile applications. To put it simply, React is a convenient web and mobile app growth platform."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now that you know the benefits and best practices of React, you can see why it is an excellent framework. Large and mid-sized businesses alike are using React to create their web pages' UIs, which should come as no surprise."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"what-is-react","heading":"What is React"},{"id":"react-interactive-ui-features","heading":"React Interactive UI Features","items":[{"id":"simple-to-use","heading":"Simple to use"},{"id":"declarative","heading":"Declarative"},{"id":"reusable-elements","heading":"Reusable Elements"},{"id":"libraries-for-javascript-programming","heading":"Libraries for JavaScript programming"},{"id":"assistance-with-components","heading":"Assistance with Components"},{"id":"seo-friendly","heading":"SEO-friendly"},{"id":"lightweight-dom-integration","heading":"Lightweight DOM integration"},{"id":"expert-data-binding","heading":"Expert Data Binding"},{"id":"other-benefits-of-react","heading":"Other Benefits of React"}]},{"id":"ten-reasons-to-use-react-in-your-project","heading":"Ten Reasons to Use React in Your Project","items":[{"id":"1-it-is-simple-to-learn","heading":"1. It is simple to learn."},{"id":"2-creating-rich-user-interfaces","heading":"2. Creating rich user interfaces"},{"id":"3-it-supports-custom-components","heading":"3. It supports custom components"},{"id":"4-it-boosts-developers-output","heading":"4. It boosts developers' output"},{"id":"5-it-provides-quick-rendering","heading":"5. It provides quick rendering"},{"id":"6-its-search-engine-optimized","heading":"6. It's search engine optimized."},{"id":"7-it-includes-a-growth-toolbox","heading":"7. It includes a growth toolbox"},{"id":"8-supportive-community","heading":"8. Supportive community"},{"id":"9-it-improves-code-stability","heading":"9. It improves code stability"},{"id":"10-numerous-fortune-500-companies-use-it","heading":"10. Numerous Fortune 500 companies use it."}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg","publicURL":"/static/be66cede7624ebbc675202ad24146138/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg","imageMeta":{"width":1920,"height":1280},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAAByq3hGFI//8QAGRAAAgMBAAAAAAAAAAAAAAAAAAECERJB/9oACAEBAAEFAqVDUThJ5f8A/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BR//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAARIP/aAAgBAQAGPwKUf//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExURCh/9oACAEBAAE/IdwPnl7EdIFodhYy1xqf/9oADAMBAAIAAwAAABDD3//EABcRAAMBAAAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8QFC0//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8Qiv/EABoQAQEAAwEBAAAAAAAAAAAAAAERACExQZH/2gAIAQEAAT8QWKKl1xiFnN7fcASUmVSsfLnLCpsuJWr1F8mf/9k=","aspectRatio":1.5028901734104045,"src":"/static/be66cede7624ebbc675202ad24146138/d5c54/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg","srcSet":"/static/be66cede7624ebbc675202ad24146138/65d8c/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 260w,\n/static/be66cede7624ebbc675202ad24146138/c5f21/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 520w,\n/static/be66cede7624ebbc675202ad24146138/d5c54/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 1040w,\n/static/be66cede7624ebbc675202ad24146138/81a53/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 1560w,\n/static/be66cede7624ebbc675202ad24146138/74fd5/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 1920w","srcWebp":"/static/be66cede7624ebbc675202ad24146138/e4875/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp","srcSetWebp":"/static/be66cede7624ebbc675202ad24146138/dc8f3/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 260w,\n/static/be66cede7624ebbc675202ad24146138/2db4b/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 520w,\n/static/be66cede7624ebbc675202ad24146138/e4875/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 1040w,\n/static/be66cede7624ebbc675202ad24146138/f5845/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 1560w,\n/static/be66cede7624ebbc675202ad24146138/6833b/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 1920w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"ghostPost":{"id":"Ghost__Post__61bc7669c393bb64592d8688","title":"10 Reasons Why You Should Use React for Building Interactive User Interfaces","slug":"10-reasons-why-you-should-use-react-for-building-interactive-user-interfaces","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/12/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg","excerpt":"Web Page design takes time, effort, and attention to detail, but React simplifies the user interface design and developers’ lives.","custom_excerpt":"Web Page design takes time, effort, and attention to detail, but React simplifies the user interface design and developers’ lives.","visibility":"public","created_at_pretty":"17 Dec 2021","published_at_pretty":"17 Dec 2021","updated_at_pretty":"17 Dec 2021","created_at":"2021-12-17T11:37:13.000+00:00","published_at":"2021-12-17T12:04:36.000+00:00","updated_at":"2021-12-17T12:04:36.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"harikrishna","url":"https://backend.shahednasser.com/author/harikrishna/","name":"Harikrishna Kundariya","bio":"A marketer, developer, IoT, ChatBot & Blockchain savvy, designer, co-founder, Director of eSparkBiz Technologies. His 10+ experience enables him to provide digital solutions based on IoT and ChatBot.","cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2021/10/Author-Headshot.jpg","location":null,"website":"https://www.esparkinfo.com","twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"harikrishna","url":"https://backend.shahednasser.com/author/harikrishna/","name":"Harikrishna Kundariya","bio":"A marketer, developer, IoT, ChatBot & Blockchain savvy, designer, co-founder, Director of eSparkBiz Technologies. His 10+ experience enables him to provide digital solutions based on IoT and ChatBot.","cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2021/10/Author-Headshot.jpg","location":null,"website":"https://www.esparkinfo.com","twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Author-Headshot.jpg","publicURL":"/static/e393bccca9ad04da9f27a0afd06cca7d/Author-Headshot.jpg","imageMeta":{"width":250,"height":250},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAQFAgMG/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQIA/9oADAMBAAIQAxAAAAGzj4VdHRoairghtwL/AP/EABsQAAICAwEAAAAAAAAAAAAAAAECAwQAERIz/9oACAEBAAEFAptiOEt1lmfgCZkeOwrrc98QbH//xAAVEQEBAAAAAAAAAAAAAAAAAAAgQf/aAAgBAwEBPwGD/8QAFREBAQAAAAAAAAAAAAAAAAAAIEH/2gAIAQIBAT8Bo//EAB8QAAEDAwUAAAAAAAAAAAAAAAEAAhAREmEhIjFBgf/aAAgBAQAGPwLaiC4uGYs7Kq3jKqdCvJ//xAAdEAEBAQACAgMAAAAAAAAAAAABEQAxURAhQaGx/9oACAEBAAE/IU5UaFDjClDR5eDhKPt6M4S/ZgqHzG/DlZLgq97/2gAMAwEAAgADAAAAELcAvv/EABcRAQEBAQAAAAAAAAAAAAAAAAERABD/2gAIAQMBAT8QJ0BN/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEREP/aAAgBAgEBPxCPVP/EABwQAQACAwEBAQAAAAAAAAAAAAEAESExQWFR8P/aAAgBAQABPxB6zouIXKH2LTwHKN5LOS52lQ0zv1ipNFZ4do1Lq4pXT55E3/O46xUaL1HFl4Yan//Z","aspectRatio":1,"src":"/static/e393bccca9ad04da9f27a0afd06cca7d/31709/Author-Headshot.jpg","srcSet":"/static/e393bccca9ad04da9f27a0afd06cca7d/f340b/Author-Headshot.jpg 28w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/22d64/Author-Headshot.jpg 55w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/31709/Author-Headshot.jpg 110w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/aa249/Author-Headshot.jpg 165w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/0dc33/Author-Headshot.jpg 220w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/84d81/Author-Headshot.jpg 250w","srcWebp":"/static/e393bccca9ad04da9f27a0afd06cca7d/8678c/Author-Headshot.webp","srcSetWebp":"/static/e393bccca9ad04da9f27a0afd06cca7d/59cda/Author-Headshot.webp 28w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/7da75/Author-Headshot.webp 55w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/8678c/Author-Headshot.webp 110w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/f282e/Author-Headshot.webp 165w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/a7b21/Author-Headshot.webp 220w,\n/static/e393bccca9ad04da9f27a0afd06cca7d/1d872/Author-Headshot.webp 250w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"react","url":"https://backend.shahednasser.com/tag/react/","name":"React","visibility":"public","feature_image":"https://images.unsplash.com/photo-1581276879432-15e50529f34b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDN8fHJlYWN0fGVufDB8fHx8MTYyMjYzMzI0MA&ixlib=rb-1.2.1&q=80&w=2000","description":"Learn more about React through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1581276879432-15e50529f34b.jpg","publicURL":"/static/7140ea32e1157ba61402d5d67ab846d4/photo-1581276879432-15e50529f34b.jpg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHJai1MBP/EABcQAAMBAAAAAAAAAAAAAAAAAAABEBH/2gAIAQEAAQUCuDU//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Bh//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABgQAQEBAQEAAAAAAAAAAAAAAAABESFR/9oACAEBAAE/IYy+rHKDH//aAAwDAQACAAMAAAAQC9//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPxCn/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8QUT//xAAaEAADAQADAAAAAAAAAAAAAAAAAREhQWFx/9oACAEBAAE/EMY0neijzwMrrVEm7auUQPNGlP/Z","aspectRatio":1.5028901734104045,"src":"/static/7140ea32e1157ba61402d5d67ab846d4/d5c54/photo-1581276879432-15e50529f34b.jpg","srcSet":"/static/7140ea32e1157ba61402d5d67ab846d4/65d8c/photo-1581276879432-15e50529f34b.jpg 260w,\n/static/7140ea32e1157ba61402d5d67ab846d4/c5f21/photo-1581276879432-15e50529f34b.jpg 520w,\n/static/7140ea32e1157ba61402d5d67ab846d4/d5c54/photo-1581276879432-15e50529f34b.jpg 1040w,\n/static/7140ea32e1157ba61402d5d67ab846d4/81a53/photo-1581276879432-15e50529f34b.jpg 1560w,\n/static/7140ea32e1157ba61402d5d67ab846d4/4e5f3/photo-1581276879432-15e50529f34b.jpg 2000w","srcWebp":"/static/7140ea32e1157ba61402d5d67ab846d4/e4875/photo-1581276879432-15e50529f34b.webp","srcSetWebp":"/static/7140ea32e1157ba61402d5d67ab846d4/dc8f3/photo-1581276879432-15e50529f34b.webp 260w,\n/static/7140ea32e1157ba61402d5d67ab846d4/2db4b/photo-1581276879432-15e50529f34b.webp 520w,\n/static/7140ea32e1157ba61402d5d67ab846d4/e4875/photo-1581276879432-15e50529f34b.webp 1040w,\n/static/7140ea32e1157ba61402d5d67ab846d4/f5845/photo-1581276879432-15e50529f34b.webp 1560w,\n/static/7140ea32e1157ba61402d5d67ab846d4/49d6b/photo-1581276879432-15e50529f34b.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"react","url":"https://backend.shahednasser.com/tag/react/","name":"React","visibility":"public","feature_image":"https://images.unsplash.com/photo-1581276879432-15e50529f34b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDN8fHJlYWN0fGVufDB8fHx8MTYyMjYzMzI0MA&ixlib=rb-1.2.1&q=80&w=2000","description":"Learn more about React through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null}],"plaintext":"Creating interactive end-user Interfaces is difficult regardless of the\nprogramming platform. Web Page design takes time, effort, and attention to\ndetail, but React [https://reactjs.org] simplifies the user interface design and\ndevelopers’ lives.\n\nYou may be curious about using React to build User Interfaces (UI). With its\nexcellent JavaScript structure, the growth process is considerably more\nmanageable.\n\nBig corporations like Facebook, Airbnb, Netflix, and PayPal use it. You surely\ndon't want to ruin your chance of creating an excellent UI for your project.\n\nYou should hire the best React development company\n[https://www.esparkinfo.com/web-app-development/react-js.html] to get your hands\non highly efficient and competitive React designers.\n\nWhat is React\nFacebook created and maintained React, a JavaScript library. React is a\npractical, straightforward, and adaptable open-source JavaScript library for\ndeveloping simple, quick, and scalable online apps.\n\nReact is a widely sought-after option for developing user-friendly and engaging\nweb pages and apps that allow developers to be more creative.\n\nWhat makes React so popular among businesses and brands?\n\nReact Interactive UI Features\nSimple to use\nReact is easy to use and offers dynamism to any UI layout. It also enables rapid\napplication progress with good quality, saving time for both clients and\ndesigners.\n\nDeclarative\nReact allows significant data changes to affect specified UI elements\nautomatically. Because of this advanced feature, you do not need to do anything\nfurther to upgrade your UI.\n\nReusable Elements\nReusability is a cure for developers. React offers tools and frameworks that\ndevelopers may reuse to build new apps. This platform allows contrivers to reuse\nsegments made for other apps with similar functionality. It reduces growth time\nand ensures faultless functioning.\n\nLibraries for JavaScript programming\nA potent combination of JavaScript and HTML code is constantly employed,\nstreamlining the whole coding process. The JS library has numerous methods that\ntranslate HTML elements into needed functions and simplify the overall project.\n\nAssistance with Components\nReact combines JavaScript and HTML tags. Then React acts as a mediator,\nrepresenting the DOM and helping decide which element needs to be changed. The\nHTML elements and JS codes make dealing with large amounts of data easier.\n\nSEO-friendly\nFacebook put a lot of work on React. Likely the best way to construct great,\nSEO-friendly user experiences spanning browsers and engines.\n\nLightweight DOM integration\nBecause React is so simple, it perfectly implements the DOM (document object\nmodel). It does not utilize the design but allows developers to change the DOM\nversion in memory. This feature automatically improves application performance.\n\nExpert Data Binding\nReact lags one-way data binding. It means anybody can trace all modifications\nmade to any data section. Its simplicity is reflected here.\n\nOther Benefits of React\n * Facilitates coding of JavaScript\n * Outstanding cross-platform support\n * Manages dependencies\n * Easy template design\n * UI-driven designs\n * Simple to adopt\n\nTen Reasons to Use React in Your Project\nIf you've heard of React but aren't sure whether to utilize it in your project,\nhere are the top ten reasons why React could be the best choice.\n\n1. It is simple to learn.\nUnlike Angular and Vue, React is considerably easier to understand. It's one of\nthe critical reasons React proliferated. It helps firms construct projects\nrapidly. The more challenging technology or structure is to comprehend, the\nlengthier it takes to develop. And we humans prefer to shun complex tasks.\nHowever, because React is a straightforward platform, enterprises and major\nbrands are more tempted to use it.\n\n2. Creating rich user interfaces\nThe UI of a program is critical nowadays. A poorly designed UI reduces an\napplication's chances of success. However, a high-quality UI increases the\nlikelihood of people using your program. So, creating rich end-UIs is crucial\nfor a program to exist. The helpful information is that React's declarative\nelements allow us to construct high-quality, rich UXs.\n\n3. It supports custom components\nJSX, a voluntary semantic extension, allows you to design your elements for\nReact. These elements allow HTML quoting and make subcomponent rendering easy\nfor contrivers. JSX is already used to design bespoke elements, construct\nhigh-volume apps, and transform HTML mock-ups into ReactElement trees.\n\n4. It boosts developers' output\nFrequent updates can pose problems with complex logic since a single move might\nsubstantially affect other aspects. Facebook fixed the issue by making React's\nelements reusable. Reusable elements allow formulators to reuse digital\nmaterials. It's also simple to add essential components like keys, input fields,\nand a checkbox to wrapper elements, which will then be moved to the root\ncomponent. Because each element in React has its internal logic quickly changed,\nthis strategy increases application growth productivity.\n\n5. It provides quick rendering\nDefining the app's structure early in the design process is crucial. The DOM\nmodel is, in a nutshell, a tree-structured model. Slight UI changes at higher\nlevels might have significant consequences. A virtual DOM created by Facebook\ncan address such differences. As its name indicates, the virtual DOM is a\nvirtual representation that allows testing and evaluating risks before making\nany changes. Faster app performance and a better UX.\n\n6. It's search engine optimized.\nSEO is the key to any internet business's success. Google favors apps that load\nquickly and render quickly. React's quick rendering minimizes webpage load time\ncompared to other platforms, which helps businesses rank higher on Google Search\nEngine Result Pages.\n\n7. It includes a growth toolbox\nIncorporating new technology into projects may be enjoyable and helpful, but\nonly when done correctly. Facebook recognizes this and has introduced\nmuch-needed React and Chrome dev tools to its React structure. These React tools\nlet designers find the child and parent elements, investigate components'\nhierarchical structures, and examine elements' states and properties.\n\n8. Supportive community\nOne of the advantages of utilizing React, like Angular, is the strong community.\nEvery day, thousands of React designers improve the web platform. The project\nhas 136,079 stars and 1,331 regular patrons, at the time of writing this.\nExperts often provide unlimited React tutorial videos and in-depth React papers\nand blogs. Also, React experts frequently answer questions on QA sites, so you\ncan always receive professional help.\n\n9. It improves code stability\nReact ensures that changes in the child structure do not impact the parent\nstructure. So, if a designer modifies an object, they need to edit its states.\nThey will upgrade only one element. This flow of data and architecture improves\nthe code's stability and the application's pace.\n\n10. Numerous Fortune 500 companies use it.\nStill undecided about React?\n\nCheck out some instances of React solutions that are inspiring. Many Fortune 500\norganizations use React for their web pages and mobile apps. Several\nhigh-profile firms use the React framework, including Netflix, PayPal, the BBC,\nLyft, and the Times New York, to cite just a few. Tencent QQ, Walmart, Tesla,\nand Airbnb are just a few well-known companies that have used the React\nstructure in their mobile applications. To put it simply, React is a convenient\nweb and mobile app growth platform.\n\nConclusion\nNow that you know the benefits and best practices of React, you can see why it\nis an excellent framework. Large and mid-sized businesses alike are using React\nto create their web pages' UIs, which should come as no surprise.","html":"Creating interactive end-user Interfaces is difficult regardless of the programming platform. Web Page design takes time, effort, and attention to detail, but React simplifies the user interface design and developers’ lives.
You may be curious about using React to build User Interfaces (UI). With its excellent JavaScript structure, the growth process is considerably more manageable.
Big corporations like Facebook, Airbnb, Netflix, and PayPal use it. You surely don't want to ruin your chance of creating an excellent UI for your project.
You should hire the best React development company to get your hands on highly efficient and competitive React designers.
Facebook created and maintained React, a JavaScript library. React is a practical, straightforward, and adaptable open-source JavaScript library for developing simple, quick, and scalable online apps.
React is a widely sought-after option for developing user-friendly and engaging web pages and apps that allow developers to be more creative.
What makes React so popular among businesses and brands?
React is easy to use and offers dynamism to any UI layout. It also enables rapid application progress with good quality, saving time for both clients and designers.
React allows significant data changes to affect specified UI elements automatically. Because of this advanced feature, you do not need to do anything further to upgrade your UI.
Reusability is a cure for developers. React offers tools and frameworks that developers may reuse to build new apps. This platform allows contrivers to reuse segments made for other apps with similar functionality. It reduces growth time and ensures faultless functioning.
A potent combination of JavaScript and HTML code is constantly employed, streamlining the whole coding process. The JS library has numerous methods that translate HTML elements into needed functions and simplify the overall project.
React combines JavaScript and HTML tags. Then React acts as a mediator, representing the DOM and helping decide which element needs to be changed. The HTML elements and JS codes make dealing with large amounts of data easier.
Facebook put a lot of work on React. Likely the best way to construct great, SEO-friendly user experiences spanning browsers and engines.
Because React is so simple, it perfectly implements the DOM (document object model). It does not utilize the design but allows developers to change the DOM version in memory. This feature automatically improves application performance.
React lags one-way data binding. It means anybody can trace all modifications made to any data section. Its simplicity is reflected here.
If you've heard of React but aren't sure whether to utilize it in your project, here are the top ten reasons why React could be the best choice.
Unlike Angular and Vue, React is considerably easier to understand. It's one of the critical reasons React proliferated. It helps firms construct projects rapidly. The more challenging technology or structure is to comprehend, the lengthier it takes to develop. And we humans prefer to shun complex tasks. However, because React is a straightforward platform, enterprises and major brands are more tempted to use it.
The UI of a program is critical nowadays. A poorly designed UI reduces an application's chances of success. However, a high-quality UI increases the likelihood of people using your program. So, creating rich end-UIs is crucial for a program to exist. The helpful information is that React's declarative elements allow us to construct high-quality, rich UXs.
JSX, a voluntary semantic extension, allows you to design your elements for React. These elements allow HTML quoting and make subcomponent rendering easy for contrivers. JSX is already used to design bespoke elements, construct high-volume apps, and transform HTML mock-ups into ReactElement trees.
Frequent updates can pose problems with complex logic since a single move might substantially affect other aspects. Facebook fixed the issue by making React's elements reusable. Reusable elements allow formulators to reuse digital materials. It's also simple to add essential components like keys, input fields, and a checkbox to wrapper elements, which will then be moved to the root component. Because each element in React has its internal logic quickly changed, this strategy increases application growth productivity.
Defining the app's structure early in the design process is crucial. The DOM model is, in a nutshell, a tree-structured model. Slight UI changes at higher levels might have significant consequences. A virtual DOM created by Facebook can address such differences. As its name indicates, the virtual DOM is a virtual representation that allows testing and evaluating risks before making any changes. Faster app performance and a better UX.
SEO is the key to any internet business's success. Google favors apps that load quickly and render quickly. React's quick rendering minimizes webpage load time compared to other platforms, which helps businesses rank higher on Google Search Engine Result Pages.
Incorporating new technology into projects may be enjoyable and helpful, but only when done correctly. Facebook recognizes this and has introduced much-needed React and Chrome dev tools to its React structure. These React tools let designers find the child and parent elements, investigate components' hierarchical structures, and examine elements' states and properties.
One of the advantages of utilizing React, like Angular, is the strong community. Every day, thousands of React designers improve the web platform. The project has 136,079 stars and 1,331 regular patrons, at the time of writing this. Experts often provide unlimited React tutorial videos and in-depth React papers and blogs. Also, React experts frequently answer questions on QA sites, so you can always receive professional help.
React ensures that changes in the child structure do not impact the parent structure. So, if a designer modifies an object, they need to edit its states. They will upgrade only one element. This flow of data and architecture improves the code's stability and the application's pace.
Still undecided about React?
Check out some instances of React solutions that are inspiring. Many Fortune 500 organizations use React for their web pages and mobile apps. Several high-profile firms use the React framework, including Netflix, PayPal, the BBC, Lyft, and the Times New York, to cite just a few. Tencent QQ, Walmart, Tesla, and Airbnb are just a few well-known companies that have used the React structure in their mobile applications. To put it simply, React is a convenient web and mobile app growth platform.
Now that you know the benefits and best practices of React, you can see why it is an excellent framework. Large and mid-sized businesses alike are using React to create their web pages' UIs, which should come as no surprise.
","url":"https://backend.shahednasser.com/10-reasons-why-you-should-use-react-for-building-interactive-user-interfaces/","canonical_url":null,"uuid":"bbb1997e-8a87-450e-a3ee-623061efa645","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"61bc7669c393bb64592d8688","reading_time":5,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Creating interactive end-user Interfaces is difficult regardless of the programming platform. Web Page design takes time, effort, and attention to detail, but React simplifies the user interface design and developers’ lives.
You may be curious about using React to build User Interfaces (UI). With its excellent JavaScript structure, the growth process is considerably more manageable.
Big corporations like Facebook, Airbnb, Netflix, and PayPal use it. You surely don't want to ruin your chance of creating an excellent UI for your project.
You should hire the best React development company to get your hands on highly efficient and competitive React designers.
Facebook created and maintained React, a JavaScript library. React is a practical, straightforward, and adaptable open-source JavaScript library for developing simple, quick, and scalable online apps.
React is a widely sought-after option for developing user-friendly and engaging web pages and apps that allow developers to be more creative.
What makes React so popular among businesses and brands?
React is easy to use and offers dynamism to any UI layout. It also enables rapid application progress with good quality, saving time for both clients and designers.
React allows significant data changes to affect specified UI elements automatically. Because of this advanced feature, you do not need to do anything further to upgrade your UI.
Reusability is a cure for developers. React offers tools and frameworks that developers may reuse to build new apps. This platform allows contrivers to reuse segments made for other apps with similar functionality. It reduces growth time and ensures faultless functioning.
A potent combination of JavaScript and HTML code is constantly employed, streamlining the whole coding process. The JS library has numerous methods that translate HTML elements into needed functions and simplify the overall project.
React combines JavaScript and HTML tags. Then React acts as a mediator, representing the DOM and helping decide which element needs to be changed. The HTML elements and JS codes make dealing with large amounts of data easier.
Facebook put a lot of work on React. Likely the best way to construct great, SEO-friendly user experiences spanning browsers and engines.
Because React is so simple, it perfectly implements the DOM (document object model). It does not utilize the design but allows developers to change the DOM version in memory. This feature automatically improves application performance.
React lags one-way data binding. It means anybody can trace all modifications made to any data section. Its simplicity is reflected here.
If you've heard of React but aren't sure whether to utilize it in your project, here are the top ten reasons why React could be the best choice.
Unlike Angular and Vue, React is considerably easier to understand. It's one of the critical reasons React proliferated. It helps firms construct projects rapidly. The more challenging technology or structure is to comprehend, the lengthier it takes to develop. And we humans prefer to shun complex tasks. However, because React is a straightforward platform, enterprises and major brands are more tempted to use it.
The UI of a program is critical nowadays. A poorly designed UI reduces an application's chances of success. However, a high-quality UI increases the likelihood of people using your program. So, creating rich end-UIs is crucial for a program to exist. The helpful information is that React's declarative elements allow us to construct high-quality, rich UXs.
JSX, a voluntary semantic extension, allows you to design your elements for React. These elements allow HTML quoting and make subcomponent rendering easy for contrivers. JSX is already used to design bespoke elements, construct high-volume apps, and transform HTML mock-ups into ReactElement trees.
Frequent updates can pose problems with complex logic since a single move might substantially affect other aspects. Facebook fixed the issue by making React's elements reusable. Reusable elements allow formulators to reuse digital materials. It's also simple to add essential components like keys, input fields, and a checkbox to wrapper elements, which will then be moved to the root component. Because each element in React has its internal logic quickly changed, this strategy increases application growth productivity.
Defining the app's structure early in the design process is crucial. The DOM model is, in a nutshell, a tree-structured model. Slight UI changes at higher levels might have significant consequences. A virtual DOM created by Facebook can address such differences. As its name indicates, the virtual DOM is a virtual representation that allows testing and evaluating risks before making any changes. Faster app performance and a better UX.
SEO is the key to any internet business's success. Google favors apps that load quickly and render quickly. React's quick rendering minimizes webpage load time compared to other platforms, which helps businesses rank higher on Google Search Engine Result Pages.
Incorporating new technology into projects may be enjoyable and helpful, but only when done correctly. Facebook recognizes this and has introduced much-needed React and Chrome dev tools to its React structure. These React tools let designers find the child and parent elements, investigate components' hierarchical structures, and examine elements' states and properties.
One of the advantages of utilizing React, like Angular, is the strong community. Every day, thousands of React designers improve the web platform. The project has 136,079 stars and 1,331 regular patrons, at the time of writing this. Experts often provide unlimited React tutorial videos and in-depth React papers and blogs. Also, React experts frequently answer questions on QA sites, so you can always receive professional help.
React ensures that changes in the child structure do not impact the parent structure. So, if a designer modifies an object, they need to edit its states. They will upgrade only one element. This flow of data and architecture improves the code's stability and the application's pace.
Still undecided about React?
Check out some instances of React solutions that are inspiring. Many Fortune 500 organizations use React for their web pages and mobile apps. Several high-profile firms use the React framework, including Netflix, PayPal, the BBC, Lyft, and the Times New York, to cite just a few. Tencent QQ, Walmart, Tesla, and Airbnb are just a few well-known companies that have used the React structure in their mobile applications. To put it simply, React is a convenient web and mobile app growth platform.
Now that you know the benefits and best practices of React, you can see why it is an excellent framework. Large and mid-sized businesses alike are using React to create their web pages' UIs, which should come as no surprise.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creating interactive end-user Interfaces is difficult regardless of the programming platform. Web Page design takes time, effort, and attention to detail, but "},{"type":"element","tagName":"a","properties":{"href":"https://reactjs.org"},"children":[{"type":"text","value":"React"}]},{"type":"text","value":" simplifies the user interface design and developers’ lives."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You may be curious about using React to build User Interfaces (UI). With its excellent JavaScript structure, the growth process is considerably more manageable."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Big corporations like Facebook, Airbnb, Netflix, and PayPal use it. You surely don't want to ruin your chance of creating an excellent UI for your project."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You should "},{"type":"element","tagName":"a","properties":{"href":"https://www.esparkinfo.com/web-app-development/react-js.html"},"children":[{"type":"text","value":"hire the best React development company"}]},{"type":"text","value":" to get your hands on highly efficient and competitive React designers."}]},{"type":"element","tagName":"h2","properties":{"id":"what-is-react"},"children":[{"type":"text","value":"What is React"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://lh4.googleusercontent.com/hX9hG8wUHdHJ2rsqOkiQb9fPUC9R3ZQ03g2I6ljzu7iq9D03WLpedXFf6UNwg7yuYVeVf2tO6DRomV3v_Eu4ToY78tNjdE5jpoEVHm6FPmv8kKPEZy7TES0mwQabMnbMG-ghUbV2","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Facebook created and maintained React, a JavaScript library. React is a practical, straightforward, and adaptable open-source JavaScript library for developing simple, quick, and scalable online apps."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React is a widely sought-after option for developing user-friendly and engaging web pages and apps that allow developers to be more creative."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What makes React so popular among businesses and brands?"}]},{"type":"element","tagName":"h2","properties":{"id":"react-interactive-ui-features"},"children":[{"type":"text","value":"React Interactive UI Features"}]},{"type":"element","tagName":"h3","properties":{"id":"simple-to-use"},"children":[{"type":"text","value":"Simple to use"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React is easy to use and offers dynamism to any UI layout. It also enables rapid application progress with good quality, saving time for both clients and designers."}]},{"type":"element","tagName":"h3","properties":{"id":"declarative"},"children":[{"type":"text","value":"Declarative"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React allows significant data changes to affect specified UI elements automatically. Because of this advanced feature, you do not need to do anything further to upgrade your UI."}]},{"type":"element","tagName":"h3","properties":{"id":"reusable-elements"},"children":[{"type":"text","value":"Reusable Elements"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Reusability is a cure for developers. React offers tools and frameworks that developers may reuse to build new apps. This platform allows contrivers to reuse segments made for other apps with similar functionality. It reduces growth time and ensures faultless functioning."}]},{"type":"element","tagName":"h3","properties":{"id":"libraries-for-javascript-programming"},"children":[{"type":"text","value":"Libraries for JavaScript programming"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A potent combination of JavaScript and HTML code is constantly employed, streamlining the whole coding process. The JS library has numerous methods that translate HTML elements into needed functions and simplify the overall project."}]},{"type":"element","tagName":"h3","properties":{"id":"assistance-with-components"},"children":[{"type":"text","value":"Assistance with Components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React combines JavaScript and HTML tags. Then React acts as a mediator, representing the DOM and helping decide which element needs to be changed. The HTML elements and JS codes make dealing with large amounts of data easier."}]},{"type":"element","tagName":"h3","properties":{"id":"seo-friendly"},"children":[{"type":"text","value":"SEO-friendly"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Facebook put a lot of work on React. Likely the best way to construct great, SEO-friendly user experiences spanning browsers and engines."}]},{"type":"element","tagName":"h3","properties":{"id":"lightweight-dom-integration"},"children":[{"type":"text","value":"Lightweight DOM integration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Because React is so simple, it perfectly implements the DOM (document object model). It does not utilize the design but allows developers to change the DOM version in memory. This feature automatically improves application performance."}]},{"type":"element","tagName":"h3","properties":{"id":"expert-data-binding"},"children":[{"type":"text","value":"Expert Data Binding"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React lags one-way data binding. It means anybody can trace all modifications made to any data section. Its simplicity is reflected here."}]},{"type":"element","tagName":"h3","properties":{"id":"other-benefits-of-react"},"children":[{"type":"text","value":"Other Benefits of React"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Facilitates coding of JavaScript"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Outstanding cross-platform support"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Manages dependencies"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Easy template design"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"UI-driven designs"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Simple to adopt"}]}]},{"type":"element","tagName":"h2","properties":{"id":"ten-reasons-to-use-react-in-your-project"},"children":[{"type":"text","value":"Ten Reasons to Use React in Your Project"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you've heard of React but aren't sure whether to utilize it in your project, here are the top ten reasons why React could be the best choice."}]},{"type":"element","tagName":"h3","properties":{"id":"1-it-is-simple-to-learn"},"children":[{"type":"text","value":"1. It is simple to learn."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Unlike Angular and Vue, React is considerably easier to understand. It's one of the critical reasons React proliferated. It helps firms construct projects rapidly. The more challenging technology or structure is to comprehend, the lengthier it takes to develop. And we humans prefer to shun complex tasks. However, because React is a straightforward platform, enterprises and major brands are more tempted to use it."}]},{"type":"element","tagName":"h3","properties":{"id":"2-creating-rich-user-interfaces"},"children":[{"type":"text","value":"2. Creating rich user interfaces"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The UI of a program is critical nowadays. A poorly designed UI reduces an application's chances of success. However, a high-quality UI increases the likelihood of people using your program. So, creating rich end-UIs is crucial for a program to exist. The helpful information is that React's declarative elements allow us to construct high-quality, rich UXs."}]},{"type":"element","tagName":"h3","properties":{"id":"3-it-supports-custom-components"},"children":[{"type":"text","value":"3. It supports custom components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"JSX, a voluntary semantic extension, allows you to design your elements for React. These elements allow HTML quoting and make subcomponent rendering easy for contrivers. JSX is already used to design bespoke elements, construct high-volume apps, and transform HTML mock-ups into ReactElement trees."}]},{"type":"element","tagName":"h3","properties":{"id":"4-it-boosts-developers-output"},"children":[{"type":"text","value":"4. It boosts developers' output"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Frequent updates can pose problems with complex logic since a single move might substantially affect other aspects. Facebook fixed the issue by making React's elements reusable. Reusable elements allow formulators to reuse digital materials. It's also simple to add essential components like keys, input fields, and a checkbox to wrapper elements, which will then be moved to the root component. Because each element in React has its internal logic quickly changed, this strategy increases application growth productivity."}]},{"type":"element","tagName":"h3","properties":{"id":"5-it-provides-quick-rendering"},"children":[{"type":"text","value":"5. It provides quick rendering"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Defining the app's structure early in the design process is crucial. The DOM model is, in a nutshell, a tree-structured model. Slight UI changes at higher levels might have significant consequences. A virtual DOM created by Facebook can address such differences. As its name indicates, the virtual DOM is a virtual representation that allows testing and evaluating risks before making any changes. Faster app performance and a better UX."}]},{"type":"element","tagName":"h3","properties":{"id":"6-its-search-engine-optimized"},"children":[{"type":"text","value":"6. It's search engine optimized."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"SEO is the key to any internet business's success. Google favors apps that load quickly and render quickly. React's quick rendering minimizes webpage load time compared to other platforms, which helps businesses rank higher on Google Search Engine Result Pages."}]},{"type":"element","tagName":"h3","properties":{"id":"7-it-includes-a-growth-toolbox"},"children":[{"type":"text","value":"7. It includes a growth toolbox"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Incorporating new technology into projects may be enjoyable and helpful, but only when done correctly. Facebook recognizes this and has introduced much-needed React and Chrome dev tools to its React structure. These React tools let designers find the child and parent elements, investigate components' hierarchical structures, and examine elements' states and properties."}]},{"type":"element","tagName":"h3","properties":{"id":"8-supportive-community"},"children":[{"type":"text","value":"8. Supportive community"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"One of the advantages of utilizing React, like Angular, is the strong community. Every day, thousands of React designers improve the web platform. The project has 136,079 stars and 1,331 regular patrons, at the time of writing this. Experts often provide unlimited React tutorial videos and in-depth React papers and blogs. Also, React experts frequently answer questions on QA sites, so you can always receive professional help."}]},{"type":"element","tagName":"h3","properties":{"id":"9-it-improves-code-stability"},"children":[{"type":"text","value":"9. It improves code stability"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React ensures that changes in the child structure do not impact the parent structure. So, if a designer modifies an object, they need to edit its states. They will upgrade only one element. This flow of data and architecture improves the code's stability and the application's pace."}]},{"type":"element","tagName":"h3","properties":{"id":"10-numerous-fortune-500-companies-use-it"},"children":[{"type":"text","value":"10. Numerous Fortune 500 companies use it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Still undecided about React?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Check out some instances of React solutions that are inspiring. Many Fortune 500 organizations use React for their web pages and mobile apps. Several high-profile firms use the React framework, including Netflix, PayPal, the BBC, Lyft, and the Times New York, to cite just a few. Tencent QQ, Walmart, Tesla, and Airbnb are just a few well-known companies that have used the React structure in their mobile applications. To put it simply, React is a convenient web and mobile app growth platform."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now that you know the benefits and best practices of React, you can see why it is an excellent framework. Large and mid-sized businesses alike are using React to create their web pages' UIs, which should come as no surprise."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"what-is-react","heading":"What is React"},{"id":"react-interactive-ui-features","heading":"React Interactive UI Features","items":[{"id":"simple-to-use","heading":"Simple to use"},{"id":"declarative","heading":"Declarative"},{"id":"reusable-elements","heading":"Reusable Elements"},{"id":"libraries-for-javascript-programming","heading":"Libraries for JavaScript programming"},{"id":"assistance-with-components","heading":"Assistance with Components"},{"id":"seo-friendly","heading":"SEO-friendly"},{"id":"lightweight-dom-integration","heading":"Lightweight DOM integration"},{"id":"expert-data-binding","heading":"Expert Data Binding"},{"id":"other-benefits-of-react","heading":"Other Benefits of React"}]},{"id":"ten-reasons-to-use-react-in-your-project","heading":"Ten Reasons to Use React in Your Project","items":[{"id":"1-it-is-simple-to-learn","heading":"1. It is simple to learn."},{"id":"2-creating-rich-user-interfaces","heading":"2. Creating rich user interfaces"},{"id":"3-it-supports-custom-components","heading":"3. It supports custom components"},{"id":"4-it-boosts-developers-output","heading":"4. It boosts developers' output"},{"id":"5-it-provides-quick-rendering","heading":"5. It provides quick rendering"},{"id":"6-its-search-engine-optimized","heading":"6. It's search engine optimized."},{"id":"7-it-includes-a-growth-toolbox","heading":"7. It includes a growth toolbox"},{"id":"8-supportive-community","heading":"8. Supportive community"},{"id":"9-it-improves-code-stability","heading":"9. It improves code stability"},{"id":"10-numerous-fortune-500-companies-use-it","heading":"10. Numerous Fortune 500 companies use it."}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg","publicURL":"/static/be66cede7624ebbc675202ad24146138/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg","imageMeta":{"width":1920,"height":1280},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAAByq3hGFI//8QAGRAAAgMBAAAAAAAAAAAAAAAAAAECERJB/9oACAEBAAEFAqVDUThJ5f8A/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BR//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAARIP/aAAgBAQAGPwKUf//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExURCh/9oACAEBAAE/IdwPnl7EdIFodhYy1xqf/9oADAMBAAIAAwAAABDD3//EABcRAAMBAAAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8QFC0//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8Qiv/EABoQAQEAAwEBAAAAAAAAAAAAAAERACExQZH/2gAIAQEAAT8QWKKl1xiFnN7fcASUmVSsfLnLCpsuJWr1F8mf/9k=","aspectRatio":1.5028901734104045,"src":"/static/be66cede7624ebbc675202ad24146138/d5c54/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg","srcSet":"/static/be66cede7624ebbc675202ad24146138/65d8c/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 260w,\n/static/be66cede7624ebbc675202ad24146138/c5f21/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 520w,\n/static/be66cede7624ebbc675202ad24146138/d5c54/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 1040w,\n/static/be66cede7624ebbc675202ad24146138/81a53/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 1560w,\n/static/be66cede7624ebbc675202ad24146138/74fd5/lautaro-andreani-xkBaqlcqeb4-unsplash-2.jpg 1920w","srcWebp":"/static/be66cede7624ebbc675202ad24146138/e4875/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp","srcSetWebp":"/static/be66cede7624ebbc675202ad24146138/dc8f3/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 260w,\n/static/be66cede7624ebbc675202ad24146138/2db4b/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 520w,\n/static/be66cede7624ebbc675202ad24146138/e4875/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 1040w,\n/static/be66cede7624ebbc675202ad24146138/f5845/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 1560w,\n/static/be66cede7624ebbc675202ad24146138/6833b/lautaro-andreani-xkBaqlcqeb4-unsplash-2.webp 1920w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"prev":{"id":"Ghost__Post__61ba1908c393bb64592d848e","title":"Create Laravel Blog with Strapi v4","slug":"create-laravel-blog-with-strapi-v4","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/12/lum3n--RBuQ2PK_L8-unsplash-2.jpg","excerpt":"In this tutorial, you'll learn how to create a blog in Laravel using Strapi. The blog will have posts, tags, and allow users to post comments.","custom_excerpt":"In this tutorial, you'll learn how to create a blog in Laravel using Strapi. The blog will have posts, tags, and allow users to post comments.","visibility":"public","created_at_pretty":"15 Dec 2021","published_at_pretty":"20 Dec 2021","updated_at_pretty":"27 Dec 2021","created_at":"2021-12-15T16:34:16.000+00:00","published_at":"2021-12-20T08:50:50.000+00:00","updated_at":"2021-12-27T11:09:20.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"strapi","url":"https://backend.shahednasser.com/tag/strapi/","name":"Strapi","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"strapi","url":"https://backend.shahednasser.com/tag/strapi/","name":"Strapi","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"laravel","url":"https://backend.shahednasser.com/tag/laravel/","name":"Laravel","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null},{"slug":"php","url":"https://backend.shahednasser.com/tag/php/","name":"PHP","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Laravel [https://laravel.com] is one of the most popular web frameworks that\nallow you to create secure and scalable websites. With Laravel, you can create\nalmost any website, ranging from simple portfolio websites to full-fledged\ne-commerce solutions.\n\nStrapi [https://strapi.io] is a headless CMS framework that has been gaining a\nlot of attention. With Strapi, you can easily add CMS functionalities to your\nwebsite, regardless of the technology being used. Strapi also removes the\nhassles of creating a database and models tailored to your CMS needs as it is\ncustomizable to the point that you can create your own models and entities, also\ncalled content types.\n\nIn this tutorial, you'll learn how to create a blog in Laravel using Strapi. The\nblog will have posts, tags, and allow users to post comments. You can find the\ncode for this tutorial in this GitHub repository\n[https://github.com/shahednasser/strapi-laravel-blog].\n\nPrerequisites \nBefore you start, you need the following tools on your machine:\n\n 1. Node.js [https://nodejs.org/en/]. Only versions 12 and 14 are supported by\n Strapi, and 14 is recommended.\n 2. PHP [https://www.php.net] >= v7.3\n 3. Composer [https://getcomposer.org/download/]\n\nPlease note that this tutorial will be using Strapi v4 and Laravel v8.9\n\nSetup Strapi\nStart by setting up Strapi. In your terminal, run the following command:\n\nnpx create-strapi-app@latest strapi --quickstart\n\nOnce the command is done, the server will start at localhost:1337\n[http://localhost:1337] and a new page will open in a browser. It will be a\nregistration form, where you need to create an admin account on Strapi.\n\nOnce you're done, you'll be redirected to the main dashboard.\n\nCreate Content-Types\nNext, you'll create the content types necessary for the blog. You'll create\ncontent types for the posts and tags that the posts will use. You'll also create\na comment content type which will be filled from our blog on Laravel.\n\nStart by clicking on Create your first Content type in the dashboard. This will\nopen a new page to create content types. Under the Content Types Builder\nsidebar, click on Create new collection type under Collection type. This will\nopen a pop-up where you can enter basic and advanced settings.\n\nYou'll first create the tags content type. Enter in the Display Name field in\nthe popup Tag. This will automatically generate the singular and plural forms of\nthe content type.\n\nOnce you're done, click Continue. You can now choose the fields in this content\ntype. tags will only have a name field other than their id. So, click on the \nText field type. Then, enter in the Name field name.\n\nIn the Advanced Settings tab, check the Required checkbox to ensure that all\ntags have a name. \n\nSince that's the only field you'll add for the Tag content type, click on Finish\n. Then, when the pop-up closes, click on the Save button at the top right. This\nwill restart the server. Every time you create a content type, the server is\nrestarted.\n\nNext, you'll create the Post content type. Again, click on Create new collection\ntype. In the pop up that opens, enter for Display Name Post, then click on \nContinue.\n\nFor posts, there will be fields for title, content, image, date posted, and tags\nthat the post falls under.\n\nFor the title field, choose the Text field and make it required as we did\nearlier. Once done, click on Add another field.\n\nFor the content field, choose the Rich text field, and make it required.\n\nFor the image field, choose the Media field, and choose for Type \"Single media\".\nIn the Advanced Settings tab, change the allowed file types under \"Select\nallowed types of media\" to only Images. Make the field required as well.\n\nFor the date_posted field, choose the Date field, and choose for Type\n\"datetime\". Mark this field required as well.\n\nFinally, for the tags field, choose the Relation field, then for the relation\ntype choose \"Post belongs to many Tags\".\n\nOnce you're done, click on Finish, then click on Save at the top right. This\nwill save the new content type and restart the server.\n\nFinally, you need to create the Comment content type. Just like you did with the\nprevious content types, create a new content type with the name Comment.\n\nThe Comment content type will have 3 fields. The first is an Email field with\nthe name field. Make sure to set it as required.\n\nThe second field is a Rich text field with the name content. This is where the\nuser's comment will go.\n\nThe third field is a Relation field between Comment and Post. The relation\nshould be \"Post has many Comments\".\n\nNote that when you create this field a new field will be added automatically in\nPost called comments.\n\nOnce you're done, click on Finish, then click on Save at the top right. This\nwill save the new content type and restart the server.\n\nOur content types are ready!\n\nAdd Content\nThe next step would be to add content. Click on Content Manager in the sidebar.\n Start by adding a few tags by clicking on Tag in the Content Manager sidebar,\nthen click on Add new entry at the top right. \n\nWhen you create content, make sure you click Publish after saving the content.\n\nNext, add posts the same way. You can use Lorem Ipsum Generator\n[https://loremipsum.io/generator/?n=5&t=p] if you want to create mock content.\n\nChange Permissions\nThe last step left is to make posts and tags public so that you can consume them\nin Laravel.\n\nFirst, you'll create an API token to use for your requests. In the sidebar,\nclick Settings, then API Token. Click on Add Entry at the top right.\n\nIn this form, enter the name of the token. This is just useful to remember what\nyour API tokens are for. You can also enter a description.\n\nIn the Token type field, choose Full Access.\n\nOnce you're done, click on Save at the top right. This will create a new API\ntoken and the API token will be shown to you only once when you create it. So,\ncopy the API token and store it somewhere as you'll use it later.\n\nNext, you'll modify the permissions for authenticated users to be able to query\ncontent types and add new entries.\n\nOn the sidebar, click Settings, then Roles in the Settings sidebar.\n\nYou'll see two roles: Authenticated and Public. Click on the pencil icon on the\nAuthenticated row.\n\nScroll down and you'll see that for each content type you can select what this\nrole can access. Check Select All for Post, Tag, and Comment, then click Save.\n\nSetup Laravel\nNow that Strapi is ready, you'll get started with Laravel.\n\nRun the following command to create a new Laravel project:\n\ncomposer create-project laravel/laravel blog\n\nOnce this command is done, change to the directory created:\n\ncd blog\n\nYou can then start the server with the following command:\n\nphp artisan serve\n\nThis will start the server at localhost:8000.\n\nAdd Environment Variables\nBefore you can make requests to Strapi, you need to add 2 environment variables.\nAdd the following environment variables to .env:\n\nSTRAPI_URL=http://localhost:1337\nSTRAPI_API_TOKEN=\n\nThe first is the URL to Strapi. You can change it if it's not the same local\nURL. The second is the API token you created earlier. Paste it here after the = \nsign.\n\nAdd Home Page\nOn the home page, you'll query all posts in Strapi and display them.\n\nRun the following command in your terminal to create a new controller:\n\nphp artisan make:controller BlogController\n\nThen, open app/Http/Controllers/BlogController.php and the following method in\nthe class:\n\npublic function home () {\n //retrieve the posts from Strapi\n $response = Http::withToken(env('STRAPI_API_TOKEN'))->get(env('STRAPI_URL') . '/api/posts?populate=image,tags');\n $posts = [];\n\n if ($response->failed()) {\n if (isset($data['error'])) {\n \tLog::error('Server error: ' . $data['error']['message']);\n } else {\n \tLog::error('Request Failed');\n }\n } else {\n //get posts from response\n $posts = $response->json('data');\n }\n\n return view('home', ['posts' => $posts]);\n}\n\nFirst, you query Strapi using Laravel's HTTP Client\n[https://laravel.com/docs/8.x/http-client]. You use withToken to pass it the API\ntoken from .env using the env helper function. Then, you send a get request to\nthe endpointlocalhost:1337/api/posts?populate=image,tags.\n\nNotice that localhost:1337 also is retrieved from .env. As for the endpoint\npath, Strapi has a conventional path for all its content types. When querying a\ncollection, the pattern for the endpoint is /api/{collection_name}.\n\nWhen you use Strapi's API, you can pass it a lot of useful parameters\n[https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters] \nthat allow you to filter, sort, paginate the data, and more. Here, you use the \npopulate parameter which allows you to retrieve a content type with its\nrelations. You use it to retrieve the post with its image and tags.\n\nAfter sending the request, you can check if the request failed using \n$response->failed(). If the request failed, you log the error. If not, you set \n$posts to the data parameter in the response body. Note that you can use the \njson method to retrieve the parameters from a JSON response, optionally passing\nit a parameter name as the first element.\n\nNext, you need to add the home view. Create the file \nresources/views/home.blade.php with the following content:\n\n\ngetLocale()) }}\">\n \n \n \n\n{{ substr($post['attributes']['content'], 0, 50) }}...
\n Read More\n\n {{ $post['attributes']['content'] }}\n
\n\nLaravel is one of the most popular web frameworks that allow you to create secure and scalable websites. With Laravel, you can create almost any website, ranging from simple portfolio websites to full-fledged e-commerce solutions.
Strapi is a headless CMS framework that has been gaining a lot of attention. With Strapi, you can easily add CMS functionalities to your website, regardless of the technology being used. Strapi also removes the hassles of creating a database and models tailored to your CMS needs as it is customizable to the point that you can create your own models and entities, also called content types.
In this tutorial, you'll learn how to create a blog in Laravel using Strapi. The blog will have posts, tags, and allow users to post comments. You can find the code for this tutorial in this GitHub repository.
Before you start, you need the following tools on your machine:
Please note that this tutorial will be using Strapi v4 and Laravel v8.9
Start by setting up Strapi. In your terminal, run the following command:
npx create-strapi-app@latest strapi --quickstartOnce the command is done, the server will start at localhost:1337 and a new page will open in a browser. It will be a registration form, where you need to create an admin account on Strapi.
Once you're done, you'll be redirected to the main dashboard.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.40.33-PM.png\")
Next, you'll create the content types necessary for the blog. You'll create content types for the posts and tags that the posts will use. You'll also create a comment content type which will be filled from our blog on Laravel.
Start by clicking on Create your first Content type in the dashboard. This will open a new page to create content types. Under the Content Types Builder sidebar, click on Create new collection type under Collection type. This will open a pop-up where you can enter basic and advanced settings.
You'll first create the tags content type. Enter in the Display Name field in the popup Tag. This will automatically generate the singular and plural forms of the content type.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.45.23-PM.png\")
Once you're done, click Continue. You can now choose the fields in this content type. tags will only have a name field other than their id. So, click on the Text field type. Then, enter in the Name field name.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.47.28-PM.png\")
In the Advanced Settings tab, check the Required checkbox to ensure that all tags have a name.
Since that's the only field you'll add for the Tag content type, click on Finish. Then, when the pop-up closes, click on the Save button at the top right. This will restart the server. Every time you create a content type, the server is restarted.
Next, you'll create the Post content type. Again, click on Create new collection type. In the pop up that opens, enter for Display Name Post, then click on Continue.
For posts, there will be fields for title, content, image, date posted, and tags that the post falls under.
For the title field, choose the Text field and make it required as we did earlier. Once done, click on Add another field.
For the content field, choose the Rich text field, and make it required.
For the image field, choose the Media field, and choose for Type \"Single media\". In the Advanced Settings tab, change the allowed file types under \"Select allowed types of media\" to only Images. Make the field required as well.
For the date_posted field, choose the Date field, and choose for Type \"datetime\". Mark this field required as well.
Finally, for the tags field, choose the Relation field, then for the relation type choose \"Post belongs to many Tags\".
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.59.01-PM.png\")
Once you're done, click on Finish, then click on Save at the top right. This will save the new content type and restart the server.
Finally, you need to create the Comment content type. Just like you did with the previous content types, create a new content type with the name Comment.
The Comment content type will have 3 fields. The first is an Email field with the name field. Make sure to set it as required.
The second field is a Rich text field with the name content. This is where the user's comment will go.
The third field is a Relation field between Comment and Post. The relation should be \"Post has many Comments\".
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-8.13.33-PM.png\")
Note that when you create this field a new field will be added automatically in Post called comments.
Once you're done, click on Finish, then click on Save at the top right. This will save the new content type and restart the server.
Our content types are ready!
The next step would be to add content. Click on Content Manager in the sidebar. Start by adding a few tags by clicking on Tag in the Content Manager sidebar, then click on Add new entry at the top right.
When you create content, make sure you click Publish after saving the content.
Next, add posts the same way. You can use Lorem Ipsum Generator if you want to create mock content.
The last step left is to make posts and tags public so that you can consume them in Laravel.
First, you'll create an API token to use for your requests. In the sidebar, click Settings, then API Token. Click on Add Entry at the top right.
In this form, enter the name of the token. This is just useful to remember what your API tokens are for. You can also enter a description.
In the Token type field, choose Full Access.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.27.11-PM.png\")
Once you're done, click on Save at the top right. This will create a new API token and the API token will be shown to you only once when you create it. So, copy the API token and store it somewhere as you'll use it later.
Next, you'll modify the permissions for authenticated users to be able to query content types and add new entries.
On the sidebar, click Settings, then Roles in the Settings sidebar.
You'll see two roles: Authenticated and Public. Click on the pencil icon on the Authenticated row.
Scroll down and you'll see that for each content type you can select what this role can access. Check Select All for Post, Tag, and Comment, then click Save.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.37.10-PM.png\")
Now that Strapi is ready, you'll get started with Laravel.
Run the following command to create a new Laravel project:
composer create-project laravel/laravel blogOnce this command is done, change to the directory created:
cd blogYou can then start the server with the following command:
php artisan serveThis will start the server at localhost:8000.
Before you can make requests to Strapi, you need to add 2 environment variables. Add the following environment variables to .env:
STRAPI_URL=http://localhost:1337\nSTRAPI_API_TOKEN=The first is the URL to Strapi. You can change it if it's not the same local URL. The second is the API token you created earlier. Paste it here after the = sign.
On the home page, you'll query all posts in Strapi and display them.
Run the following command in your terminal to create a new controller:
php artisan make:controller BlogControllerThen, open app/Http/Controllers/BlogController.php and the following method in the class:
public function home () {\n //retrieve the posts from Strapi\n $response = Http::withToken(env('STRAPI_API_TOKEN'))->get(env('STRAPI_URL') . '/api/posts?populate=image,tags');\n $posts = [];\n\n if ($response->failed()) {\n if (isset($data['error'])) {\n \tLog::error('Server error: ' . $data['error']['message']);\n } else {\n \tLog::error('Request Failed');\n }\n } else {\n //get posts from response\n $posts = $response->json('data');\n }\n\n return view('home', ['posts' => $posts]);\n}First, you query Strapi using Laravel's HTTP Client. You use withToken to pass it the API token from .env using the env helper function. Then, you send a get request to the endpoint localhost:1337/api/posts?populate=image,tags.
Notice that localhost:1337 also is retrieved from .env. As for the endpoint path, Strapi has a conventional path for all its content types. When querying a collection, the pattern for the endpoint is /api/{collection_name}.
When you use Strapi's API, you can pass it a lot of useful parameters that allow you to filter, sort, paginate the data, and more. Here, you use the populate parameter which allows you to retrieve a content type with its relations. You use it to retrieve the post with its image and tags.
After sending the request, you can check if the request failed using $response->failed(). If the request failed, you log the error. If not, you set $posts to the data parameter in the response body. Note that you can use the json method to retrieve the parameters from a JSON response, optionally passing it a parameter name as the first element.
Next, you need to add the home view. Create the file resources/views/home.blade.php with the following content:
<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <title>Blog</title>\n\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n </head>\n <body class=\"antialiased bg-light\">\n <div class=\"container mt-4 py-3 mx-auto bg-white rounded shadow-sm\">\n <div class=\"row\">\n @forelse ($posts as $post)\n <div class=\"col-2 col-md-4\">\n <div class=\"card\">\n <img src=\"{{ env('STRAPI_URL') . $post['attributes']['image']['data']['attributes']['formats']['medium']['url'] }}\" \n class=\"card-img-top\" alt=\"{{ $post['attributes']['image']['data']['attributes']['alternativeText'] }}\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">{{ $post['attributes']['title'] }}</h5>\n <p class=\"card-text\">{{ substr($post['attributes']['content'], 0, 50) }}...</p>\n <a href=\"/post/{{ $post['id'] }}\" class=\"btn btn-primary\">Read More</a>\n </div>\n <div class=\"card-footer\">\n @if(count($post['attributes']['tags']['data']))\n @foreach ($post['attributes']['tags']['data'] as $tag)\n <span class=\"badge bg-success\">{{ $tag['attributes']['name'] }}</span>\n @endforeach\n @endif\n </div>\n </div>\n </div>\n @empty\n <div class=\"col\">\n <div class=\"card\">\n <div class=\"card-body\">\n This is some text within a card body.\n </div>\n </div>\n </div>\n @endforelse\n </div>\n </div>\n </body>\n</html>\nThis just displays the posts as cards using Bootstrap. Notice that the content type entries that Strapi return has the following format:
{\n\t\"data\": {\n \t\"id\",\n \"attributes\": {\n \t\"title\",\n ...\n \t}\n }\n}So, you'll find the content type's fields inside the attributes key of data.
Finally, change the current route in routes/web.php to the following:
Route::get('/', [\\App\\Http\\Controllers\\BlogController::class, 'home']);Let's test it out. Make sure that both Laravel and Strapi's servers are running. Then, open localhost:8000. You'll see the posts you added as cards.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.48.15-PM.png\")
Next, you'll add the page to view a post. This page receives the post ID as a parameter, then queries the post's data from Strapi.
In app/Http/Controllers/BlogController.php add a new method:
public function viewPost ($id) {\n //retrieve the post from Strapi\n $response = Http::withToken(env('STRAPI_API_TOKEN'))->get(env('STRAPI_URL') . '/api/posts/' . $id . '?populate=image,tags,comments');\n\n if ($response->failed()) {\n if (isset($data['error'])) {\n Log::error('Server error: ' . $data['error']['message']);\n } else {\n Log::error('Request Failed');\n }\n\n return response()->redirectTo('/');\n }\n\n //get post from response\n $post = $response->json('data');\n\n return view('post', ['post' => $post]);\n }In this method, you use the $id parameter, which is the post ID, to send a request to Strapi's single entry endpoint. The endpoint's pattern is /api/{collection_name}/{id}. Similar to the previous endpoint, you can also pass it parameters like populate.
If the request fails, you redirect the user to the home page and log the error. If the request is done successfully, you retrieve the post from the response's body and render the view post.
Now, create resources/views/post.blade.php with the following content:
<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <title>{{ $post['attributes']['title'] }} - Blog</title>\n\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n </head>\n <body class=\"antialiased bg-light\">\n <div class=\"container mt-4 py-3 px-5 mx-auto bg-white rounded shadow-sm\">\n <h1>{{ $post['attributes']['title'] }}</h1>\n <small class=\"text-muted d-block\">{{ $post['attributes']['date_posted'] }}</small>\n <img src=\"{{ env('STRAPI_URL') . $post['attributes']['image']['data']['attributes']['formats']['medium']['url'] }}\" \n class=\"img-fluid mx-auto d-block my-3\" alt=\"{{ $post['attributes']['image']['data']['attributes']['alternativeText'] }}\">\n @if(count($post['attributes']['tags']['data']))\n <div class=\"mb-3\">\n @foreach ($post['attributes']['tags']['data'] as $tag)\n <span class=\"badge bg-success\">{{ $tag['attributes']['name'] }}</span>\n @endforeach\n </div>\n @endif\n <p class=\"content\">\n {{ $post['attributes']['content'] }}\n </p>\n\n <hr />\n <form action=\"/post/{{ $post['id'] }}\" method=\"POST\">\n @csrf\n <h2>Add Your Comment</h2>\n <div class=\"mb-3\">\n <label for=\"email\" class=\"form-label\">Email address</label>\n <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" required>\n </div>\n <div class=\"mb-3\">\n <label for=\"content\" class=\"form-label\">Your Comment</label>\n <textarea rows=\"5\" class=\"form-control\" id=\"content\" name=\"content\" required></textarea>\n </div>\n <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\n </form>\n </div>\n </body>\n</html>\nThis page just shows the post's details. Similar to how you extracted the post's data, the post's field is nested inside the attributes field.
This page also has a comments form at the end of it. You'll implement its functionality after this.
Finally, add the new route in routes/web.php:
Route::get('/post/{id}', [\\App\\Http\\Controllers\\BlogController::class, 'viewPost']);\nNow, open the home page again and click on Read More for one of the posts. A new page will open with the post's content.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.55.39-PM.png\")
If you scroll down, you'll see a form to add your comment.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-8.10.42-PM.png\")
The last thing you'll do in this tutorial is add the commenting functionality. The form is already added, so you just need to add the POST route to add the comment.
Add the following method in app/Http/Controllers/BlogController.php:
public function addComment (Request $request, $id) {\n $data = [\n \"data\" => [\n 'email' => $request->get('email'),\n 'content' => $request->get('content'),\n 'post' => $id\n ]\n ];\n\n $response = Http::withToken(env('STRAPI_API_TOKEN'))->post(env('STRAPI_URL') . '/api/comments', $data);\n\n if ($response->failed()) {\n if (isset($data['error'])) {\n Log::error('Server error: ' . $data['error']['message']);\n } else {\n Log::error('Request Failed');\n }\n\n return response()->redirectTo('/');\n }\n\n //successfully added\n return response()->redirectTo('/post/' . $id);\n }You first format the data as Strapi likes it. When adding a content type entry, you should nest the data inside a data parameter. Here, you add the email, content, and post fields. Notice that we are skipping validation here for tutorial simplicity.
Then, you send a POST request to the endpoint /api/comments. Strapi's endpoint pattern for adding a content type entry is /api/{collection_name}. You pass the data as a second parameter to the post method.
If the request fails, the user is redirected to the home page. If it's successful, the user is redirected back to the post's page.
Next, add before the comment form in resources/views/post.blade.php the following:
<hr/>\n@if (count($post['attributes']['comments']['data']))\n <div class=\"comments\">\n <h2>Comments</h2>\n @foreach ($post['attributes']['comments']['data'] as $comment)\n <div class=\"card mb-3\">\n <div class=\"card-body\">\n \t{{ $comment['attributes']['content'] }}\n </div>\n <div class=\"card-footer\">\n \tBy {{ $comment['attributes']['email'] }}\n </div>\n </div>\n @endforeach\n </div>\n@endifThis will show the comments if a post has any.
Finally, add the new route in routes/web.php:
Route::post('/post/{id}', [\\App\\Http\\Controllers\\BlogController::class, 'addComment']);Let's test it out. Go to a post's page, then go to the comment form. Add your comment and click Submit. You'll be redirected back to the post's page, but you can see the comment below the post.
![](\"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-8.10.34-PM.png\")
In this tutorial, you learned how to build a blog with Laravel and Strapi. Strapi is completely customizable, and that simplifies the process of adding content types, adding entries, and using its endpoints to query the content types or add new entries in them.
","url":"https://backend.shahednasser.com/create-laravel-blog-with-strapi-v4/","canonical_url":null,"uuid":"179d8174-00da-470e-a7f8-3f64b74e5a4b","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"61ba1908c393bb64592d848e","reading_time":12,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Laravel is one of the most popular web frameworks that allow you to create secure and scalable websites. With Laravel, you can create almost any website, ranging from simple portfolio websites to full-fledged e-commerce solutions.
Strapi is a headless CMS framework that has been gaining a lot of attention. With Strapi, you can easily add CMS functionalities to your website, regardless of the technology being used. Strapi also removes the hassles of creating a database and models tailored to your CMS needs as it is customizable to the point that you can create your own models and entities, also called content types.
In this tutorial, you'll learn how to create a blog in Laravel using Strapi. The blog will have posts, tags, and allow users to post comments. You can find the code for this tutorial in this GitHub repository.
Before you start, you need the following tools on your machine:
Please note that this tutorial will be using Strapi v4 and Laravel v8.9
Start by setting up Strapi. In your terminal, run the following command:
npx create-strapi-app@latest strapi --quickstartOnce the command is done, the server will start at localhost:1337 and a new page will open in a browser. It will be a registration form, where you need to create an admin account on Strapi.
Once you're done, you'll be redirected to the main dashboard.
Next, you'll create the content types necessary for the blog. You'll create content types for the posts and tags that the posts will use. You'll also create a comment content type which will be filled from our blog on Laravel.
Start by clicking on Create your first Content type in the dashboard. This will open a new page to create content types. Under the Content Types Builder sidebar, click on Create new collection type under Collection type. This will open a pop-up where you can enter basic and advanced settings.
You'll first create the tags content type. Enter in the Display Name field in the popup Tag. This will automatically generate the singular and plural forms of the content type.
Once you're done, click Continue. You can now choose the fields in this content type. tags will only have a name field other than their id. So, click on the Text field type. Then, enter in the Name field name.
In the Advanced Settings tab, check the Required checkbox to ensure that all tags have a name.
Since that's the only field you'll add for the Tag content type, click on Finish. Then, when the pop-up closes, click on the Save button at the top right. This will restart the server. Every time you create a content type, the server is restarted.
Next, you'll create the Post content type. Again, click on Create new collection type. In the pop up that opens, enter for Display Name Post, then click on Continue.
For posts, there will be fields for title, content, image, date posted, and tags that the post falls under.
For the title field, choose the Text field and make it required as we did earlier. Once done, click on Add another field.
For the content field, choose the Rich text field, and make it required.
For the image field, choose the Media field, and choose for Type \"Single media\". In the Advanced Settings tab, change the allowed file types under \"Select allowed types of media\" to only Images. Make the field required as well.
For the date_posted field, choose the Date field, and choose for Type \"datetime\". Mark this field required as well.
Finally, for the tags field, choose the Relation field, then for the relation type choose \"Post belongs to many Tags\".
Once you're done, click on Finish, then click on Save at the top right. This will save the new content type and restart the server.
Finally, you need to create the Comment content type. Just like you did with the previous content types, create a new content type with the name Comment.
The Comment content type will have 3 fields. The first is an Email field with the name field. Make sure to set it as required.
The second field is a Rich text field with the name content. This is where the user's comment will go.
The third field is a Relation field between Comment and Post. The relation should be \"Post has many Comments\".
Note that when you create this field a new field will be added automatically in Post called comments.
Once you're done, click on Finish, then click on Save at the top right. This will save the new content type and restart the server.
Our content types are ready!
The next step would be to add content. Click on Content Manager in the sidebar. Start by adding a few tags by clicking on Tag in the Content Manager sidebar, then click on Add new entry at the top right.
When you create content, make sure you click Publish after saving the content.
Next, add posts the same way. You can use Lorem Ipsum Generator if you want to create mock content.
The last step left is to make posts and tags public so that you can consume them in Laravel.
First, you'll create an API token to use for your requests. In the sidebar, click Settings, then API Token. Click on Add Entry at the top right.
In this form, enter the name of the token. This is just useful to remember what your API tokens are for. You can also enter a description.
In the Token type field, choose Full Access.
Once you're done, click on Save at the top right. This will create a new API token and the API token will be shown to you only once when you create it. So, copy the API token and store it somewhere as you'll use it later.
Next, you'll modify the permissions for authenticated users to be able to query content types and add new entries.
On the sidebar, click Settings, then Roles in the Settings sidebar.
You'll see two roles: Authenticated and Public. Click on the pencil icon on the Authenticated row.
Scroll down and you'll see that for each content type you can select what this role can access. Check Select All for Post, Tag, and Comment, then click Save.
Now that Strapi is ready, you'll get started with Laravel.
Run the following command to create a new Laravel project:
composer create-project laravel/laravel blogOnce this command is done, change to the directory created:
cd blogYou can then start the server with the following command:
php artisan serveThis will start the server at localhost:8000.
Before you can make requests to Strapi, you need to add 2 environment variables. Add the following environment variables to .env:
STRAPI_URL=http://localhost:1337\nSTRAPI_API_TOKEN=The first is the URL to Strapi. You can change it if it's not the same local URL. The second is the API token you created earlier. Paste it here after the = sign.
On the home page, you'll query all posts in Strapi and display them.
Run the following command in your terminal to create a new controller:
php artisan make:controller BlogControllerThen, open app/Http/Controllers/BlogController.php and the following method in the class:
public function home () {\n //retrieve the posts from Strapi\n $response = Http::withToken(env('STRAPI_API_TOKEN'))->get(env('STRAPI_URL') . '/api/posts?populate=image,tags');\n $posts = [];\n\n if ($response->failed()) {\n if (isset($data['error'])) {\n \tLog::error('Server error: ' . $data['error']['message']);\n } else {\n \tLog::error('Request Failed');\n }\n } else {\n //get posts from response\n $posts = $response->json('data');\n }\n\n return view('home', ['posts' => $posts]);\n}First, you query Strapi using Laravel's HTTP Client. You use withToken to pass it the API token from .env using the env helper function. Then, you send a get request to the endpoint localhost:1337/api/posts?populate=image,tags.
Notice that localhost:1337 also is retrieved from .env. As for the endpoint path, Strapi has a conventional path for all its content types. When querying a collection, the pattern for the endpoint is /api/{collection_name}.
When you use Strapi's API, you can pass it a lot of useful parameters that allow you to filter, sort, paginate the data, and more. Here, you use the populate parameter which allows you to retrieve a content type with its relations. You use it to retrieve the post with its image and tags.
After sending the request, you can check if the request failed using $response->failed(). If the request failed, you log the error. If not, you set $posts to the data parameter in the response body. Note that you can use the json method to retrieve the parameters from a JSON response, optionally passing it a parameter name as the first element.
Next, you need to add the home view. Create the file resources/views/home.blade.php with the following content:
<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <title>Blog</title>\n\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n </head>\n <body class=\"antialiased bg-light\">\n <div class=\"container mt-4 py-3 mx-auto bg-white rounded shadow-sm\">\n <div class=\"row\">\n @forelse ($posts as $post)\n <div class=\"col-2 col-md-4\">\n <div class=\"card\">\n <img src=\"{{ env('STRAPI_URL') . $post['attributes']['image']['data']['attributes']['formats']['medium']['url'] }}\" \n class=\"card-img-top\" alt=\"{{ $post['attributes']['image']['data']['attributes']['alternativeText'] }}\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">{{ $post['attributes']['title'] }}</h5>\n <p class=\"card-text\">{{ substr($post['attributes']['content'], 0, 50) }}...</p>\n <a href=\"/post/{{ $post['id'] }}\" class=\"btn btn-primary\">Read More</a>\n </div>\n <div class=\"card-footer\">\n @if(count($post['attributes']['tags']['data']))\n @foreach ($post['attributes']['tags']['data'] as $tag)\n <span class=\"badge bg-success\">{{ $tag['attributes']['name'] }}</span>\n @endforeach\n @endif\n </div>\n </div>\n </div>\n @empty\n <div class=\"col\">\n <div class=\"card\">\n <div class=\"card-body\">\n This is some text within a card body.\n </div>\n </div>\n </div>\n @endforelse\n </div>\n </div>\n </body>\n</html>\nThis just displays the posts as cards using Bootstrap. Notice that the content type entries that Strapi return has the following format:
{\n\t\"data\": {\n \t\"id\",\n \"attributes\": {\n \t\"title\",\n ...\n \t}\n }\n}So, you'll find the content type's fields inside the attributes key of data.
Finally, change the current route in routes/web.php to the following:
Route::get('/', [\\App\\Http\\Controllers\\BlogController::class, 'home']);Let's test it out. Make sure that both Laravel and Strapi's servers are running. Then, open localhost:8000. You'll see the posts you added as cards.
Next, you'll add the page to view a post. This page receives the post ID as a parameter, then queries the post's data from Strapi.
In app/Http/Controllers/BlogController.php add a new method:
public function viewPost ($id) {\n //retrieve the post from Strapi\n $response = Http::withToken(env('STRAPI_API_TOKEN'))->get(env('STRAPI_URL') . '/api/posts/' . $id . '?populate=image,tags,comments');\n\n if ($response->failed()) {\n if (isset($data['error'])) {\n Log::error('Server error: ' . $data['error']['message']);\n } else {\n Log::error('Request Failed');\n }\n\n return response()->redirectTo('/');\n }\n\n //get post from response\n $post = $response->json('data');\n\n return view('post', ['post' => $post]);\n }In this method, you use the $id parameter, which is the post ID, to send a request to Strapi's single entry endpoint. The endpoint's pattern is /api/{collection_name}/{id}. Similar to the previous endpoint, you can also pass it parameters like populate.
If the request fails, you redirect the user to the home page and log the error. If the request is done successfully, you retrieve the post from the response's body and render the view post.
Now, create resources/views/post.blade.php with the following content:
<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <title>{{ $post['attributes']['title'] }} - Blog</title>\n\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n </head>\n <body class=\"antialiased bg-light\">\n <div class=\"container mt-4 py-3 px-5 mx-auto bg-white rounded shadow-sm\">\n <h1>{{ $post['attributes']['title'] }}</h1>\n <small class=\"text-muted d-block\">{{ $post['attributes']['date_posted'] }}</small>\n <img src=\"{{ env('STRAPI_URL') . $post['attributes']['image']['data']['attributes']['formats']['medium']['url'] }}\" \n class=\"img-fluid mx-auto d-block my-3\" alt=\"{{ $post['attributes']['image']['data']['attributes']['alternativeText'] }}\">\n @if(count($post['attributes']['tags']['data']))\n <div class=\"mb-3\">\n @foreach ($post['attributes']['tags']['data'] as $tag)\n <span class=\"badge bg-success\">{{ $tag['attributes']['name'] }}</span>\n @endforeach\n </div>\n @endif\n <p class=\"content\">\n {{ $post['attributes']['content'] }}\n </p>\n\n <hr />\n <form action=\"/post/{{ $post['id'] }}\" method=\"POST\">\n @csrf\n <h2>Add Your Comment</h2>\n <div class=\"mb-3\">\n <label for=\"email\" class=\"form-label\">Email address</label>\n <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" required>\n </div>\n <div class=\"mb-3\">\n <label for=\"content\" class=\"form-label\">Your Comment</label>\n <textarea rows=\"5\" class=\"form-control\" id=\"content\" name=\"content\" required></textarea>\n </div>\n <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\n </form>\n </div>\n </body>\n</html>\nThis page just shows the post's details. Similar to how you extracted the post's data, the post's field is nested inside the attributes field.
This page also has a comments form at the end of it. You'll implement its functionality after this.
Finally, add the new route in routes/web.php:
Route::get('/post/{id}', [\\App\\Http\\Controllers\\BlogController::class, 'viewPost']);\nNow, open the home page again and click on Read More for one of the posts. A new page will open with the post's content.
If you scroll down, you'll see a form to add your comment.
The last thing you'll do in this tutorial is add the commenting functionality. The form is already added, so you just need to add the POST route to add the comment.
Add the following method in app/Http/Controllers/BlogController.php:
public function addComment (Request $request, $id) {\n $data = [\n \"data\" => [\n 'email' => $request->get('email'),\n 'content' => $request->get('content'),\n 'post' => $id\n ]\n ];\n\n $response = Http::withToken(env('STRAPI_API_TOKEN'))->post(env('STRAPI_URL') . '/api/comments', $data);\n\n if ($response->failed()) {\n if (isset($data['error'])) {\n Log::error('Server error: ' . $data['error']['message']);\n } else {\n Log::error('Request Failed');\n }\n\n return response()->redirectTo('/');\n }\n\n //successfully added\n return response()->redirectTo('/post/' . $id);\n }You first format the data as Strapi likes it. When adding a content type entry, you should nest the data inside a data parameter. Here, you add the email, content, and post fields. Notice that we are skipping validation here for tutorial simplicity.
Then, you send a POST request to the endpoint /api/comments. Strapi's endpoint pattern for adding a content type entry is /api/{collection_name}. You pass the data as a second parameter to the post method.
If the request fails, the user is redirected to the home page. If it's successful, the user is redirected back to the post's page.
Next, add before the comment form in resources/views/post.blade.php the following:
<hr/>\n@if (count($post['attributes']['comments']['data']))\n <div class=\"comments\">\n <h2>Comments</h2>\n @foreach ($post['attributes']['comments']['data'] as $comment)\n <div class=\"card mb-3\">\n <div class=\"card-body\">\n \t{{ $comment['attributes']['content'] }}\n </div>\n <div class=\"card-footer\">\n \tBy {{ $comment['attributes']['email'] }}\n </div>\n </div>\n @endforeach\n </div>\n@endifThis will show the comments if a post has any.
Finally, add the new route in routes/web.php:
Route::post('/post/{id}', [\\App\\Http\\Controllers\\BlogController::class, 'addComment']);Let's test it out. Go to a post's page, then go to the comment form. Add your comment and click Submit. You'll be redirected back to the post's page, but you can see the comment below the post.
In this tutorial, you learned how to build a blog with Laravel and Strapi. Strapi is completely customizable, and that simplifies the process of adding content types, adding entries, and using its endpoints to query the content types or add new entries in them.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://laravel.com"},"children":[{"type":"text","value":"Laravel"}]},{"type":"text","value":" is one of the most popular web frameworks that allow you to create secure and scalable websites. With Laravel, you can create almost any website, ranging from simple portfolio websites to full-fledged e-commerce solutions."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://strapi.io"},"children":[{"type":"text","value":"Strapi"}]},{"type":"text","value":" is a headless CMS framework that has been gaining a lot of attention. With Strapi, you can easily add CMS functionalities to your website, regardless of the technology being used. Strapi also removes the hassles of creating a database and models tailored to your CMS needs as it is customizable to the point that you can create your own models and entities, also called content types."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, you'll learn how to create a blog in Laravel using Strapi. The blog will have posts, tags, and allow users to post comments. You can find the code for this tutorial in "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/strapi-laravel-blog"},"children":[{"type":"text","value":"this GitHub repository"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"prerequisites"},"children":[{"type":"text","value":"Prerequisites "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before you start, you need the following tools on your machine:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://nodejs.org/en/"},"children":[{"type":"text","value":"Node.js"}]},{"type":"text","value":". Only versions 12 and 14 are supported by Strapi, and 14 is recommended."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.php.net"},"children":[{"type":"text","value":"PHP"}]},{"type":"text","value":" >= v7.3"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://getcomposer.org/download/"},"children":[{"type":"text","value":"Composer"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please note that this tutorial will be using Strapi v4 and Laravel v8.9"}]},{"type":"element","tagName":"h2","properties":{"id":"setup-strapi"},"children":[{"type":"text","value":"Setup Strapi"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Start by setting up Strapi. In your terminal, run the following command:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"npx create-strapi-app@latest strapi --quickstart"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once the command is done, the server will start at "},{"type":"element","tagName":"a","properties":{"href":"http://localhost:1337"},"children":[{"type":"text","value":"localhost:1337"}]},{"type":"text","value":" and a new page will open in a browser. It will be a registration form, where you need to create an admin account on Strapi."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you're done, you'll be redirected to the main dashboard."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.40.33-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":1136,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-15-at-7.40.33-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-15-at-7.40.33-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-15-at-7.40.33-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/12/Screen-Shot-2021-12-15-at-7.40.33-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"create-content-types"},"children":[{"type":"text","value":"Create Content-Types"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you'll create the content types necessary for the blog. You'll create content types for the posts and tags that the posts will use. You'll also create a comment content type which will be filled from our blog on Laravel."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Start by clicking on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Create your first Content type"}]},{"type":"text","value":" in the dashboard. This will open a new page to create content types. Under the Content Types Builder sidebar, click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Create new collection type "}]},{"type":"text","value":"under Collection type. This will open a pop-up where you can enter basic and advanced settings."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You'll first create the tags content type. Enter in the Display Name field in the popup "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Tag"}]},{"type":"text","value":". This will automatically generate the singular and plural forms of the content type."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.45.23-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1814,"height":1026,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-15-at-7.45.23-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-15-at-7.45.23-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-15-at-7.45.23-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.45.23-PM.png 1814w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you're done, click "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Continue"}]},{"type":"text","value":". You can now choose the fields in this content type. tags will only have a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" field other than their id. So, click on the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Text "}]},{"type":"text","value":"field type. Then, enter in the Name field "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"name"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.47.28-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1768,"height":1080,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-15-at-7.47.28-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-15-at-7.47.28-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-15-at-7.47.28-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.47.28-PM.png 1768w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the Advanced Settings tab, check the Required checkbox to ensure that all tags have a name. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since that's the only field you'll add for the Tag content type, click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Finish"}]},{"type":"text","value":". Then, when the pop-up closes, click on the"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":" "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Save"}]}]},{"type":"text","value":" button at the top right. This will restart the server. Every time you create a content type, the server is restarted."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you'll create the Post content type. Again, click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Create new collection type. "}]},{"type":"text","value":"In the pop up that opens, enter for Display Name "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Post"}]},{"type":"text","value":", then click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Continue."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For posts, there will be fields for title, content, image, date posted, and tags that the post falls under."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"title"}]},{"type":"text","value":" field, choose the Text field and make it required as we did earlier. Once done, click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Add another field."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"content"}]},{"type":"text","value":" field, choose the Rich text field, and make it required."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" field, choose the Media field, and choose for Type \"Single media\". In the Advanced Settings tab, change the allowed file types under \"Select allowed types of media\" to only Images. Make the field required as well."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"date_posted"}]},{"type":"text","value":" field, choose the Date field, and choose for Type \"datetime\". Mark this field required as well."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, for the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"tags"}]},{"type":"text","value":" field, choose the Relation field, then for the relation type choose \"Post belongs to many Tags\"."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.59.01-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1830,"height":902,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-15-at-7.59.01-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-15-at-7.59.01-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-15-at-7.59.01-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-15-at-7.59.01-PM.png 1830w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you're done, click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Finish"}]},{"type":"text","value":", then click on"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":" Save "}]},{"type":"text","value":"at the top right. This will save the new content type and restart the server."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, you need to create the Comment content type. Just like you did with the previous content types, create a new content type with the name "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Comment"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Comment"}]},{"type":"text","value":" content type will have 3 fields. The first is an Email field with the name "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"field"}]},{"type":"text","value":". Make sure to set it as required."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The second field is a Rich text field with the name "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"content"}]},{"type":"text","value":". This is where the user's comment will go."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The third field is a Relation field between Comment and Post. The relation should be \"Post has many Comments\"."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-8.13.33-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1862,"height":972,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-16-at-8.13.33-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-16-at-8.13.33-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-16-at-8.13.33-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-8.13.33-PM.png 1862w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that when you create this field a new field will be added automatically in Post called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"comments"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you're done, click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Finish"}]},{"type":"text","value":", then click on"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":" Save "}]},{"type":"text","value":"at the top right. This will save the new content type and restart the server."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Our content types are ready!"}]},{"type":"element","tagName":"h3","properties":{"id":"add-content"},"children":[{"type":"text","value":"Add Content"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The next step would be to add content. Click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Content Manager"}]},{"type":"text","value":" in the sidebar. Start by adding a few tags by clicking on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Tag"}]},{"type":"text","value":" in the Content Manager sidebar, then click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Add new entry"}]},{"type":"text","value":" at the top right. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you create content, make sure you click "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Publish"}]},{"type":"text","value":" after saving the content."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, add posts the same way. You can use "},{"type":"element","tagName":"a","properties":{"href":"https://loremipsum.io/generator/?n=5&t=p"},"children":[{"type":"text","value":"Lorem Ipsum Generator"}]},{"type":"text","value":" if you want to create mock content."}]},{"type":"element","tagName":"h3","properties":{"id":"change-permissions"},"children":[{"type":"text","value":"Change Permissions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The last step left is to make posts and tags public so that you can consume them in Laravel."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, you'll create an API token to use for your requests. In the sidebar, click "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Settings"}]},{"type":"text","value":", then "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"API Token"}]},{"type":"text","value":". Click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Add Entry"}]},{"type":"text","value":" at the top right."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this form, enter the name of the token. This is just useful to remember what your API tokens are for. You can also enter a description."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the Token type field, choose Full Access."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.27.11-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1830,"height":678,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-16-at-7.27.11-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-16-at-7.27.11-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-16-at-7.27.11-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.27.11-PM.png 1830w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you're done, click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Save"}]},{"type":"text","value":" at the top right. This will create a new API token and the API token will be shown to you only once when you create it. So, copy the API token and store it somewhere as you'll use it later."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you'll modify the permissions for authenticated users to be able to query content types and add new entries."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On the sidebar, click "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Settings"}]},{"type":"text","value":", then "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Roles"}]},{"type":"text","value":" in the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Settings"}]},{"type":"text","value":" sidebar."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You'll see two roles: Authenticated and Public. Click on the pencil icon on the Authenticated row."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Scroll down and you'll see that for each content type you can select what this role can access. Check Select All for Post, Tag, and Comment, then click "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Save"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.37.10-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":964,"height":1070,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-16-at-7.37.10-PM.png 600w","https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.37.10-PM.png 964w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"setup-laravel"},"children":[{"type":"text","value":"Setup Laravel"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now that Strapi is ready, you'll get started with Laravel."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Run the following command to create a new Laravel project:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"composer"}]},{"type":"text","value":" create-project laravel/laravel blog"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once this command is done, change to the directory created:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","builtin","class-name"]},"children":[{"type":"text","value":"cd"}]},{"type":"text","value":" blog"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can then start the server with the following command:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"php artisan serve"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will start the server at "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"localhost:8000"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"add-environment-variables"},"children":[{"type":"text","value":"Add Environment Variables"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before you can make requests to Strapi, you need to add 2 environment variables. Add the following environment variables to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".env"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"STRAPI_URL=http://localhost:1337\nSTRAPI_API_TOKEN="}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first is the URL to Strapi. You can change it if it's not the same local URL. The second is the API token you created earlier. Paste it here after the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" sign."}]},{"type":"element","tagName":"h3","properties":{"id":"add-home-page"},"children":[{"type":"text","value":"Add Home Page"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On the home page, you'll query all posts in Strapi and display them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Run the following command in your terminal to create a new controller:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"php artisan make:controller BlogController"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, open "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app/Http/Controllers/BlogController.php"}]},{"type":"text","value":" and the following method in the class:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"home"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//retrieve the posts from Strapi"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$response"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Http"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"withToken"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"env"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'STRAPI_API_TOKEN'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"get"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"env"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'STRAPI_URL'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/api/posts?populate=image,tags'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$posts"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$response"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"failed"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"isset"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n \t"},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Log"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Server error: '"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'message'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"else"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n \t"},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Log"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Request Failed'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"else"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//get posts from response"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$posts"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$response"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"json"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"view"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'home'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'posts'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$posts"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, you query Strapi using Laravel's "},{"type":"element","tagName":"a","properties":{"href":"https://laravel.com/docs/8.x/http-client"},"children":[{"type":"text","value":"HTTP Client"}]},{"type":"text","value":". You use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"withToken"}]},{"type":"text","value":" to pass it the API token from "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"env"}]},{"type":"text","value":" helper function. Then, you send a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"get"}]},{"type":"text","value":" request to the endpoint "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"localhost:1337/api/posts?populate=image,tags"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"localhost:1337"}]},{"type":"text","value":" also is retrieved from "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".env"}]},{"type":"text","value":". As for the endpoint path, Strapi has a conventional path for all its content types. When querying a collection, the pattern for the endpoint is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/api/{collection_name}"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you use Strapi's API, you can pass it a lot of "},{"type":"element","tagName":"a","properties":{"href":"https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"},"children":[{"type":"text","value":"useful parameters"}]},{"type":"text","value":" that allow you to filter, sort, paginate the data, and more. Here, you use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"populate"}]},{"type":"text","value":" parameter which allows you to retrieve a content type with its relations. You use it to retrieve the post with its image and tags."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After sending the request, you can check if the request failed using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$response->failed()"}]},{"type":"text","value":". If the request failed, you log the error. If not, you set "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$posts"}]},{"type":"text","value":" to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" parameter in the response body. Note that you can use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"json"}]},{"type":"text","value":" method to retrieve the parameters from a JSON response, optionally passing it a parameter name as the first element."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you need to add the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"home"}]},{"type":"text","value":" view. Create the file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"resources/views/home.blade.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"DOCTYPE"}]},{"type":"text","value":" html"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"html lang"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"{{ str_replace('_', '-', app()->getLocale()) }}\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"head"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"meta charset"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"utf-8\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"meta name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"viewport\""}]},{"type":"text","value":" content"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"width=device-width, initial-scale=1\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Blog"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"link href"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\""}]},{"type":"text","value":" rel"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"stylesheet\""}]},{"type":"text","value":" integrity"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\""}]},{"type":"text","value":" crossorigin"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"anonymous\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"head"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"antialiased bg-light\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"container mt-4 py-3 mx-auto bg-white rounded shadow-sm\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"row\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"forelse"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$posts"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"col-2 col-md-4\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"img src"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"{{ env('STRAPI_URL') . "},{"type":"element","tagName":"span","properties":{"className":["token","interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]}]},{"type":"text","value":"['image']['data']['attributes']['formats']['medium']['url'] }}\""}]},{"type":"text","value":" \n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card-img-top\""}]},{"type":"text","value":" alt"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"{{ "},{"type":"element","tagName":"span","properties":{"className":["token","interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]}]},{"type":"text","value":"['image']['data']['attributes']['alternativeText'] }}\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card-body\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"h5 "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card-title\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'title'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"h5"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"p "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card-text\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"substr"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'content'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"50"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"p"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"a href"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"/post/{{ "},{"type":"element","tagName":"span","properties":{"className":["token","interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'id'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]}]},{"type":"text","value":" }}\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"btn btn-primary\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Read More"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"a"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card-footer\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"count"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'tags'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"foreach"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'tags'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$tag"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"span "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"badge bg-success\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$tag"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"span"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"endforeach"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"endif"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"empty"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"col\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card-body\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n This is some text within a card body"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @endforelse\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"body"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"html"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This just displays the posts as "},{"type":"element","tagName":"a","properties":{"href":"https://getbootstrap.com/docs/5.1/components/card/"},"children":[{"type":"text","value":"cards"}]},{"type":"text","value":" using "},{"type":"element","tagName":"a","properties":{"href":"https://getbootstrap.com"},"children":[{"type":"text","value":"Bootstrap"}]},{"type":"text","value":". Notice that the content type entries that Strapi return has the following format:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"json"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-json"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-json"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"data\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n \t"},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"\"attributes\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n \t"},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"title\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n ...\n \t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, you'll find the content type's fields inside the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":" key of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"data"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, change the current route in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"routes/web.php"}]},{"type":"text","value":" to the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Route"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"get"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","static-context"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Http"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Controllers"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"BlogController"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'home'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's test it out. Make sure that both Laravel and Strapi's servers are running. Then, open "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"localhost:8000"}]},{"type":"text","value":". You'll see the posts you added as cards."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.48.15-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":1021,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-16-at-7.48.15-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-16-at-7.48.15-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-16-at-7.48.15-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/12/Screen-Shot-2021-12-16-at-7.48.15-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"add-view-post-page"},"children":[{"type":"text","value":"Add View Post Page"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you'll add the page to view a post. This page receives the post ID as a parameter, then queries the post's data from Strapi."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app/Http/Controllers/BlogController.php"}]},{"type":"text","value":" add a new method:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"viewPost"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$id"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//retrieve the post from Strapi"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$response"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Http"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"withToken"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"env"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'STRAPI_API_TOKEN'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"get"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"env"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'STRAPI_URL'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/api/posts/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$id"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'?populate=image,tags,comments'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$response"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"failed"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"isset"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Log"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Server error: '"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'message'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"else"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Log"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Request Failed'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"response"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"redirectTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//get post from response"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$response"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"json"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"view"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'post'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'post'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this method, you use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$id"}]},{"type":"text","value":" parameter, which is the post ID, to send a request to Strapi's single entry endpoint. The endpoint's pattern is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/api/{collection_name}/{id}"}]},{"type":"text","value":". Similar to the previous endpoint, you can also pass it parameters like "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"populate"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the request fails, you redirect the user to the home page and log the error. If the request is done successfully, you retrieve the post from the response's body and render the view "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"post"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, create "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"resources/views/post.blade.php"}]},{"type":"text","value":" with the following content:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"DOCTYPE"}]},{"type":"text","value":" html"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"html lang"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"{{ str_replace('_', '-', app()->getLocale()) }}\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"head"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"meta charset"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"utf-8\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"meta name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"viewport\""}]},{"type":"text","value":" content"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"width=device-width, initial-scale=1\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'title'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" Blog"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"title"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"link href"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\""}]},{"type":"text","value":" rel"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"stylesheet\""}]},{"type":"text","value":" integrity"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\""}]},{"type":"text","value":" crossorigin"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"anonymous\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"head"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"body "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"antialiased bg-light\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"container mt-4 py-3 px-5 mx-auto bg-white rounded shadow-sm\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"h1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'title'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"h1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"small "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"text-muted d-block\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'date_posted'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"small"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"img src"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"{{ env('STRAPI_URL') . "},{"type":"element","tagName":"span","properties":{"className":["token","interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]}]},{"type":"text","value":"['image']['data']['attributes']['formats']['medium']['url'] }}\""}]},{"type":"text","value":" \n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"img-fluid mx-auto d-block my-3\""}]},{"type":"text","value":" alt"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"{{ "},{"type":"element","tagName":"span","properties":{"className":["token","interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]}]},{"type":"text","value":"['image']['data']['attributes']['alternativeText'] }}\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"count"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'tags'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"mb-3\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"foreach"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'tags'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$tag"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"span "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"badge bg-success\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$tag"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"span"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"endforeach"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"endif"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"p "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"content\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'content'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"p"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"hr "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"form action"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"/post/{{ "},{"type":"element","tagName":"span","properties":{"className":["token","interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'id'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]}]},{"type":"text","value":" }}\""}]},{"type":"text","value":" method"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"POST\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @csrf\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"h2"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Add Your Comment"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"h2"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"mb-3\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"label "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"email\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"form-label\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Email address"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"label"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"input type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"email\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"form-control\""}]},{"type":"text","value":" id"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"email\""}]},{"type":"text","value":" name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"email\""}]},{"type":"text","value":" required"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"mb-3\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"label "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"content\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"form-label\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Your Comment"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"label"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"textarea rows"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"5\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"form-control\""}]},{"type":"text","value":" id"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"content\""}]},{"type":"text","value":" name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"content\""}]},{"type":"text","value":" required"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"textarea"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"button type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"submit\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"btn btn-primary\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Submit"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"button"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"form"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"body"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"html"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This page just shows the post's details. Similar to how you extracted the post's data, the post's field is nested inside the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":" field."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This page also has a comments form at the end of it. You'll implement its functionality after this."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, add the new route in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"routes/web.php"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Route"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"get"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/post/{id}'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","static-context"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Http"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Controllers"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"BlogController"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'viewPost'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, open the home page again and click on "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Read More"}]},{"type":"text","value":" for one of the posts. A new page will open with the post's content."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-7.55.39-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":1161,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-16-at-7.55.39-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-16-at-7.55.39-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-16-at-7.55.39-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/12/Screen-Shot-2021-12-16-at-7.55.39-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you scroll down, you'll see a form to add your comment."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-8.10.42-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":589,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-16-at-8.10.42-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-16-at-8.10.42-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-16-at-8.10.42-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/12/Screen-Shot-2021-12-16-at-8.10.42-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"add-comment-functionality"},"children":[{"type":"text","value":"Add Comment Functionality"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The last thing you'll do in this tutorial is add the commenting functionality. The form is already added, so you just need to add the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"POST"}]},{"type":"text","value":" route to add the comment."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Add the following method in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"app/Http/Controllers/BlogController.php"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"public"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-definition","function"]},"children":[{"type":"text","value":"addComment"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","type-declaration"]},"children":[{"type":"text","value":"Request"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$request"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$id"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"data\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'email'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$request"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"get"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'email'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'content'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$request"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"get"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'content'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'post'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$id"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$response"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Http"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"withToken"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"env"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'STRAPI_API_TOKEN'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"env"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'STRAPI_URL'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/api/comments'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$response"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"failed"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"isset"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Log"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Server error: '"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'message'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"else"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Log"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"error"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'Request Failed'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"response"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"redirectTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//successfully added"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"response"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"->"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"redirectTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/post/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$id"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You first format the data as Strapi likes it. When adding a content type entry, you should nest the data inside a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" parameter. Here, you add the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"email"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"content"}]},{"type":"text","value":", and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"post"}]},{"type":"text","value":" fields. Notice that we are skipping validation here for tutorial simplicity."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, you send a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"POST"}]},{"type":"text","value":" request to the endpoint "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/api/comments"}]},{"type":"text","value":". Strapi's endpoint pattern for adding a content type entry is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/api/{collection_name}"}]},{"type":"text","value":". You pass the data as a second parameter to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"post"}]},{"type":"text","value":" method."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the request fails, the user is redirected to the home page. If it's successful, the user is redirected back to the post's page."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, add before the comment form in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"resources/views/post.blade.php"}]},{"type":"text","value":" the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"hr"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n@"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"count"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'comments'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"comments\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"h2"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Comments"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"h2"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"foreach"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'comments'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$comment"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card mb-3\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card-body\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n \t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$comment"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'content'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string","double-quoted-string"]},"children":[{"type":"text","value":"\"card-footer\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n \tBy "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$comment"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'attributes'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'email'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"endforeach"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n@"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"endif"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will show the comments if a post has any."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, add the new route in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"routes/web.php"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"php"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-php"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","class-name","static-context"]},"children":[{"type":"text","value":"Route"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"post"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'/post/{id}'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name","class-name-fully-qualified","static-context"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Http"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"Controllers"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\\"}]},{"type":"text","value":"BlogController"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"::"}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string","single-quoted-string"]},"children":[{"type":"text","value":"'addComment'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's test it out. Go to a post's page, then go to the comment form. Add your comment and click Submit. You'll be redirected back to the post's page, but you can see the comment below the post."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/12/Screen-Shot-2021-12-16-at-8.10.34-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":443,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/12/Screen-Shot-2021-12-16-at-8.10.34-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/12/Screen-Shot-2021-12-16-at-8.10.34-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/12/Screen-Shot-2021-12-16-at-8.10.34-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/12/Screen-Shot-2021-12-16-at-8.10.34-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, you learned how to build a blog with Laravel and Strapi. Strapi is completely customizable, and that simplifies the process of adding content types, adding entries, and using its endpoints to query the content types or add new entries in them."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"prerequisites","heading":"Prerequisites "},{"id":"setup-strapi","heading":"Setup Strapi","items":[{"id":"create-content-types","heading":"Create Content-Types"},{"id":"add-content","heading":"Add Content"},{"id":"change-permissions","heading":"Change Permissions"}]},{"id":"setup-laravel","heading":"Setup Laravel","items":[{"id":"add-environment-variables","heading":"Add Environment Variables"},{"id":"add-home-page","heading":"Add Home Page"},{"id":"add-view-post-page","heading":"Add View Post Page"},{"id":"add-comment-functionality","heading":"Add Comment Functionality"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"lum3n--RBuQ2PK_L8-unsplash-2.jpg","publicURL":"/static/36dac6a27c1e3c4e16cc2c2e55053679/lum3n--RBuQ2PK_L8-unsplash-2.jpg","imageMeta":{"width":1920,"height":1280},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB1XNzVSQf/8QAFxABAQEBAAAAAAAAAAAAAAAAABEBEP/aAAgBAQABBQLmqqv/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAZEAACAwEAAAAAAAAAAAAAAAAAARARMUH/2gAIAQEAAT8hOoZWak//2gAMAwEAAgADAAAAELTv/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQBR/9oACAEDAQE/EFcgb//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQADAQADAAAAAAAAAAAAAAEAITERQXGh/9oACAEBAAE/EOi7B57CZiZ4YJVFMa59gkCjlZP/2Q==","aspectRatio":1.4957264957264957,"src":"/static/36dac6a27c1e3c4e16cc2c2e55053679/ea4ab/lum3n--RBuQ2PK_L8-unsplash-2.jpg","srcSet":"/static/36dac6a27c1e3c4e16cc2c2e55053679/477ba/lum3n--RBuQ2PK_L8-unsplash-2.jpg 175w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/06776/lum3n--RBuQ2PK_L8-unsplash-2.jpg 350w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/ea4ab/lum3n--RBuQ2PK_L8-unsplash-2.jpg 700w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/3055e/lum3n--RBuQ2PK_L8-unsplash-2.jpg 1050w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/eff08/lum3n--RBuQ2PK_L8-unsplash-2.jpg 1400w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/74fd5/lum3n--RBuQ2PK_L8-unsplash-2.jpg 1920w","srcWebp":"/static/36dac6a27c1e3c4e16cc2c2e55053679/89afa/lum3n--RBuQ2PK_L8-unsplash-2.webp","srcSetWebp":"/static/36dac6a27c1e3c4e16cc2c2e55053679/9fca7/lum3n--RBuQ2PK_L8-unsplash-2.webp 175w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/37a4e/lum3n--RBuQ2PK_L8-unsplash-2.webp 350w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/89afa/lum3n--RBuQ2PK_L8-unsplash-2.webp 700w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/78e7a/lum3n--RBuQ2PK_L8-unsplash-2.webp 1050w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/03d34/lum3n--RBuQ2PK_L8-unsplash-2.webp 1400w,\n/static/36dac6a27c1e3c4e16cc2c2e55053679/6833b/lum3n--RBuQ2PK_L8-unsplash-2.webp 1920w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__61b1cb7ad752820612f17bad","title":"React Native Navigation Tutorial","slug":"react-native-navigation-tutorial","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/12/nathan-da-silva-FO7kUmBYVi0-unsplash-2.jpg","excerpt":"In this tutorial, you'll learn how to use React Navigation in your React Native app.","custom_excerpt":"In this tutorial, you'll learn how to use React Navigation in your React Native app.","visibility":"public","created_at_pretty":"9 Dec 2021","published_at_pretty":"9 Dec 2021","updated_at_pretty":"20 Dec 2021","created_at":"2021-12-09T09:25:14.000+00:00","published_at":"2021-12-09T13:38:31.000+00:00","updated_at":"2021-12-20T08:50:59.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"react-native","url":"https://backend.shahednasser.com/tag/react-native/","name":"React Native","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"React Native [https://reactnative.dev] is one of the most popular cross-platform\napp development frameworks. Using JavaScript, you can develop native apps for\nboth Android and iOS.\n\nOne important part of creating apps is being able to navigate between screens.\nIn this tutorial, you'll learn how to use React Navigation\n[https://reactnavigation.org] in your app to add navigation. This will include\nbasic navigation from one screen to another, going back to the previous screen,\npassing parameters, listening to events, and more.\n\nThis tutorial will not explain the basics of creating a React Native app. If\nyou're interested in learning about that, you can check out my other tutorial \nReact Native Tutorial: Create Your First App\n[https://blog.shahednasser.com/react-native-tutorial-create-your-first-app].\n\nYou can find the code for this tutorial on this GitHub repository\n[https://github.com/shahednasser/react-navigation-tutorial].\n\nPrerequisites \nMake sure you have both Node.js [https://nodejs.org/en/] and NPM installed on\nyour machine. You can check if they're installed with the following command:\n\nnode -v\nnpm -v\n\nIf they're not installed, you can install Node.js [https://nodejs.org/en/] and\nNPM will be installed automatically with it.\n\n After that, make sure you install Expo [https://expo.dev]'s CLI if you don't\nhave it installed:\n\nnpm install -g expo-cli\n\nIf you're not familiar with what Expo is, Expo provides a set of tools built\naround React. Most importantly, it allows you to write and build your React\nNative app in minutes.\n\nYou should also install Expo Go [https://expo.dev/client] on your device to be\nable to test the app as we go through the tutorial.\n\nProject Setup\nStart by creating a new React Native project using Expo's CLI:\n\nexpo init react-navigation-tutorial —npm\n\nYou'll be then prompted to choose the type of app, choose \"blank\".\n\nAfter that the init command will install the dependencies you need for your\nReact Native project.\n\nOnce it's done, change to the directory of the project:\n\ncd react-navigation-tutorial\n\nNow, you'll install the dependencies required to use React Navigation. First,\ninstall the building blocks libraries using Expo's CLI with the following\ncommand:\n\nexpo install react-native-screens react-native-safe-area-context\n\nSecond, install the native stack navigator library:\n\nnpm install @react-navigation/native-stack\n\nNow, you have all the libraries required to start using React Navigation.\n\nFinally, install React Native Paper\n[https://callstack.github.io/react-native-paper/index.html] to have\nbeautifully-styled components in your app:\n\nnpm install react-native-paper\n\nSet Up React Navigation\nBefore you can start adding routes to your app, you need to create a Stack\nNavigator. This stack navigator will be used to create screens and navigate\nbetween them.\n\nIn App.js, change the content to the following:\n\nimport React from 'react';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport HomeScreen from './screens/HomeScreen';\n\nconst Stack = createNativeStackNavigator()\n\nexport default function App() {\n return (\n
Comments
\n @foreach ($post['attributes']['comments']['data'] as $comment)\n