Merge pull request #38 from uicrooks/dev

v2.4.8

Author: sergejcodes

README.md

@@ -51,9 +51,10 @@ Shopify Theme Lab is a customizable modular development environment for blazing-
   - [Stylus](#stylus)
 - [Swapping CSS framework](swapping-css-framework)
   - [Removing Tailwind CSS](#removing-tailwind-css)
-  - [Bulma](#Bulma)
+  - [Bulma](#bulma)
 - [Swapping JavaScript framework](swapping-javascript-framework)
   - [Removing Vue](#removing-vue)
+  - [React](#react)
 - [Project structure](#project-structure)
 - [Tasks](#tasks)
 - [Development environment concepts](#development-environment-concepts)
@@ -92,6 +93,7 @@ Shopify Theme Lab is a customizable modular development environment for blazing-
 - JavaScript
   - [Vue](https://vuejs.org)
   - [Vuex](https://vuex.vuejs.org)
+  - Swap Vue with any other framework e.g. [React](https://reactjs.org)
   - [Axios](https://github.com/axios/axios)
   - Extend with [npm packages](https://www.npmjs.com) 📦
 - CSS
@@ -438,6 +440,110 @@ module: {
   ]
 }
 ```
+
+### React
+
+1. Install packages:
+
+#### npm
+```sh
+$ npm install react react-dom
+$ npm install @babel/preset-react --save-dev
+```
+
+#### yarn
+```sh
+$ yarn add react react-dom
+$ yarn add @babel/preset-react --dev
+```
+
+2. Inside [webpack.common.js](.config/webpack/webpack.common.js):
+```js
+...
+resolve: {
+  extensions: [... '.jsx'] // add jsx to extensions array
+}
+...
+```
+
+```js
+...
+module: {
+  rules: [
+    // add babel-loader for jsx,
+    // remove the same loader from webpack.prod.js
+    {
+      test: /\.(js|jsx)$/,
+      loader: 'babel-loader',
+      exclude: /node_modules/,
+      options: {
+        presets: [ '@babel/preset-env', '@babel/preset-react' ]
+      }
+    },
+    ...
+  ]
+}
+...
+```
+
+3. Add ecmaFeatures to [.eslint.js](config/.eslint.js):
+```js
+...
+parserOptions: {
+  ecmaVersion: 2020,
+  sourceType: 'module',
+  ecmaFeatures: { // add ecmaFeatures
+    jsx: true,
+    modules: true
+  }
+}
+...
+```
+
+4. Add following code to [main.js](src/main.js):
+```js
+// eslint-disable-next-line
+import React from 'react'
+import { render } from 'react-dom'
+
+/**
+ * react components
+ * auto-map all react components to dom elements
+ */
+const reactComponents = require.context('./react/components/', true, /\.(jsx|js)$/)
+
+reactComponents.keys().forEach(key => {
+  const Component = reactComponents(key).default
+
+  // transform file name to PascalCase
+  const name = key.replace(/\.(\/|jsx|js)/g, '').replace(/(\/|-|_|\s)\w/g, (match) => match.slice(1).toUpperCase())
+
+  const domElement = document.querySelector(`[react-component='${name}']`)
+  render(<Component/>, domElement)
+})
+```
+
+5. Create `src/react/components/MyComponent.jsx` with following content:
+```js
+import React from 'react'
+
+class MyComponent extends React.Component {
+  render() {
+    return(
+      <div>
+        My Component
+      </div>
+    )
+  }
+}
+
+export default MyComponent
+```
+
+6. Add a dom element to [theme.liquid](shopify/layout/theme.liquid) or any other `.liquid` file:
+```html
+<div react-component="MyComponent"></div>
+```
 <!-- swapping javascript framework (end) -->
 
 <!-- project structure (start) -->

package-lock.json

@@ -2,7 +2,7 @@
   "name": "shopify-theme-lab",
   "description": "Customizable modular development environment for blazing-fast Shopify theme creation",
   "author": "Sergej Samsonenko <contact@sergej.codes>",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "license": "MIT",
   "config": {
     "reloadr": {
@@ -47,14 +47,14 @@
     "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^1.2.0",
     "eslint": "^7.18.0",
-    "eslint-plugin-vue": "^7.4.1",
+    "eslint-plugin-vue": "^7.5.0",
     "eslint-webpack-plugin": "^2.4.3",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^1.3.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
     "postcss-import": "^14.0.0",
-    "postcss-loader": "^4.1.0",
+    "postcss-loader": "^4.2.0",
     "postcss-preset-env": "^6.7.0",
     "progress-webpack-plugin": "^1.0.11",
     "shopify-reloadr": "^1.0.2",
@@ -65,7 +65,7 @@
     "url-loader": "^4.1.1",
     "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.16.0",
+    "webpack": "^5.17.0",
     "webpack-cli": "^4.4.0",
     "webpack-merge": "^5.7.3"
   }

package.json

@@ -82,7 +82,7 @@
           </div>
         </renderless-my-component>
 
-        <!-- vuex anywhere! -->
+        <!-- vuex module: src/vue/store/my-module.js -->
         <div>
           <div class="shopify-theme-lab__subline">
             Vuex anywhere!