reactjs code not showing up in browser
Question
Thanks fr the great work here. I'm a newbie in react.js with some limited js skills. I'm trying to create a basic page with a header , a main and a footer. I wrote the code , console returned no error but nothing is showing up into browser. Here s the code :
js
const Header = ({title}) => (<header>{title}</header>);
const Main = ({title}) => (<main>{title}</main>);
const Footer = ({title}) => (<footer>{title}</footer>);
class App extends React.Component {
render() {
const {header,main,footer} = this.props;
return (
<div className="app">
<Header title={header} />
<Main title={main} />
<Footer title={footer}/>
</div>
);
}
};
ReactDOM.render(
<App
header="I am the header"
main="I am the main"
footer="I am the footer" />,
document.getElementById('react')
);
export default App;
html
<body>
<div id="react"></div>
</body>
console returned:
Compiled successfully!
You can now view wp in the browser.
http://localhost:38867/
Note that the development build is not optimized.
To create a production build, use npm run build.
And I got this :
What did I do wrong ? codeview here https://codepen.io/anon/pen/mmaxvj
EDIT : I forgot to add index.js. I edited it and changed ReactDOM.render (<App />, document.getElementById('root')); to ReactDOM.render(<App />, document.getElementById('react'));
Now I have a blank page showing up and no more error on the browser... Any thoughts ?
2 answers
solution1
0 2017-05-23 02:36:53
Try adding this code before the closing </body> tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
Check to see if you also need jquery.js or any other javascript packages.
I see on the React doc pages, they give a link to the CodePen "Hello World" React page - you can also use that as a seed template: http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010
This came from the page https://facebook.github.io/react/docs/hello-world.html
solution2
0 2017-05-23 02:39:24
The code you provided works. However, the screenshot you included in your question shows a document.getElementById('root') line which is not part of your code - you might need to re-build your code or make sure your dev server (eg webpack) is running on the correct source directory.
Also check this answer regarding the placement of the react <script> tag: https://stackoverflow.com/a/26416407/1647737
const Header = ({title}) => (<header>{title}</header>); const Main = ({title}) => (<main>{title}</main>); const Footer = ({title}) => (<footer>{title}</footer>); class App extends React.Component { render() { const {header,main,footer} = this.props; return ( <div className="app"> <Header title={header} /> <Main title={main} /> <Footer title={footer}/> </div> ); } }; ReactDOM.render( <App header="I am the header" main="I am the main" footer="I am the footer" />, document.getElementById('react') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.