![]() ![]() We are looping through all the selected classes and rendering our component into each one.Īs we render components into each corresponding DOM class in our loop, you'll notice that we are passing in a prop called "element", and that the prop is simply the node that exists at the current index of our loop.For semantic purposes, we switched to using querySelectorAll and searching for all classes named "like-button" instead of a single id.querySelectorAll ( ".like-button" ) const LikeButton = (. Instead, we are going to select all elements with a particular class name, and loop through the selected elements while rendering our component into each one.Ĭonst domAll = document. By default, React is designed to target a single DOM element, and to render a single component inside that element (ie: rendering a top level App component inside of a root tag.) The first part that will look different in this format is the way we are selecting DOM elements to target for rendering our React. This gives us the ability to make components that serve as mini-plugins for store owners who require specific functionality that may not be included in their theme. In this next step, we'll make it possible to create instances of our React components from within the Shopify admin panel. Creating Dynamic Sections with React (Optional) Luckily, there is a way to make things more reusable in a way that aligns with Shopify's dynamic section format. However, it's not very scalable if you should wish to re-use the component in multiple parts of your theme (ie: in various sections, snippets, or even templates). This is useful for adding some React to key places in an existing theme, or implementing React for the purposes of building a Shopify app. At this point, you can add a div anywhere in your theme with id "like-button", and your component will be rendered. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |