Standalone React Component with Webpack

Question

I've got a component I'd like to share/reuse in some projects. I'm trying to build/bundle this component so it doesn't take the large setup that react normally does (webpack/babel/npm/ect).

I want to

Include React/ReactDOM from a cdn somewhere on an html page.
Include my component js file (we'll call it standalone.js).
Little bit of initialization code to render this into the dom. No Babel, No Webpack, No JSX.

That's all.

I feel like I've gotton pretty close, though am stuck on item 3. I cannot figure out how render my component to the DOM.

Here's the relevant part of demo html page:

index.html (relevant parts)

<div id="app" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>

<!--My Component -->
<script src="build/standalone.js" type="text/javascript"></script>
<script>
     // I believe I'm doing something wrong here
     var myComponent = new MyLibrary.default();
     var myStandaloneElement = React.createElement(myComponent, { message: "Testing Standalone Component" });
     ReactDOM.render(myStandaloneElement, document.getElementById('app'));

</script>

standalone.jsx

import React, {PropTypes} from 'react';

class Standalone extends React.Component {
    render() {
        return <p>{this.props.message}</p>;
    }
}

Standalone.PropTypes = {
    message: PropTypes.string.isRequired
}
export default Standalone;

webpack.config.js (relevant parts)

var config = {
    entry: APP_DIR + '/standalone.jsx',
    output: {
        library: 'MyLibrary',
        libraryTarget: 'umd',
        path: BUILD_DIR,
        filename: 'standalone.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel'
            }
        ]
    },
    externals: {
        react: 'React',
        "react-dom": 'ReactDOM'
    },
}

With trying to render the component with basic html I've tried a bunch of variations of similar things. Looking in my debugger, I can tell the object is something 'close' to a react-type object. I just don't know what to do with it.

Any pointers appreciated

Answer 1

You should not instantiate components with a new, rather they should be instantiated with React.createElement factory. So you just pass reference to the element class/function to createElement, see modified part of yout html:

 ...
 // get reference to my component constructor
 var myComponent = MyLibrary.default;
 var myStandaloneElement = React.createElement(myComponent, { message: "Testing Standalone Component" });
 ReactDOM.render(myStandaloneElement, document.getElementById('app'));
 ...

On a side note, to simplify debugging while in development (and only in development!) I suggest to use non minified version of react.js and react-dom.js, they are located under node_modules, for instance:

<script src="/node_modules/react/dist/react.js"></script>
<script src="/node_modules/react-dom/dist/react-dom.js"></script>

Answer 2

You may want to consider exposing your React component as a webcomponent, such as with https://www.npmjs.com/package/reactive-elements

<body>
  <my-react-component item="{window.someValue}"></my-react-component>
</body>

Standalone React Component with Webpack

Question

2 answers

solution1
3 ACCPTED 2016-12-10 08:11:52

solution2
1 2016-12-10 08:20:14

Standalone React Component with Webpack

Question

2 answers

solution1 3 ACCPTED 2016-12-10 08:11:52

solution2 1 2016-12-10 08:20:14

solution1
3 ACCPTED 2016-12-10 08:11:52

solution2
1 2016-12-10 08:20:14