CODEWITHSUNDEEP
reactjswebpackbabeljs
user1836155
user1836155

Reputation: 918

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!

Upvotes: 0

Views: 870

Answers (1)

Rafi Ud Daula Refat
Rafi Ud Daula Refat

Reputation: 2257

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>
  </head>
  <body>
    <div id="greeting-div"></div>
    <script type="text/javascript" src="PATH_OF_YOUR_OUTPUR_SCRIPT" ></script>
  </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]'
    },
};

Upvotes: 3

Related Questions