{"id":3023,"date":"2024-05-20T14:27:43","date_gmt":"2024-05-20T14:27:43","guid":{"rendered":"https:\/\/www.inwizards.com\/blog\/?p=3023"},"modified":"2024-05-20T14:29:46","modified_gmt":"2024-05-20T14:29:46","slug":"react-development-best-practices","status":"publish","type":"post","link":"https:\/\/www.inwizards.com\/blog\/react-development-best-practices\/","title":{"rendered":"11 Best Practices for ReactJS Development"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">ReactJS has become an immensely popular choice for building modern web user interfaces. It&#8217;s a powerful JavaScript library developed and maintained by Facebook that allows you to create reusable UI components. These components encapsulate both the visual representation of the UI and the logic behind it. This component-based architecture, along with React&#8217;s virtual DOM (Document Object Model), makes it efficient and scalable.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The virtual DOM is a lightweight in-memory representation of the actual DOM. When your application&#8217;s state changes, React efficiently calculates the minimal changes needed in the real DOM, resulting in faster rendering and smoother user experiences.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While React itself is a powerful tool, following best practices is essential to write clean, maintainable, and performant React applications. These best practices will not only improve your development experience but also make your codebase easier to understand and collaborate on for yourself and your team.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this blog post, we&#8217;ll delve into 11 key best practices that will help you become a more efficient React developer.<\/span><\/p>\n<h2><strong>Best Practices of ReactJS Development<\/strong><\/h2>\n<h3><strong>Building Strong Foundations<\/strong><\/h3>\n<h4><strong>1. Project Structure:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">A well-organised project structure is the bedrock of any successful React application. It promotes maintainability, scalability, and efficient collaboration within a team. Here&#8217;s a breakdown of some common conventions for structuring React projects:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Components Folder<\/b><span style=\"font-weight: 400;\">: This is the heart of your application, where you&#8217;ll house all your reusable React components. You can further organize components by feature or functionality for larger projects.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Assets Folder:<\/b><span style=\"font-weight: 400;\"> This folder stores static assets like images, fonts, and stylesheets used throughout your application.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Utils Folder:<\/b><span style=\"font-weight: 400;\"> This folder can hold reusable utility functions or helper components that don&#8217;t necessarily represent UI elements.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>index.js: <\/b><span style=\"font-weight: 400;\">This is the main entry point for your React application. Here, you&#8217;ll render the root component of your application.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>App.js: <\/b><span style=\"font-weight: 400;\">The App.js file typically serves as your root component, encompassing the overall application structure.<\/span><\/li>\n<\/ul>\n<h4><strong>2. Component-Based Architecture:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">React applications are built upon reusable components. Each component represents a small, focused piece of UI that encapsulates both its visual presentation and the logic behind it. This modular approach offers several benefits:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Improved Reusability:<\/b><span style=\"font-weight: 400;\"> Components can be reused across different parts of your application, reducing code duplication and promoting consistency.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Maintainability: <\/b><span style=\"font-weight: 400;\">Complex UIs are broken down into smaller, manageable units, making them easier to understand, modify, and test.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scalability: <\/b><span style=\"font-weight: 400;\">As your application grows, you can easily add new features by creating and integrating new components.<\/span><\/li>\n<\/ul>\n<h4><strong>Following the Single Responsibility Principle (SRP):<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">The Single Responsibility Principle (SRP) states that a component should have a single, well-defined responsibility. This means a component should handle a specific functionality or UI element rather than trying to do too much. By adhering to SRP, you create more focused and easier to reason about components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here&#8217;s an example: Imagine a component for displaying a product listing. Following SRP, this component would solely focus on rendering the product details (name, image, price) and any basic interactions like adding to cart. It wouldn&#8217;t handle complex functionalities like managing user authentication or cart logic. These responsibilities would be delegated to separate components or state management solutions.<\/span><\/p>\n<p><strong>Want to develop software using ReactJS? Consult Inwizards, Leading<a href=\"https:\/\/www.inwizards.com\/technologies\/reactjs-development-services.php\"> ReactJS Development Company<\/a><\/strong><\/p>\n<h3><strong>Writing Clean and Maintainable Code<\/strong><\/h3>\n<h4><strong>3. Functional Components vs. Class Components:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">React offers two main ways to create components: functional components and class components.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Functional Components:<\/b><span style=\"font-weight: 400;\"> These are simpler components defined using JavaScript functions. They receive props (arguments) as input and return the JSX (JavaScript XML) that represents the UI. Functional components are ideal for presenting UI and handling simple state changes. They are generally preferred for their conciseness and lack of lifecycle methods.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">JavaScript<\/span><\/p>\n<p><span style=\"font-weight: 400;\">function ProductCard(props) {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0return (<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div className=&#8221;product-card&#8221;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src={props.imageUrl} alt={props.productName} \/&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h3&gt;{props.productName}&lt;\/h3&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;{props.price}&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={() =&gt; addToCart(props.productId)}&gt;Add to Cart&lt;\/button&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0);<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Class Components<\/b><span style=\"font-weight: 400;\">: These are more complex components defined using JavaScript classes. They allow you to manage component state and utilize lifecycle methods for tasks like handling side effects or subscriptions. Class components are useful for components that require complex state management or interacting with external data sources.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">JavaScript<\/span><\/p>\n<p><span style=\"font-weight: 400;\">class ShoppingCart extends React.Component {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0constructor(props) {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0super(props);<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0this.state = { items: [] };<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0addItem = (productId) =&gt; {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\/\/ Logic to add item to cart state<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0render() {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return (<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div className=&#8221;shopping-cart&#8221;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Your Cart&lt;\/h2&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;ul&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{this.state.items.map((item) =&gt; (<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li key={item.id}&gt;{item.name}&lt;\/li&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0))}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/ul&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={() =&gt; this.checkout()}&gt;Checkout&lt;\/button&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0);<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<h4><strong>Choosing the Right Component Type:<\/strong><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For simple UI elements and presentational components, favour functional components due to their simplicity and efficiency.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For components that need to manage state, interact with external data, or have complex life cycles, use class components.<\/span><\/li>\n<\/ul>\n<h3><strong>4. Props and PropTypes:<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Props are a fundamental concept in React. They are used to pass data down the component hierarchy from parent components to child components. This allows you to create reusable components that can be customised for different use cases.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">PropTypes:<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">PropTypes are an optional way to define the expected data types and formats of props for your components. This helps catch errors during development and improves code maintainability by making it clear what data a component expects. While not strictly enforced at runtime, PropTypes provide valuable documentation and act as a safety net during development.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">JavaScript<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\/\/ Without PropTypes<\/span><\/p>\n<p><span style=\"font-weight: 400;\">function UserGreeting(props) {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0return &lt;p&gt;Welcome, {props.name}&lt;\/p&gt;;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">\/\/ With PropTypes<\/span><\/p>\n<p><span style=\"font-weight: 400;\">UserGreeting.propTypes = {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0name: PropTypes.string.isRequired,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">};<\/span><\/p>\n<h4><strong>5. State Management:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">React components can maintain their own internal state using the useState hook (for functional components) or the component state within class components. This state allows components to react to user interactions or external data changes and update their UI accordingly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, for complex applications with multiple components that need to share or synchronize data, a more robust state management solution might be necessary. Popular options include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Redux: <\/b><span style=\"font-weight: 400;\">A state management library that provides a centralized store for application state and facilitates managing complex data flows.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Context API: <\/b><span style=\"font-weight: 400;\">A built-in React feature that allows you to share data across the component tree without explicitly passing props through every level.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Using a state management solution helps maintain a single source of truth for your application&#8217;s data, improves maintainability, and simplifies data flow management in larger projects.<\/span><\/p>\n<h3><strong>Performance Optimization<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">A performant React application delivers a smooth and responsive user experience. Here are some best practices to optimise your React code for performance:<\/span><\/p>\n<h4><strong>6. Avoiding Unnecessary Re-renders:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">React uses a virtual DOM to efficiently update the real DOM. However, if a component re-renders unnecessarily, it can impact performance. Here&#8217;s how to minimize unnecessary re-renders:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">React.memo (for functional components): This higher-order component allows you to memorize a component, preventing re-renders if its props haven&#8217;t changed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">shouldComponentUpdate (for class components): This lifecycle method allows you to control when a component should re-render based on state or prop changes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Memoization: Create memoized functions or selectors to avoid redundant calculations within components.<\/span><\/li>\n<\/ul>\n<h4><strong>7. Code Splitting and Lazy Loading:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">Large React applications can have significant bundle sizes, impacting initial load times. Here&#8217;s how to optimize bundle size and loading:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Code Splitting:<\/b><span style=\"font-weight: 400;\"> Break down your application code into smaller bundles that can be loaded on demand. This reduces the initial load time and improves perceived performance.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lazy Loading<\/b><span style=\"font-weight: 400;\">: Load components only when they are needed by the user. This technique improves initial load time and optimises resource usage.<\/span><\/li>\n<\/ul>\n<h4><strong>Additional Performance Tips:<\/strong><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Minimize DOM Operations<\/b><span style=\"font-weight: 400;\">: Avoid excessive DOM manipulations within render methods. Consider using techniques like batching updates or virtualized lists for large datasets.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Profiling:<\/b><span style=\"font-weight: 400;\"> Utilise performance profiling tools to identify bottlenecks in your application and optimize accordingly.<\/span><\/li>\n<\/ul>\n<h3><strong>Enhancing User Experience and Maintainability<\/strong><\/h3>\n<h4><strong>8. Accessibility (a11y):<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">Accessibility is crucial for ensuring your React applications are usable by everyone, including users with disabilities. Here are some best practices:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Semantic HTML: <\/b><span style=\"font-weight: 400;\">Use semantic HTML elements like &lt;h1&gt; for headings, &lt;button&gt; for buttons, and &lt;li&gt; for list items. These elements provide context and meaning for assistive technologies.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>ARIA Attributes: <\/b><span style=\"font-weight: 400;\">Utilise ARIA (Accessible Rich Internet Applications) attributes to provide additional information about UI elements for screen readers and other assistive technologies.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Keyboard Navigation:<\/b><span style=\"font-weight: 400;\"> Ensure your application is navigable using the keyboard for users who rely on it.<\/span><\/li>\n<\/ul>\n<h4><strong>9. Testing:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">Writing tests is essential for building robust and maintainable React applications. Here are some key aspects of testing:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Unit Tests: <\/b><span style=\"font-weight: 400;\">Test individual components in isolation to ensure they render correctly and handle props and state changes as expected. Popular libraries for unit testing include Jest and React Testing Library.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Integration Tests:<\/b><span style=\"font-weight: 400;\"> Test how components interact with each other and with external data sources.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Writing tests helps catch bugs early in the development process, improves code confidence, and allows you to refactor code with less fear of introducing regressions.<\/span><\/p>\n<h3><strong>Staying Ahead of the Curve<\/strong><\/h3>\n<h4><strong>10. Continuous Learning:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">The world of React development is constantly evolving. Here are some ways to stay updated:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Official React Documentation:<\/b><span style=\"font-weight: 400;\"> The official React documentation is a comprehensive resource for learning about the latest features, best practices, and APIs.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Online Tutorials and Courses:<\/b><span style=\"font-weight: 400;\"> Numerous online tutorials and courses can help you deepen your React knowledge and learn new skills.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Community Forums and Blogs: <\/b><span style=\"font-weight: 400;\">Actively participate in online communities and blogs dedicated to React development. This allows you to connect with other developers, learn from their experiences, and stay informed about the latest trends.<\/span><\/li>\n<\/ul>\n<h4><strong>11. Code Reviews and Collaboration<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">Effective collaboration is key to building high-quality React applications. Here are some benefits of code reviews and collaboration:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Improved Code Quality:<\/b><span style=\"font-weight: 400;\"> Code reviews by peers can help identify potential issues, improve code readability, and ensure adherence to best practices.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Knowledge Sharing:<\/b><span style=\"font-weight: 400;\"> Collaboration fosters knowledge sharing within your team, allowing everyone to learn from each other and grow as developers.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Teamwork and Efficiency: <\/b><span style=\"font-weight: 400;\">Working together effectively helps identify solutions faster and improves overall development efficiency.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">By actively participating in code reviews, providing constructive feedback, and fostering a collaborative environment, you can significantly enhance the quality and maintainability of your React applications.<\/span><\/p>\n<p><a href=\"https:\/\/www.inwizards.com\/contactus.php\"><strong>Looking for ReactJS Development Services? Consult Inwizards\u00a0<\/strong><\/a><\/p>\n<h3><strong>Conclusion<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Following these 11 best practices will equip you to write clean, maintainable, performant, and user-friendly React applications. Remember, React is a powerful tool, and by adopting these best practices, you can unlock its full potential to create exceptional web experiences.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This blog post serves as a starting point for your React development journey. As you gain experience, don&#8217;t hesitate to explore advanced concepts and delve deeper into specific aspects of React development. The React ecosystem is vast and constantly evolving, so stay curious, keep learning, and happy coding!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ReactJS has become an immensely popular choice for building modern web user interfaces. It&#8217;s a powerful JavaScript library developed and maintained by Facebook that allows you to create reusable UI components. These components encapsulate both the visual representation of the<\/p>\n","protected":false},"author":1,"featured_media":3027,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"spay_email":""},"categories":[85],"tags":[],"jetpack_featured_media_url":"https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2024\/05\/11-Best-Practices-for-ReactJS-Development.png?fit=2240%2C1260&ssl=1","_links":{"self":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/3023"}],"collection":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/comments?post=3023"}],"version-history":[{"count":3,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/3023\/revisions"}],"predecessor-version":[{"id":3026,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/3023\/revisions\/3026"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/media\/3027"}],"wp:attachment":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/media?parent=3023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/categories?post=3023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/tags?post=3023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}