BigCommerce stencil is fairly limited in its ability to create a reusable reactive component. To solve this problem, they allow you to add react components to the theme. This is a fairly simple and straightforward process; however, there are a few "better practices" that are important to note.
Creating a Component
To create a react component, you will have to create a component directory for your JSX code. To do this, you direct your attention to your stencil project and create a component folder at the following path /assets/js/components. This will be the directory where all of your React components are housed. Here, you can create a simple hello world component.
import React from 'react';
export default function HelloWorld() {
return(
<h1>Hello World</h1>
)
}This basic react component will allow us to render an <h1> tag that displays the text "hello world".
If you want to learn more about how React works check out the docs here.
Rendering the Component
Now that you have made the component, you will need to render it in the stencil environment. To do this, you will use the ReactDOM library. Before you can do this, you need to add a tag to your HTML where you can inject the component. To do this, you add an empty <div> that you can target with. You will add the following div to your template.
<div id="react-component"/>
Now, in the Page Manager for the page where the template lives, you need to add the following line of code to the onReady() hook.
ReactDOM.render(<CouponDrawer/>, document.querySelector('#react-component'));Note that rather than using the querySelector, you can use a library like JQuery to target the <div>. Another thing to note is that you cannot currently inject the component on load, so you will always see a quick flicker when injecting your component.
Just like that, you have added a react component to the Stencil environment!
Author: Maxwell Sherwin
Got stuck on a step in this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!