CODEWITHSUNDEEP
reactjs
Benjamin
Benjamin

Reputation: 3826

Component is not being display in React

I am following a tutorial in React. I have created my very first component and expecting to see component in my application homepage, but I don't. I am not getting any error either.

In my homePage.Js (This is a component that I am trying to render), I have :

var React = require('react');

var Home = React.createClass({
    render: function(){
        return(
            <div className="jumbotron">
            <h1>Administration</h1>
            <p>React, React Router.</p>
            </div>
        );
    }
});

module.exports = Home;

In my Main.js file I have (This main.js serves as the base file for referencing my components):

$ = jQuery = require('jquery');
var React = require('react');
var Home = require('./components/homePage');

React.render(<Home />, document.getElementById('app'));

and in my index.html file I have :

<html>
    <head>
        <title>Administrator</title>
        <link rel="stylesheet" href="css/bundle.css" />
    </head>
    <body>
        <div id="app"></div>
        <script src="scripts/bundle.js"></script>
    </body>
</html>

When I run the app, I see an empty page, and when I check the page source code I can see below HTML in the BODY tag:

 <body>
        <div id="app"></div>
        <script src="scripts/bundle.js"></script>
    <script src="//localhost:35729/livereload.js?snipver=1" async="" defer="">
    </script>
</body>

Upvotes: 0

Views: 71

Answers (2)

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

You need to call the render method from react-dom when mounting the app.

ReactDOM.render(element, container[, callback])

Upvotes: 2

Merlin
Merlin

Reputation: 324

You import Home using

require('./components/homePage')

which is fine for default import, but your's isn't the default. Use

require('./components/homePage').Home

or export using

module.exports.default = Home;

By the way, React.createClass is deprecated. If you want to learn React I recommend the use of ES6 class or function component. Try create-react-app to begin with.

Upvotes: 2

Related Questions