Our code doesn’t do anything yet because we haven't included our new page in the app, so please go back to index.js and modify it to this:
import React from 'react'; import ReactDOM from 'react-dom'; import Detail from './pages/Detail'; ReactDOM.render( <Detail />, document.getElementById('app') );
Save both index.js and Detail.js and, all being well, you should be able to return to your web browser and see "This is React rendering HTML!" right there on the screen.
Don't see anything? You may have made a typo, and should look in your browser's console for more information. Sometimes the error messages can be a bit obscure, so you might need to investigate carefully.
For example, the error message "Super expression must either be null or a function, not undefined" probably means you created the Detail component using
class Detail extends React.component rather than
class Detail extends React.Component – note the difference of a capital C in Component is all it takes to break.
As another example, an error message similar to "ERROR in ./src/index.js: Unexpected token (7:2)" actually means you probably forgot to modify your package.json file way back in chapter one – the new lines that load Babel presets for
react are required, so please go back to chapter one and ensure your package.json file is correct.
Anyway, before I explain what the new code does, try going back to Detail.js and modify its render method to say "This is JSX being converted to HTML!" If you do that, then press save again, you'll see some magic happen: your web browser will automatically update to show the new message.
You don't need to run any commands or indeed take any other action than saving your code – Webpack Dev Server automatically detects the change and reloads your work. Hopefully you can now see why it was so important to get the Webpack configuration right at the start of this tutorial, because using this development set up (known as "hot loading") makes coding substantially faster. Note: if you don't see any changes, just hit Refresh in your browser.
Now, let me explain what the new code in index.js does…
When our app gets built, that
<Detail /> line automatically gets converted into the Detail component we created inside Detail.js, which in turn has its
render() method called so it draws to the screen.
Now, before we continue you probably have some questions. Let me try to answer some:
<Detail />means? We don't give the component a name inside Detail.js, so instead the name comes from the way we import it: if you use
import Bob from './pages/Detail';then you could write
<Bob />and it would work just fine. (But please don't do that if you value your sanity!)
To recap, so far you've learned:
Not bad, but that's just the beginning…
Buy the book for $10
Get the complete, unabridged Hacking with React e-book and take your learning to the next level - includes a 45-day no questions asked money back guarantee!
If this was helpful, please take a moment to tell others about Hacking with React by tweeting about it!
Copyright ©2016 Paul Hudson. Follow me: @twostraws.