Thanks to @dan-gamble for helping with the slate configurations
This project is based off shopify/skeleton-theme, checkout Slate for more information.
Install the theme with npx:
npx create slate-theme my-new-theme liron-navon/slate-react-starter
-
rename .env-sample to .env and setup your development store config.
-
run: npm start
-
slate will open your localhost, just ignore that, and go to your development store.
-
In the development store you should have your theme loaded
-
Changes will hot reload in the dev store.
- Do notice that this is not meant to be an SPA, for that you can use storefront, react here is purely to replace JQuery for logic operations and animations.
Look at this snippet, this div element is going to be where our react component will be rendered,
You can pass prop-<propName>
to it and fill in the data, in this example we will have a prop named shopname
and it will receive the name of the shop
<div
prop-shopname='{{shop.name}}'
id="react-theme-component">
a react component is rendered here (this will show if js is disabled)
</div>
please use the helper function I made for it, it allows you to pass parameters from the liquid template to react:
import ThemeComponent from '../../react/layout/theme.jsx';
import {mountReact} from '../../react/mountReact';
// the component is rendered to replace the selected html element
mountReact(ThemeComponent, '#react-theme-component');
Do notice I tried to change as little as possible to allow this to be updated when shopify will change the starter template, The only files changed are:
- scripts/layout/theme.js : added a function to load the react component
- layout/theme.liquid : added an anchor for react to load on to
- created /react directory which contain all of the react logic.