2

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!

Improve this question
8
  • have you tried to render it without react-route? Commented Jun 10, 2016 at 10:11
  • 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 <script src="..."> for this purpose. Commented Jun 10, 2016 at 10:19
  • Why not <Route path="/" component={App} />? Commented Jun 10, 2016 at 10:20
  • @polkovnikov.ph: thanks for that catch. Made correction. Still no dice. Also don't think that close <Route> on next line would cause problems; checked just to be sure and still don't see string hello in browser. Commented Jun 10, 2016 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. Commented Jun 10, 2016 at 10:27

3 Answers 3

Reset to default
3

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

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

Comments

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?

Improve this answer

4 Comments

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 Interesting. Can you show that on this working fiddle please?
No, but check out this accepted answer
@Chris you're right I got that syntax to work. I didn't know that, thanks. I'll change my answer.
0

render method has been moved to react package. Try this

import React, { render } from 'react'

Improve this answer

1 Comment

This isn't necessary as you're importing the whole package.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.