Reactjs: Component not rendering

Question

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!

`text/javascript` is a wrong mimetype for JS, it's `application/javascript` according to the spec. As no sane browser supports languages other than JS, HTML5 claims it's safe just to use ` — polkovnikov.ph, Jun 10 '16 at 10:19
@polkovnikov.ph: thanks for that catch. Made correction. Still no dice. Also don't think that close `` on next line would cause problems; checked just to be sure and still don't see string hello in browser. — Uzzar, Jun 10 '16 at 10:25
Otherwise code seems perfectly valid to me. Are there any messages in console? Also React handles silently handles exceptions while rendering, and you may even not get an exception, until you enable "break of caught exceptions" in Chrome Dev Tools. — polkovnikov.ph, Jun 10 '16 at 10:27
@TheReason: Not sure I understand what you mean --- I was able to get alert("Hello") working -- Do you mean remove line 3 in routes.js and see what happens? — Uzzar, Jun 10 '16 at 10:31
@Uzzar, have you actually checked the DOM? Are there really no child-nodes to your `div#app`? — Chris, Jun 10 '16 at 10:39
I meant, render it directly to `dom` without using `react-route`. Something like `ReactDOM.render(, document.getElementById('app'))` — The Reason, Jun 10 '16 at 11:12

score 3 · Accepted Answer · answered Jun 20 '16 at 17:03

@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.

U r s u s · Answer 2 · 2016-06-10T12:56:54.500

1

~~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?

edited Jun 10 '16 at 12:56

answered Jun 10 '16 at 11:00

U r s u s

6,680
12
50
88

I noticed this as well, but apparently you can have a "default" component without a name. Not sure though; don't quote me on that. – Chris Jun 10 '16 at 11:48
@Chris Interesting. Can you show that on this [working fiddle](https://jsfiddle.net/69z2wepo/45129/) please? – U r s u s Jun 10 '16 at 12:09
No, but check out this [accepted answer](http://stackoverflow.com/a/34841313/2030321) – Chris Jun 10 '16 at 12:12
@Chris you're right I got that syntax to work. I didn't know that, thanks. I'll change my answer. – U r s u s Jun 10 '16 at 12:51

score 0 · Answer 3 · answered Jun 10 '16 at 11:00

0

render method has been moved to react package. Try this

import React, { render } from 'react'

answered Jun 10 '16 at 11:00

siwymilek

815
1
6
24

This isn't necessary as you're importing the whole package. – Chris Jun 10 '16 at 11:47

Reactjs: Component not rendering

3 Answers3