2. Algorithm
  3. javascript - Reactjs: Component not rendering - Stack Overflow

javascript - Reactjs: Component not rendering - Stack Overflow

admin2025-04-26  2

This is embarrassing but I am losing time trying to figure out why a reactjs ponent 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="/" ponent={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!

This is embarrassing but I am losing time trying to figure out why a reactjs ponent 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="/" ponent={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!

  • javascript
  • reactjs
  • webpack
Share Improve this question asked Jun 10, 2016 at 10:05 UzzarUzzar 7031 gold badge12 silver badges24 bronze badges 8
  • have you tried to render it without react-route? – The Reason 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. – polkovnikov.ph Commented Jun 10, 2016 at 10:19
  • Why not <Route path="/" ponent={App} />? – polkovnikov.ph 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. – Uzzar 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. – polkovnikov.ph Commented Jun 10, 2016 at 10:27
 |  Show 3 more ments

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

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./react-create-class-versus-ponent/

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?

render method has been moved to react package. Try this

import React, { render } from 'react'

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745601846a309354.html

javascriptReactjs Component not renderingStack Overflow

最新回复(0)