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 babel
outputs in a singlecomponents.js
file, adjusting some repeated functions that appear on the top of all files, and suppressing theimport
andexport
statements. - I load the
component.js
file 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)