Я не думаю, что create-react-app является правильным инструментом, так как вы не создаете полное приложение с React, а постепенно добавляете код React.Я бы предложил использовать Webpack самостоятельно.Это делает ваше приложение более чистым и его легче поддерживать с другим кодом.
Если вы хотите отделить код React от существующего кода, вы можете создать библиотеку на основе Руководства по созданию библиотек веб-пакета ,Вы можете визуализировать ваши компоненты с помощью ReactDOM.render() ( Docs ).Обратите внимание, что вы можете вызывать эту функцию (почти) неограниченное количество раз на одной странице, что позволяет вам частично заменить существующий код.
Замена страницы означает создание корневого элемента DOM и вызов функции render:
<!-- page.html -->
<html>
<head></head>
<body>
<!-- more html -->
<div id="page-root" />
<!-- more html -->
</body>
</html>
import React from 'react'
import ReactDOM from 'react-dom'
import Page from './routes/YourPageComponent'
ReactDOM.render(<Page />, document.getElementById('page-root'));
Предыдущий код означает, что вы отображаете свой код в новом коде, который передается вашими загрузчиками веб-пакетов (например, Babel-Loader, Typescript-Loader).Если вы хотите отобразить код в существующем коде, посмотрите документ о библиотеках Webpack , чтобы экспортировать функции визуализации в глобальный контекст.Следующие сценарии являются примером из моей головы.
// components/PageExampleComponent.jsx
import React from 'react';
export default function({pageTitle="example"}){
return <div>
<h1>{pageTitle}</h1>
</div>
}
// libary/index.js
import PageExampleComponent from './components/PageExampleComponent';
export const MyLibrary = {
PageExampleComponent
}
Предыдущий код требует следующую (частичную) конфигурацию Webpack для экспорта MyLibrary:
module.exports = {
//...
output: {
library: 'MyLibrary',
// based on a fast look into the docs, I think the following are optional:
libraryTarget: 'window',
libraryExport: 'default'
}
};
Чтобы отобразить компонентэтой библиотеки вам нужны React и ReactDOM в качестве скриптов на вашем веб-сайте - и, конечно, ваш собственный библиотечный скрипт.Затем вы можете позвонить ReactDOM.render() простым JavaScript:
ReactDOM.render(
React.createElement(window.MyLibrary.PageExampleComponent),
document.getElementById('page-root')
Другая идея - перенести все в Webpack.Это может быть проще, поскольку у вас нет барьеров для различных версий Javascript и диалектов (например, с поддержкой JSX и без нее).Вы даже можете разделить код jQuery и код React, используя две точки входа:
module.exports = {
//...
entry: {
oldCode: './src/jqueryIndex.js',
replacement: './src/reactIndex.js'
},
output: {
filename: "[name].js"
}
};