Как использовать react, requirejs и babel для трансформации jsx в браузере?

1

npm install react react-dom

1

npm install requirejs

1

npm install @babel/core @babel/preset-env @babel/preset-react

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

requirejs.config({
  paths: {
    'react': 'node_modules/react/umd/react.production.min',
    'react-dom': 'node_modules/react-dom/umd/react-dom.production.min',
    'babel': 'node_modules/@babel/standalone/babel.min',
  },
  shim: {
    'react': {
      exports: 'React'
    },
    'react-dom': {
      deps: ['react'],
      exports: 'ReactDOM'
    }
  }
});

1

<script src="node_modules/requirejs/require.js" data-main="requirejs.config.js"></script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

define(['react', 'react-dom', 'babel'], function (React, ReactDOM, Babel) {
  class MyComponent extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}!</h1>;
    }
  }

  Babel.registerPreset('env', '@babel/preset-env');
  Babel.registerPreset('react', '@babel/preset-react');

  return {
    render: function (container, props) {
      ReactDOM.render(
        Babel.transform(
          '<MyComponent name="' + props.name + '" />',
          { presets: ['env', 'react'] }
        ).code,
        document.getElementById(container)
      );
    }
  };
});

1
2
3

require(['component'], function (Component) {
  Component.render('container', { name: 'World' });
});