Create React App and Babel

If you come from a background where maybe you haven't worked with JavaScript for a long time, or maybe you're new to JavaScript and Create React App is your conduit for using it, you may see a lot of syntax throughout this book and while exploring other people's projects and find that the code is hard to read without a thorough understanding of what's going on. This chapter aims to bridge that gap for people who are new to Babel and describe what it brings to the table with our Create React App project.

The other goal of this chapter is for people who are already comfortable with JavaScript, but are curious about what features Babel introduces and has turned on by default in a Create React App project, so that you can take advantage of all of the quality-of-life improvements and cleaner syntax rules in your project and really put...

Babel and the latest JavaScript syntax

We've been building up this application to act as our base and in the process we've introduced a lot of syntax that may not be the same JavaScript that you're used to writing! For example, we've written a few functions with this sort of syntax:

const foo = () => {
  doSomething();
  doSomethingElse();
}

The syntax here is not particularly tricky and you can probably figure out what's going on, but maybe you don't fully understand how all of that ends up as a function when all is said and done. You may be more used to writing functions in a similar pattern to the following:

var foo = function() {
  doSomething();
  doSomethingElse();
}

Or maybe something more like a function declaration without the variable, such as the following function:

function foo() {
  doSomething();
  doSomethingElse();
}

The reality is that...

Summary

We covered a lot, but were pretty productive! We talked a lot about how to take full advantage of the better and cleaner syntax that Babel offers us in a Create React App 2 project!

Even this is really just scratching the surface of what you can do in modern JavaScript, but it covers a lot of the common patterns and tricks that you'll see throughout this book. We hope this guide will give you everything you need to be able to execute projects and to understand and contribute at the highest levels!

We'll be exploring a lot of these code techniques in future chapters, so make sure you have a firm grasp of everything we discussed in this chapter before you forge ahead!