Menu
I am new to React(Angular background) and trying to do client side rendering with react. Following index.html which is sent by express application:
<html>
<head>
<title>My Web</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<script type="text/javascript" src="/static/src/js/firstComponent.js"></script>
</head>
<body id="mainBody">
</body>
</html>
Here is the react component file(firstComponent.js):
var FirstComponent = React.createClass({
'render': function(){
return <h1> Hello</h1>;
}
});
ReactDOM.render(<FirstComponent />, document.getElementById('mainBody'));
But on loading the page, react does not seems to work. What is wrong here?
418
Finally got things working. Following are the steps that I took:
HTML:
<html>
<head>
<title>My</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/static/src/webpack/bundle.js"></script>
</body>
</html>
Component:
import React from 'react'
import ReactDOM from 'react-dom'
class FirstComponent extends React.Component{
render(){
return (
<h1> Hello</h1>
);
}
}
if(typeof window !== 'undefined')
ReactDOM.render(<FirstComponent />, document.getElementById('root'));
You have several problems. The ones that jump out at me are:
type="text/js" is not one of the recognised MIME types for JS so the browser will ignore that script elementfirstComponent.js is a JSX file, which isn't supported by browsers, you need to transpile it into JavaScript
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
