CODEWITHSUNDEEP
htmlwebpackreactjs
After_Sunset
After_Sunset

Reputation: 714

React code not showing in browser

I'm using Webpack to bundle some React code written in JSX format. I have everything up and running as far as compiling goes and it looks as though every thing is correct in the bundle.js output file. When I import it into an HTML file and try to display the React code it doesn't show up for some reason. I've made a regular javascript file and included it in the main.js so that it is also included in the Webpack output file bundle.js and this does show up in the browser. So when the bundle.js is used in my html file I just get the text "Hello, im located in a seperate file" and not the React elements.

React Code(main.js)

require('./extra.js');

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

Regular JS File(extra.js)

document.write("Hello, im located in a seperate file");

Output file after running webpack(bundle.js)

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);

    React.render(React.createElement(
        "h1",
        null,
        "hello world"
    ), document.getElementById("app"));

    var HelloMessage = React.createClass({
        displayName: "HelloMessage",

        render: function () {
            return React.createElement(
                "div",
                null,
                "Hello ",
                this.props.name
            );
        }
    });
    ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

/***/ },
/* 1 */
/***/ function(module, exports) {

    /**
     * Created by sf on 1/14/2016.
     */

    document.write("Hello, im located in a seperate file");

/***/ }
/******/ ]);

HTML file im using the script in

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="example"></div>

<script src="bundle.js" type="text/javascript"></script>
</body>
</html>

Upvotes: 2

Views: 17867

Answers (2)

Josh David Miller
Josh David Miller

Reputation: 120513

The examples on the React homepage are not self-sufficient, but rather minimal examples of React itself. Here's how the example you're using might look, starting with index.js:

var React = require( 'react' );
var ReactDOM = require( 'react-dom' );

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var mountNode = document.getElementById( 'app' );
ReactDOM.render(<HelloMessage name="John" />, mountNode);

And your index.html:

<html>
  <body>
    <div id="app"></div>
    <script src="./build/bundle.js"></script>
  </body>
</html>

Notice that it is requiring a script called bundle.js and our source is called index.js. To transform the JSX and package our source into the bundle, we can use Webpack with this basic config:

var webpack = require( 'webpack' );

module.exports = {
  context: __dirname + '/src',
  entry: './index.js',
  devtool: 'source-map',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loaders: [ 'babel-loader?presets[]=react' ],
      }
    ],
  },
};

Upvotes: 2

PhilVarg
PhilVarg

Reputation: 4820

you either need to put that script tag at the end of the body, or execute the code on document ready. when that script is running in the head, there isnt a div with id = app on the document yet

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  <div id="app"></div>

  <script src="bundle.js" type="text/javascript"></script>
</body>
</html>

Upvotes: 0

Related Questions