Imports and JSX

If you’ve used any language other than JavaScript, then you’re probably already familiar with the concept of imports and exports. It’s simple, really: one file exports something, and then another file imports and uses it.

export const billionaireFriends = []

By splitting functions across multiple files, it becomes possible to create more maintainable software, and to share code between projects. This is particularly important, because in apps using any kind of build system, to access React itself you’ll need to import it.

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  React.createElement('h1', {}, "Hello, world"),
  document.getElementById('root')
)

Pretty boring, huh? It’s basically the same demo that you’ve already seen, but with two minor differences:

• Instead of manually including <script> tags via an index.html file, it leaves all this to the build system.
• Instead of accessing React through a global React object, it explicitly imports it.

But wait a minute, that second point is actually more important than it looks. Let me explain why.

#Importing React

Remember how JSX compiles <tags> into calls to React.createElement()?

This is an important detail to remember, because it has an important consequence when using import. Let me demonstrate by converting the above example to JSX.

import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, world</h1>,
  document.getElementById('root')
)

After converting to JSX, there’s no longer any call to React.createElement() — so I’ve removed the React import. But wait a minute — the console says that React is not defined. That’s odd?

As you may suspect, I’m being a purposefully obtuse here. The reason that the above demo doesn’t work, of course, is that it does in fact call React.createElement() — because that’s what the JSX compiles to. If you don’t believe me, go ahead and click the editor’s Compiled button to see the code that is actually being run.

Here’s the thing to remember:

When you use JSX in a file, you’ll need to import React!

Since you need to get into the practice of this, why not fix the above example by adding an import now? Don’t worry, I’ll wait here!

A little housekeeping before we continue: for the rest of this course, I’ll be importing React with import statements instead of <script> tags. After all, that’s how React works in the real world.

Speaking of the real world, if you want to try out this course’s examples locally, then you can! Any index.js file with an import React from "react" statement is designed to work both in the build-in editor, and in a Create React App project. Just copy it across to your filesystem (along with any dependency files) and you’ll be right to go.

Of course, maybe you don’t want to worry with Create React App right now, and you’re happy sticking with the built-in editor. That’s fine too! In fact, I think we’ve talked quite enough about build systems for one course, so let’s dive into some code and build something useful.