\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jan 11, 2022 <\/time>\n\n \n \n Adding Vite to Your Existing Web App <\/a>\n <\/h3>\n\n \n
\n vite<\/a> webpack<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Adam Rackis <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jan 18, 2022 <\/time>\n\n \n \n Making a Site Work Offline Using the VitePWA Plugin <\/a>\n <\/h3>\n\n \n
\n service workers<\/a> vite<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Adam Rackis <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jan 12, 2022 <\/time>\n\n \n \n Parcel CSS: A New CSS Parser, Transformer, and Minifier <\/a>\n <\/h3>\n\n \n
\n build tool<\/a> parcel<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Apr 25, 2019 <\/time>\n\n \n \n Using Parcel as a Bundler for React Applications <\/a>\n <\/h3>\n\n \n
\n bundling<\/a> react<\/a> webpack<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Kingsley Silas <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\n
Using defaultProps<\/code> for default values<\/h3>\n\n\nTL;DR Use default function parameters instead.<\/p>\n\n\n\n Data can be passed to React components through something called props<\/code>. These are added to a component just like attributes in an HTML element and can be used in a component’s definition by taking the relevant values from the prop object passed in as an argument.<\/p>\n\n\n\n
\/\/ App.jsx\nexport default function App() {\n return <Card title=\"Hello\" description=\"world\" \/>\n}\n\n\/\/ Card.jsx\nfunction Card(props) {\n return (\n <div>\n <h1>{props.title}<\/h1>\n <p>{props.description}<\/p>\n <\/div>\n );\n}\n\nexport default Card;<\/code><\/pre>\n\n\n\nIf a default value is ever required for a prop<\/code>, the defaultProp<\/code> property can be used:<\/p>\n\n\n\n\/\/ Card.jsx\nfunction Card(props) {\n \/\/ ...\n}\n\nCard.defaultProps = {\n title: 'Default title',\n description: 'Desc',\n};\n\nexport default Card;<\/code><\/pre>\n\n\n\nWith modern JavaScript, it is possible to destructure the props<\/code> object and assign a default value to it all in the function argument.<\/p>\n\n\n\n\/\/ Card.jsx\nfunction Card({title = \"Default title\", description= \"Desc\"}) {\n return (\n <div>\n <h1>{title}<\/h1>\n <p>{description}<\/p>\n <\/div>\n )\n}\n\nexport default Card;<\/code><\/pre>\n\n\n\nThis is more favorable as the code that can be read by modern browsers without the need for extra transformation.<\/p>\n\n\n\n Unfortunately, defaultProps<\/code> do require some transformation to be read by the browser since JSX (JavaScript XML) isn’t supported out of the box. This could potentially affect the performance of an application that is using a lot of defaultProps<\/code>.<\/p>\n\n\n\n \t\t\n \n \n\n \n \n \n Article\n <\/strong>\n\n on\n\n Oct 23, 2019 <\/time>\n\n \n \n Demonstrating Reusable React Components in a Form <\/a>\n <\/h3>\n\n \n \n beginning react<\/a> react<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Kingsley Silas <\/a>\n <\/div>\n\n<\/article>\n\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jun 7, 2017 <\/time>\n\n \n \n I Learned How to be Productive in React in a Week and You Can, Too <\/a>\n <\/h3>\n\n \n \n beginning react<\/a> practical react<\/a> react<\/a> react keys<\/a> react props<\/a> react refs<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Sarah Drasner <\/a>\n <\/div>\n\n<\/article>\n\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Aug 31, 2018 <\/time>\n\n \n \n Props and PropTypes in React <\/a>\n <\/h3>\n\n \n \n beginning react<\/a> react<\/a> react props<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Kingsley Silas <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\nDon’t use propTypes<\/code><\/h3>\n\n\nTL;DR Use TypeScript.<\/p>\n\n\n\n In React, the propTypes<\/code> property can be used to check if a component is being passed the correct data type for its props. They allow you to specify the type of data that should be used for each prop such as a string, number, object, etc. They also allow you to specify if a prop is required or not.<\/p>\n\n\n\n This way, if a component is passed the wrong data type or if a required prop is not being provided, then React will throw an error.<\/p>\n\n\n\n\/\/ Card.jsx\nimport { PropTypes } from \"prop-types\";\n\nfunction Card(props) {\n \/\/ ...\n}\n\nCard.propTypes = {\n title: PropTypes.string.isRequired,\n description: PropTypes.string,\n};\n\nexport default Card;<\/code><\/pre>\n\n\n\nTypeScript<\/a> provides a level of type safety in data that\u2019s being passed to components. So, sure, propTypes<\/code> were a good idea back when I was starting. However, now that TypeScript has become the go-to solution for type safety, I would highly recommend using it over anything else.<\/p>\n\n\n\n \/\/ Card.tsx\ninterface CardProps {\n title: string,\n description?: string,\n}\n\nexport default function Card(props: CardProps) {\n \/\/ ...\n}<\/code><\/pre>\n\n\n\nTypeScript is a programming language that builds on top of JavaScript by adding static type-checking. TypeScript provides a more powerful type system, that can catch more potential bugs and improves the development experience.<\/p>\n\n\n\n \t\t\n \n \n\n \n \n \n Article\n <\/strong>\n\n on\n\n Aug 31, 2018 <\/time>\n\n \n \n Props and PropTypes in React <\/a>\n <\/h3>\n\n \n \n beginning react<\/a> react<\/a> react props<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Kingsley Silas <\/a>\n <\/div>\n\n<\/article>\n\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Mar 27, 2018 <\/time>\n\n \n \n Putting Things in Context With React <\/a>\n <\/h3>\n\n \n \n react<\/a> react props<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Neal Fennimore <\/a>\n <\/div>\n\n<\/article>\n\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Nov 16, 2018 <\/time>\n\n \n \n An Overview of Render Props in React <\/a>\n <\/h3>\n\n \n \n beginning react<\/a> react<\/a> react props<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Kingsley Silas <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\nUsing class components<\/h3>\n\n\nTL;DR: Write components as functions<\/p>\n\n\n\n Class components in React are created using JavaScript classes. They have a more object-oriented structure and as well as a few additional features, like the ability to use the this<\/code> keyword and lifecycle methods.<\/p>\n\n\n\n\/\/ Card.jsx\nclass Card extends React.Component {\n render() {\n return (\n <div>\n <h1>{this.props.title}<\/h1>\n <p>{this.props.description}<\/p>\n <\/div>\n )\n }\n}\n\nexport default Card;<\/code><\/pre>\n\n\n\nI prefer writing components with classes over functions, but JavaScript classes are more difficult for beginners to understand and this<\/code> can get very confusing. Instead, I\u2019d recommend writing components as functions:<\/p>\n\n\n\n\/\/ Card.jsx\nfunction Card(props) {\n return (\n <div>\n <h1>{props.title}<\/h1>\n <p>{props.description}<\/p>\n <\/div>\n )\n}\n\nexport default Card;<\/code><\/pre>\n\n\n\nFunction components are simply JavaScript functions that return JSX. They are much easier to read, and do not have additional features like the this<\/code> keyword and lifecycle methods<\/a> which make them more performant than class components.<\/p>\n\n\n\n Function components also have the advantage of using hooks. React Hooks<\/a> allow you to use state and other React features without writing a class component, making your code more readable, maintainable and reusable.<\/p>\n\n\n\n \t\t\n \n \n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jul 6, 2019 <\/time>\n\n \n \n Getting to Know the useReducer React Hook <\/a>\n <\/h3>\n\n \n \n beginning react<\/a> react hooks<\/a> reduce<\/a> reducer<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Kingsley Silas <\/a>\n <\/div>\n\n<\/article>\n\n\n \n \n \n Article\n <\/strong>\n\n on\n\n May 1, 2020 <\/time>\n\n \n \n Intro to React Hooks <\/a>\n <\/h3>\n\n \n \n beginning react<\/a> react<\/a> react hooks<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Kingsley Silas <\/a>\n <\/div>\n\n<\/article>\n\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jul 15, 2022 <\/time>\n\n \n \n React Hooks: The Deep Cuts <\/a>\n <\/h3>\n\n \n \n react hooks<\/a> <\/div>\n \n \n \n <\/a>\n \n \n Blessing Ene Anyebe <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\nImporting React unnecessarily<\/h3>\n\n\nTL;DR: There\u2019s no need to do it, unless you need hooks.<\/p>\n\n\n\n Since React 17 was released in 2020, it\u2019s now unnecessary to import React at the top of your file whenever you create a component.<\/p>\n\n\n\nimport React from 'react'; \/\/ Not needed!\nexport default function Card() {}<\/code><\/pre>\n\n\n\nBut we had to do that before React 17 because the JSX transformer (the thing that converts JSX into regular JavaScript) used a method called React.createElement<\/code><\/a> that would only work when importing React. Since then, a new transformer has been release which can transform JSX without the createElement<\/code> method.<\/p>\n\n\n\n You will still need to import React to use hooks, fragments<\/a>, and any other functions or components you might need from the library:<\/p>\n\n\n\n import { useState } from 'react';\n\nexport default function Card() {\n const [count, setCount] = useState(0);\n \/\/ ...\n}<\/code><\/pre>\n\n\nThose were my early mistakes!<\/h3>\n\n\nMaybe \u201cmistake\u201d is too harsh a word since some of the better practices came about later. Still, I see plenty of instances where the \u201cold\u201d way of doing something is still being actively used in projects and other tutorials.<\/p>\n\n\n\n To be honest, I probably made way more than five mistakes when getting started. Anytime you reach for a new tool it is going to be more like a learning journey to use it effectively, rather than flipping a switch. But these are the things I still carry with me years later!<\/p>\n\n\n\n If you\u2019ve been using React for a while, what are some of the things you wish you knew before you started? It would be great to get a collection going to help others avoid the same struggles.<\/p>\n","protected":false},"excerpt":{"rendered":" You know what it’s like to pick up a new language or framework. Sometimes there\u2019s great documentation to help you […]<\/p>\n","protected":false},"author":288730,"featured_media":377100,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[870,557],"class_list":["post-377098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-learning","tag-react"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/109999981554166972","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-facepalm.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":269385,"url":"https:\/\/css-tricks.com\/how-to-create-a-component-library-from-svg-illustrations\/","url_meta":{"origin":377098,"position":0},"title":"How to Create a Component Library From SVG Illustrations","author":"Graeme Fulton","date":"April 12, 2018","format":false,"excerpt":"I\u2019ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components. Here\u2019s a GIF that shows what I mean: What\u2019s unDraw? While unDraw is still fairly new, its open source nature means that it\u2019s being used by a range of products\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":287709,"url":"https:\/\/css-tricks.com\/front-end-documentation-style-guides-and-the-rise-of-mdx\/","url_meta":{"origin":377098,"position":1},"title":"Front-End Documentation, Style Guides and the Rise of MDX","author":"Ollie Williams","date":"May 23, 2019","format":false,"excerpt":"You can have the best open source project in the world but, if it doesn\u2019t have good documentation, chances are it\u2019ll never take off. In the office, good documentation could save you having to repeatedly answer the same questions. Documentation ensures that people can figure out how things work if\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/mdx.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/mdx.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/mdx.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":321306,"url":"https:\/\/css-tricks.com\/using-markdown-and-localization-in-the-wordpress-block-editor\/","url_meta":{"origin":377098,"position":2},"title":"Using Markdown and Localization in the WordPress Block Editor","author":"Leonardo Losoviz","date":"September 23, 2020","format":false,"excerpt":"If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it? Since the block editor is based on React, we may be tempted to use React components and HTML code for the documentation. That is the approach I followed\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/markdown-locale-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/markdown-locale-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/markdown-locale-wordpress.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/markdown-locale-wordpress.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/markdown-locale-wordpress.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":281513,"url":"https:\/\/css-tricks.com\/react-16-6-0-goodies\/","url_meta":{"origin":377098,"position":3},"title":"React 16.6.0 Goodies","author":"Kingsley Silas","date":"January 23, 2019","format":false,"excerpt":"React 16.6.0 was released October 2018 and with it came goodies that spice up the way we can develop with React. We\u2019re going to cover what I consider the best of those new goodies with examples of how we can put them to use in our work. React.memo() avoids unnecessary\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":286449,"url":"https:\/\/css-tricks.com\/using-parcel-as-a-bundler-for-react-applications\/","url_meta":{"origin":377098,"position":4},"title":"Using Parcel as a Bundler for React Applications","author":"Kingsley Silas","date":"April 25, 2019","format":false,"excerpt":"You may already be familiar with webpack for asset management on projects. However, there\u2019s another cool tool out there called Parcel, which is comparable to webpack in that it helps with hassle-free asset bundling. Where Parcel really shines is that it requires zero configuration to get up and running, where\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/parcel-react.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/parcel-react.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/parcel-react.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/parcel-react.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/parcel-react.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":305290,"url":"https:\/\/css-tricks.com\/an-introduction-to-mdxjs\/","url_meta":{"origin":377098,"position":5},"title":"An Introduction to MDXJS","author":"Agney Menon","date":"March 25, 2020","format":false,"excerpt":"Markdown has traditionally been a favorite format for programmers to write documentation. It\u2019s simple enough for almost everyone to learn and adapt to while making it easy to format and style content. It was so popular that commands from Markdown have been used in chat applications like Slack and Whatsapp\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288730"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=377098"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377098\/revisions"}],"predecessor-version":[{"id":377106,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377098\/revisions\/377106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377100"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=377098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=377098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=377098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}