Render Transpiled ES6 in CSHTML

Question

I have

Tutorial.jsx

class ShoppingList extends React.Component {
    render() {
        return (<div>Milk</div>);
    }
}

export default ShoppingList;

webpack.config.js

module.exports = {
    ...
    output: './React/bundle.js',
    ...,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {                        
                    presets: ['es2015', 'react'],
                }
            }
        ]
    }
}

In my CMD prompt, when I run webpack -w everything is green and I see my bundle.js file appearing where it should, in the React folder. Opening it, I see

...
var ShoppingList = function (_React$Component) {
    ...
}
...

so it looks like that's all good.

Now I want to render ShoppingList in my _Layout.cshtml file.

Question: How do I do this? I've tried all methods below and get React errors all the time about invalid parameter type, or passing in the wrong element, or whatever. My CSHTML is below.

<div id="content1">render here</div>
....
<script src="~/React/bundle.js"></script>
<script>
    ReactDOM.render("ShoppingList", document.getElementById("content1"));
    ReactDOM.render(ShoppingList, document.getElementById("content1"));
    ReactDOM.render(<ShoppingList />, document.getElementById("content1"));
</script>

Can someone please let me know if

1. It's possible to NOT have a ReactDOM.render() inside the JSX file and,
2. It's possible to do what I want to do which is render my ShoppingList in CSHTML

The best results I've got so far is to see ShoppingList in my DOM explorer but no HTML was actually rendered. It came out <shoppinglist ...></shoppinglist> which appears wrong to me.

Thanks.

Answer 1

You should have this inside your entry file:

import ShoppingList from 'path-to/ShoppingList';

ReactDOM.render(<ShoppingList />, document.getElementById("content1"));

In the CSHTML page the additional script tag is not required.

---

Your original example does not work because:

1. ShoppingList is not exposed globally (exporting as default does not make it global).
2. JSX syntax ( <ShoppingList /> ) needs to be transpiled before it can be used in HTML page.

If you really need to use a component within a CSHTML page, you can make the component global:

window.ShoppingList = ShoppingList

inside the file that defines the component.

And use vanilla javascript instead of JSX syntax:

ReactDOM.render(React.createElement(ShoppingList), document.getElementById("content1"))