[Shopify]ストアでReactを使用する方法

If you've tried React tutorials, but don't know how to use React on your Shopify store, or you just don't have a concrete idea of how to use React on your Shopify store, this is the place to start!

Assumptions

Can use theme kit
, understand JavaScript
, know some React
, and have npm installed


.

What to do

Prepare environment to use React in Shopify store
, try to output cart button using React

Now that you can use React on the Shopify store, it might be fun to try making some things with React! Let's get started.

Setting up the environment within Shopify

Create a test theme

It is better to use a test theme rather than a live theme, so duplicate the theme and add the test theme information on config.yml.

Make sure that theme watch is enabled.

In this case, we have configured it under the name react, so we can navigate to the root directory of the theme from the terminal and run

theme watch -e react

to theme watch.

Now, any local file changes will be reflected in the test theme.

Setting up the npm environment

Next, open a new terminal tab and navigate to the root directory of the theme in question.

npm init -y

Enter This will create a file called package.json. (Note that if npm is not installed, it must be installed first.)

Install what you need.

Next, install the dependencies required for using react.

npm install --save react react react-dom

Then, the essential things related to react are also installed.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader core-js webpack webpack-cli webpack-merge

You now have the general framework of your environment set up!

*Since this is a setup within the local environment, nothing is reflected in the theme yet.

Verify that React is working properly

Now let's verify that React works properly.

Specifically, try outputting the cart icon from the React side of the site, and if it is output properly, you can determine that React is working properly.

Create necessary icons and snippets

The first step is to set up what will be needed on the theme side.

Specifically

Snippets
and snippets output for
react output

The following settings need to be made.

Creation of snippets for react output

/snippets/cart-icon-snippets.liquid

and include in it an empty div element for React output as shown below.

{%- comment
-%}React Test
Snippets{%- endcomment

-%}<div id="react-cart-icon"></div

The code output from React is displayed in this react-cart-icon!

(2) snippets output

Just creating these snippets will not, of course, display them on the site.

Somewhere along the way, you will need to add a

{% render 'cart-icon-snippets' %}

and the corresponding snippets must be called.

In this case, we want to output the cart icon, so we render it in the header.

In the case of the Debut theme, we will use

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.items_count }}</span>
</div
</a>

It will be displayed in a nice way when added under the

By the way, below the existing cart icon above

<a href="#">hello</a>

I put in a temporary one like that and it displayed without any problem.

So, I added the following to this section

{% render 'cart-icon-snippets' %}

in the following manner.

Sorry for the image, but it looks like this.

This completes the theme configuration.

Now, if you can output from react to the cart-icon-snippets.liquid file, you should be able to output the cart icon in the header.

Now let's continue with the React side configuration!

Create a scripts folder

Create a scripts folder in the theme directory.

The scripts folder should exist alongside assets, snippets, sections, and templates.

Create a Components folder for React and a cartIcon.js file (scripts/Components/cartIcon.js) for the cart icon output.

In scripts/Components/cartIcon.js, enter the following

Next, also create scripts/cart-icon.js. The contents should look something like the following! (I'll skip explaining each React code, since the goal is to use React with the Shopify store.)

The code as React should now be fine.

Around Babel and Webpack settings

Next, we will proceed with the configuration of Babel and Webpack.

The files to be created are as follows.

webpack.common.js
, webpack.prod.js
, webpack.dev.js
, .babelrc
, package.json (already created, so editing is required)

Each should be created in the same column as the assets folder. It looks like this.

The contents look like this. (babelrc is also in this list, but its filename is prefixed with . dot at the beginning of the file name, so it is hidden.)

(1) webpack.common.js

const path = require("path")

module.exports = {
entry: {
'cart-icon': ". /scripts/cart-icon.js"
},
module: {
rules: [
{
test: /\




.




(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "assets")

}}

What we are doing here is describing cart-icon.js as entry, and then outputting cart-icon.bundle.js to the assets folder as output! The process is as follows.

(2) webpack.dev.js

(3) webpack.prod.js

Package.json

In this section, the following is added to the script portion of the already existing package.json file.

5).babelrc

Finally, create a file named .babelrc and include the following information.

Now you can use

npm run dev

in the scripta folder, a file named cart-icon.bundle.js will be created in the assets folder!

Loading the bundled file

Finally, the bundled js file can be loaded on the Shopify store.

In the layout/theme.liquid file, add the following line to the part of the layout/theme.liquid file where each js file is loaded

The following is a description of the process.

Then cart-icon.bundle.js should load!

If you actually load the page...

As you can see (though it's a little hard to tell with the colors) the cart icon has been added!

(The one on the right with the wince. lol)

How to use React in your Shopify store Conclusion

That's all about how to apply and use React in your Shopify store!

The initial setup is a bit complicated, but now you can play with React in many ways, and since React is an indispensable technology for the modern front end, we hope to dig a lot deeper and do more with it.

Finally, I'll also include the article I referred to in writing this article.

Reference https://www.cadence-labs.com/2019/12/how-to-add-react-to-a-shopify-theme/

*There may be some code that is a bit unnecessary, but please bear with me lol.

Thank you for reading to the end. Have a great day!