@jerad.kuphal
Чтобы использовать React, RequireJS и Babel вместе для трансформации JSX в браузере, вам необходимо следующее:
- Установите React:
1
|
npm install react react-dom
|
- Установите RequireJS:
- Установите Babel:
1
|
npm install @babel/core @babel/preset-env @babel/preset-react
|
- Создайте файл конфигурации 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'
}
}
});
|
- В HTML-файле подключите RequireJS:
1
|
<script src="node_modules/requirejs/require.js" data-main="requirejs.config.js"></script>
|
- Создайте файл с компонентом 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)
);
}
};
});
|