user1836155 user1836155 - 3 months ago 11
React JSX Question

React w/ JSX: Load class defined in JSX into HTML

I am new to React and have attempted going through a few tutorials but do not have luck so I resort to asking question here.

My setup: I have a .jsx file that contains a class definition:

HelloWorld.jsx

import React, { Component } from 'react';

export default class HelloWorld extends Component {
render() {
return (
<div className='greeting-div'>
<div>
HELLO WORLD JSX
</div>
</div>
);
}
}


I would like to do this in my index.html (app.js contains the main JS assets):

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
<script type="text/javascript" src="../assets/app.js" ></script>
<script type="text/javascript" src="../assets/HelloWorld.js" ></script>
</head>
<body>
<div id="greeting-div"></div>

<script type="text/javascript">

ReactDOM.render(
<HelloWorld/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>


I configured my webpack.config.js this way

webpack.config.js

var webpack = require("webpack");
var autoprefixer = require("autoprefixer");
var paths = require("./paths.js");
var files = require('./files.js');
var path = require("path");

module.exports = {
entry: {
HelloWorld : path.join(paths.hello, "HelloWorld"),
app: ["react", "react-dom", "react-bootstrap", "jquery", "underscore"]
},

output: {
path: paths.webappAssets,
publicPath: "",
filename: "[name].js",
chunkFilename: "[chunkhash].js",
libraryTarget: 'var',
library: '[name]'
},
};


As you may have expected, this setup does not work and I am stuck. I suspect it has something to do with how I am calling ReactDOM (maybe it belongs in the jsx?)

Anyway, some guidance would be appreciated! Thanks!

Answer

Hope that helps. DO something like that.

HelloWorld.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class HelloWorld extends Component {
    render() {
        return (
            <div className='greeting-div'>
                <div>
                    HELLO WORLD JSX
                </div>
            </div>
        );
    }
}
ReactDOM.render(
  <HelloWorld/>,
  document.getElementById('greeting-div')
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First React Example</title>
    <script type="text/javascript" src="PATH_OF_YOUR_OUTPUR_SCRIPT" ></script>
  </head>
  <body>
    <div id="greeting-div"></div>
  </body>
</html>

webpack.config.js :

var webpack = require("webpack");
var autoprefixer = require("autoprefixer");
var paths = require("./paths.js");
var files = require('./files.js');
var path = require("path");

module.exports = {
    entry: {
    path.resolve(__dirname, 'PATH_OF_YOUR_HelloWorld.jsx'),
    },

    output: {
        path: paths.webappAssets,
        publicPath: "",
        filename: "[name].js",
        chunkFilename: "[chunkhash].js",
        libraryTarget: 'var',
        library: '[name]'
    },
};
Comments