Configure babel for React with preset-react

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet
Published 3 years ago
Updated 3 years ago

In this lesson, we'll add React and ReactDOM to our project and create an entry point for the React application. We'll also configure Babel with the React preset so Babel can transpile our JSX into JavaScript that will run in a browser.

Instructor: [00:00] Right now the entry point for this application simply logs something out to the console. Instead of doing that, I'd like this to be a React application. In order to do that, we need to install some new dependencies. In the terminal, I'm going to do an npm i, this time passing it the -S flag to save as runtime dependencies.

[00:20] We're going to install React, ReactDOM, and the prop-types library. With those installed, lets go back into our app, and in the source directory, I'm going to add a new file. I'm going to call this app.js. This is going to be my top-level React component. Here, I'm going to import react from React, and I'm going to define a class component called F.

[00:54] That's going to extend react.component. Then I'll expose a render method that for now is just going to return an h1 that says hello world, and then down at the bottom of the file, we're going to export default app. Then we can save the app file.

[01:20] In index.js, I'm going to get rid of both lines of code, and I'm going to import react from React. I'm going to import react-dom from ReactDOM, and I'm going to import app from the relative path to our app module. I can drop down here, and I can call react-dom.render.

[01:54] I'm going to render the app component into a DOM node that we'll get by ID. We'll call that app. Let's save index.js, and we're no longer using greet.js, so let's go ahead and just delete that file. Now, in the terminal, I'm going to run npm run build. We're going to see that we get some errors when we try to build this.

[02:28] If we scroll up a little bit, we'll see that it's failing with a syntax error, an unexpected token where it first encounters our JSX. JSX is not valid JavaScript. When we run this through the Babel loader, it doesn't know what to do with this code. We need to tell Babel how it can handle JSX, and transform it into valid JavaScript.

[02:54] We're going to do that with another preset. We're going to npm i -d, because we're going to save it as a dev dependency, @babel/preset-react. With that installed, we can go into our webpack config, and where we have our Babel loader options, and we're specifying our preset env, we can add to that array.

[03:21] We'll do @babel/preset-react, and we'll save our webpack config. Then back in the terminal, you can npm run build. This time, we'll see it's successful, and we get our app.bundle.js file emitted. If we go into our dist directory, and open that file up, even though it's minified, we'll see that it's far longer than it was before.

[03:50] This is because React and ReactDOM are both part of this bundle now.

Viktor Soroka
Viktor Soroka
~ 3 years ago

Nice lecture. It would be nice also to hear a few words about the order of presets inside presets array.

Sean O’Donnell
Sean O’Donnell
~ 3 years ago

Good stuff. Just a heads up, after following along with this tutorial, I was getting this error when doing npm run build:

ERROR in ./src/index.js
Module build failed (from /Users/seano/node_modules/babel-loader/lib/index.js):
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

Solved thusly:

npm install babel-loader babel-core@^7.0.0-bridge @babel/core --save-dev
Andy Van Slaars
Andy Van Slaarsinstructor
~ 3 years ago

Good stuff. Just a heads up, after following along with this tutorial, I was getting this error when doing npm run build

I'm not sure what you have installed or configured at this stage that would cause this error. This problem does come up later in the course and installing the babel-core bridge package is covered in: this video, covering testing React components with Jest