admin管理员组

文章数量:1024053

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'

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'

本文标签： javascriptReactjs Component not renderingStack Overflow

版权声明：本文标题：javascript - Reactjs: Component not rendering - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745601844a2158502.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。