I have a React project, created with npx create-react-app where I implemented a handful React Components. I don't really see this project as an "React application", as it's just a personal library of Components I consume in another project, an HTML web application rendered using server-side technologies. My goal is to gradually replace parts of this application with React components. I don't really envision it becoming a single React application, my plan is just to replace the parts I think make sense to be developed with React.
I have no issue implementing these components - I'm using Storybook to organize the independent modules. But I'm struggling with the build process.
If I run npm run build I create a single application, based on the original React application code bootstrapped by create-react-app, which I essentially abandoned in favor of the Storybook setup. If I add the files generated by npm run build my project, I can't get React to render my components properly.
I managed to get a manual build process to work:
- In my HTML project I add https://unpkg.com/react@16/umd/react.production.min.js and https://unpkg.com/react-dom@16/umd/react-dom.production.min.js
- For each of my React components source files, I run
npx babel --presets react-app/prod src/MyComponent.js -o build/mycomponent.js - Then I combine all the
npx babeloutputs in a singlecomponents.jsfile, adjusting some repeated functions that appear on the top of all files, and suppressing theimportandexportstatements. - I load the
component.jsfile in my HTML project, and I can create my components using plain JS:
ReactDOM.render(
React.createElement(MyComponent, {param: value}, null),
document.getElementById('myComponent')
);
Is there a better process to build my components to a single JS file I could consume in my HTML application?
Top comments (0)