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
Pretty boring, huh? It’s basically the same demo that you’ve already seen, but with two minor differences:
<script> tags via an
index.html file, it leaves all this to the build system.
React object, it explicitly
But wait a minute, that second point is actually more important than it looks. Let me explain why.
Remember how JSX compiles
<tags> into calls to
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.
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
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.