Is there a React example?

[Colin7780]

I’ve been looking for something like this for a while, extremely excited to start using it.

I personally prefer React over Vue, so I would love if someone had or knew of an example they could share using a React implementation.

Thanks in advance!

[sergejcodes]

First, follow the steps described in the removing Vue section.

Then the excerpt from an older README, that should get you started:

React

1. Install packages:

npm

$ npm install react react-dom
$ npm install @babel/preset-react --save-dev

yarn

$ yarn add react react-dom
$ yarn add @babel/preset-react --dev

2. Inside webpack.common.js:

...
resolve: {
  extensions: [... '.jsx'] // add jsx to extensions array
}
...

...
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:

...
parserOptions: {
  ecmaVersion: 2020,
  sourceType: 'module',
  ecmaFeatures: { // add ecmaFeatures
    jsx: true,
    modules: true
  }
}
...

4. Add following code to main.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:

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 or any other .liquid file:

<div react-component="MyComponent"></div>

[aaron5670]

@sergejcodes Thank you very much!

[james0r]

Followed these steps but i'm getting

ERROR in ./node_modules/react-dom/cjs/react-dom.development.js 17:14-38
Module not found: Error: Can't resolve 'object-assign' in '/Users/jamesauble/Projects/Slayed-playground/node_modules/react-dom/cjs'

ERROR in ./node_modules/react-dom/cjs/react-dom.development.js 19:14-42
Module not found: Error: Can't resolve 'scheduler/tracing' in '/Users/jamesauble/Projects/Slayed-playground/node_modules/react-dom/cjs'

ERROR in ./node_modules/react/cjs/react.development.js 16:14-38
Module not found: Error: Can't resolve 'object-assign' in '/Users/jamesauble/Projects/Slayed-playground/node_modules/react/cjs'

webpack 5.45.1 compiled with 3 errors in 1389 ms

[james0r]

Nevermind. My issue was that I had an extra resolve block in my wepback.common.js config.

[james0r]

// transform file name to PascalCase
const name = key.replace(/.(/|jsx|js)/g, '').replace(/(/|-|_|\s)\w/g, (match) => match.slice(1).toUpperCase())

This doesn't actually transform the filename to PascalCase as it doesn't transform the first character.

I ended up using

const name = key.replace(/\.(\/|jsx|js)/g, '').replace(/(\/|-|_|\s)\w/g, (match) => match.slice(1).toUpperCase()).replace(/^[A-Za-z]/, (match) => match.toUpperCase())

to enforce pascal case.

[eduardocampo]

Thanks for the react version, do you have any ideas to pass the props?

[sergejcodes]

Here's an example how another theme/starter does that.