ReactDOM is not rendering the React component into HTML

Question

I've been following a React guide which goes through setting up webpack and babel in my repo. I created a react element which will simply print out "Hello World", and then I use the ReactDOM.render method to add this element into the index.html file, but for some reason it's not being added in.

Here is my Index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

export default class App extends React.component {
    render() {
        return(
            <div>
              Hello World
            </div>
        )
    }
};
//////EDITED OUT <button /> for <App />
ReactDOM.render(<App />, document.getElementById("root"))

My index.html file:

<!DOCTYPE html>
<div id="root"></div>

My webpack.config.js file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./App/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.(js)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
        ]
     },
     plugins: [
          new HtmlWebpackPlugin({
              template: 'App/index.html'
          })
      ]
}

My index.css:

body {
  background: red;
}

My .babelrc file

{
  "presets": ["es2015", "react"]
}

I've checked the dev console on my browser and it simply isn't showing the component enclosed inside the component in index.html file. Is there something additional I need for ReactDOM to push my react element into the DOM?

I've looked at others similar questions on stack but their problems ended up existing because of a typo, I've strained my eyes looking over my code and can't find any typos. I think there may be a step in the installation that I've skipped.

WilomGfx · Accepted Answer · 2017-05-29 16:57:29Z

5

You need to render <App /> not <button />

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

export default class App extends React.component {
    render() {
        return(
            <div>
              Hello World
            </div>
        )
    }
};
document.createelement("LI").appendChild(document.createTextNode("Water"));
ReactDOM.render(<App />, document.getElementById("root"))

You also need to output that

/dist/bundle.js

in index.html

like so

<!DOCTYPE html>
<div id="root"></div>
<script src="/dist/bundle.js"></script>

edited May 29, 2017 at 16:57

answered May 29, 2017 at 16:50

WilomGfx

2,0221 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andrew Brick Over a year ago

Whoops, I added that in when I was testing to see if ReactDOM could render any element, turns out it can't. The problem still persists when I change it to <App />

WilomGfx Over a year ago

Ok and what script tag you have included on your page? I dont see any in index.html. I updated my answer for that as well.

Andrew Brick Over a year ago

The dev console shows the HTML as: <body><div id="root"></div><script type="text/javascript" src="bundle.js"></body>. I think the script tag appeared because of webpack, I'm not sure

Andrew Brick Over a year ago

I tried adding in a script tag inside the root div tags in html, as <script type="text/babel" src="index.js"></script>. Still the react component doesn't appear

WilomGfx Over a year ago

Webpacks output is under /dist. so you need (whatever your root is) /dist/bundle.js

|

Collectives™ on Stack Overflow

ReactDOM is not rendering the React component into HTML

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related