CODEWITHSUNDEEP
javascriptreactjswebpack
Uzzar
Uzzar

Reputation: 703

Reactjs: Component not rendering

This is embarrassing but I am losing time trying to figure out why a reactjs component isn't rendering.

Here is the code I have currently: 

// index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ulonka Frontend</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  </body>
</html>

In routes.js 

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, browserHistory, IndexRoute } from 'react-router' 
import App from './App'

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
    </Route>
 </Router>
), document.getElementById('app'))

in App.js 

import React from 'react' 
export default React.createClass({ 
  render() {
    return <div> <h1> Hello </h1> </div>
  } 
})

Checked sources in dev tools and can see the string 'Hello' in bundle.js but for some reason it won't display in browser.

Can someone please explain to me what I am missing? Would greatly appreciate help. Thanks!

Upvotes: 2

Views: 4827

Answers (3)

Uzzar
Uzzar

Reputation: 703

@Ursus, @polkovnikov.ph, @TheReason!

Forgot to indict that I figured out what my error was.

My error was setting the root component of the app (App.js) to the entry point of the App (index.js). Once that was mistake was corrected, App.js was rendered to the DOM.

Thanks for all your all; greatly appreciated.

Upvotes: 3

U r s u s
U r s u s

Reputation: 6978

You're using the wrong syntax in App.js: the class you want to export doesn't have a name.

So App.js should be either

import React from 'react' 
const Hello = React.createClass({ 
  render() {
    return <div> <h1> Hello </h1> </div>
  } 
}) 
export default Hello;

or, ES6 version,

import React from 'react' 
class Hello extends React.Component({ 
  render() {
    return <div> <h1> Hello </h1> </div>
  } 
}) 
export default Hello;

Check, for example: https://toddmotto.com/react-create-class-versus-component/

Your routes may be wrong. Your code works without react-router. Well, not quite: it works after applying the correct syntax. Check the fiddle.

Also, are routes.js and App.js in the same directory?

Upvotes: 1

siwymilek
siwymilek

Reputation: 815

render method has been moved to react package. Try this

import React, { render } from 'react'

Upvotes: 0

Related Questions