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

Пользователь

от jerad.kuphal , в категории: JavaScript , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от marshall.cummings , 8 месяцев назад

@jerad.kuphal 

Чтобы использовать React, RequireJS и Babel вместе для трансформации JSX в браузере, вам необходимо следующее:

  1. Установите React:
1
npm install react react-dom


  1. Установите RequireJS:
1
npm install requirejs


  1. Установите Babel:
1
npm install @babel/core @babel/preset-env @babel/preset-react


  1. Создайте файл конфигурации RequireJS (например, requirejs.config.js):
 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. В HTML-файле подключите RequireJS:
1
<script src="node_modules/requirejs/require.js" data-main="requirejs.config.js"></script>


  1. Создайте файл с компонентом React, использующим JSX (например, component.js):
 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)
      );
    }
  };
});