Importing React Components using ES6

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:

src/index.js

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 es2015 and 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…

• import React from 'react' is a line you've seen before, and you'll see again in this tutorial: it just sucks in the main React library so we can start work.
• import ReactDOM from 'react-dom' is new, and imports the React tools required to render to the DOM – that's the name used for the document structure used to describe web pages and other similar documents.
• import Detail from './pages/Detail' is where we import our new React component into our app so that we can start using it.
• ReactDOM.render() is what kicks off the rendering of our entire app, and it takes two parameters: some JSX to render and where to render it to.
• is the first parameter we ask React to render, and it's the JSX name of our Detail component.
• document.getElementById('app') is the second parameter to the render method, and it tells React we want it to render inside the HTML element named "app" – that's inside the index.html file we made earlier.

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:

• Why does Detail.js have a capital letter? This isn't needed, but it's stylistically preferred.
• How does JSX know what <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!)
• Can I put lots of components in Detail.js? You can if you want to, but again it's preferable not to if you value your sanity. Stick to one component per file if you can.
• Do I have to render stuff inside my component? No, but React does need something to render at this point. When you're a more experienced React developer you'll learn more about this.

To recap, so far you've learned:

1. How to install Webpack, Babel and React for development with ES6.
2. How to create a basic React component and import it into an application.
3. How to write simple JSX to render content.

Not bad, but that's just the beginning…

Copyright ©2016 Paul Hudson. Follow me: @twostraws.