Building React Components

Douglas Jose — Wed, 27 Nov 2019 06:46:24 +0000

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 single components.js file, adjusting some repeated functions that appear on the top of all files, and suppressing the import and export 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?

DEV Community: Douglas Jose

Building React Components