I am new to React JS and trying a very simple app. I have index.html file App.js and Header.js. I am trying to render Header in App and then rendering the whole App into the index.html. when App on its own without Header importing and rendering everything works just fine but when importing Header.js into App.js and render an instance of with everything in App.js it doesn't work at all. Can anybody explain me what's wrong with my code. Thank you.
/* Header Component in a Header.js file */
export class Header extends React.Component
{
render()
{
return(
<div>
<h1>My Beautiful Website</h1>
<hr />
</div>
);
}
}
/* App Component in App.js file */
import Header from './Header';
class App extends React.Component
{
render()
{
return (
<div>
<Header />
<section>
<h2>I am trying to make this React thing work</h2>
<p>
It should be easy to do I am trying to do but may be I am a little confused about
things in React JS. Sooner or later though everything gets easier and most importantly
crystal clear to the human mind when you persevere. I believe.
</p>
</section>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.8/react-dom.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Hello world</title>
</head>
<body>
<div id="root"></div>
<script src="./App.js" type="text/babel"></script>
</body>
</html>