I know some of this can feel a little bit tedious, because we haven't really even written any React code. But, please, please be patient with it, because I promise you, I have seen and taught students two different ways.

I have taught students where we jumped right into the React code, and then I've also taught students this way, in a much more foundational approach, and the results have not even been comparable. The students that started out by writing code from day one, really struggled later on, because when we started to get to more complex topics, they didn't even have any idea for why they were writing the code they're writing.

But, the ones that were taught using this kind of foundational comprehensive approach, have a much more solid foundation of the fundamentals. So, later on, when you get to build out larger projects, or when you're asked to build an application that maybe you've never been given a tutorial for, you're going to have a lot better idea on how to do that.

So, that's a reason why we're taking this approach. So, great job in how far you've made it, and we're almost done analyzing the file system. After we do this in the next section, we're going to get into actually writing the code and building out our portfolio application.

So, in this guide, we're going to take a look at this .babelrc file. Now, there's not a lot in this file, but Babel does quite a bit, so we're going to dive into what Babel does in this guide.

You can see that in the .babelrc file, we have some presets, and then we have an empty array of plugins.

So, in order to understand what this is, let's first analyze the file itself. So, whenever you see a dot in front of a file name, that is typically going to be a hidden file, so you may not even see this in your file system.

If you were to navigate in your finder, or your Windows Explorer, this file may not even be shown, because it is considered a hidden configuration file. So, that is one thing to take note. Whenever you have a dot there, then that is considered a hidden file, and that usually means it's something that is either security related, or it only deals with some kind of items that you wouldn't want everyone else to see. We're going to walk through a few other hidden files later on, for right now, just know that that's what it means.

Now, whenever you see rc, the letters rc at the end of a filename, that is almost always a configuration file. So, you're only going to see a single rc file in this project, but I promise you, as you go on your development journey, you will see quite a few files that end in rc, and that means they're configuration files.

So, what this is telling us is that this is a hidden configuration file for Babel. So, what is Babel? Well, we kind of talked about Babel a few guides ago, but the best way of understanding what it does is to watch a demo, so, let's go and do that.

If you switch over into the browser, just google Babel JS, and this is going to take you to the babeljs.io website. So, if you come here, it tells you right away what it is. Babel is a JavaScript compiler.

So, what does that mean? Well, what it means is that there are all kinds of different versions of JavaScript. JavaScript has been around for decades, and so because of that, there can be times where you have a browser or some type of application that doesn't understand all the different versions of JavaScript.

The versions of JavaScript are continually being updated. So, you don't want to run into a situation where you write code thinking that the user's going to be accessing a browser that can understand it, only to find out that it doesn't understand your code at all and your application doesn't even work.

So, what Babel does is it takes all of the code we write and it compiles it down into something that any browser is able to understand. That's why it's called a compiler, it is compiling our JavaScript code into something that all the browsers out there can work with.

Now, let's walk through a demo. If you scroll down here, you'll see this little link that says, "Check out our REPL."

Now, if that link is not there, then you can just go to this URL, babel.js.io/en/repl.html. If you're coming from some other language or locale, then you can type in that locale there, and it's just repl.html.

So, what we have here is a really cool way of being able to see the way that Babel works. We can write the code that we want to write with our modern JavaScript here on the left hand side, then on the right hand side, it is going to show you what Babel compiles it down to.

Now, I'm going to go through two examples. The first one, you'll see is kind of basic, it doesn't seem like that big of a deal. The second one you're going to see is pretty significant. So, we're first going to look at arrow functions. Now, arrow functions have been around for just a few years in JavaScript, and so not every browser has the ability to work with them.

So, if I were to write something like this, if I were to create an array of the numbers 1, 2, 3, and then if I want to map over these, and I'm going to give it a block element of el, just short for element.

Then I'll use an arrow function. Inside of here, I want to return whatever the element is times five. So, what this is going to do is it's going to map over this array of numbers, it's going to multiply that times five, and then it's going to store that in a new array.

Now, if this is a little bit small for you to see, I'm going to zoom in. You can see it moves the nav bar up here. So, just in case yours looks different it's because I have mine zoomed in now. So, hopefully, that's a little easier for you to see.

So, I'm returning that multiplication of five. So, now, let me look and fix this syntax error okay. So, now it's compiling, we don't have this error down on the bottom anymore, and now you can see what the arrow function was converted to.

It was converted to a regular anonymous function. So, instead of using the arrow, it's now using the function keyword, it passes in element as the argument, and then pretty much everything else is the same. Now, if I were to store this in a const variable, so if I were to say "const nums =", you can see that it changes it to var, because not all of the browsers and the clients understand the const variable type yet.

So, that's pretty basic and that gives you kind of a dead simple idea of what Babel does. It takes in modern JavaScript code and converts it into something everybody can understand.

Now, let's look at a different example. This is one that kind of blew me away when I first saw it and that is how destructuring works. Now if you are not familiar with destructuring or you don't remember it, it's fine. It gives us the ability to take an object in JavaScript and split the object into variables automatically.

So what I can do here is I can create a variable and use this array syntax. And if it's kind of hard to see because it's like this lime green color here, it's just using the brackets. And I'll say "firstName, lastName" and then I'm going to destructure that from an object.

So I'm going to set up a regular vanilla JavaScript object here and it has to have these named keys. So firstName let's say is going to be Kristine and lastName will be Hudgens. So just a plain object that has the Kristine and Hudgens values for firstName and lastName.

What the modern versions of JavaScript allow us to do, and this is called destructuring, is when you assign the variable like this, what it's doing is it's looking for a key named firstName and it assigns Kristine here into that and then it's looking for a variable called lastName and it assigns Hudgens into that. And then you can work with them just like normal variables, so you could say "console log" and then firstName, if you spell it correctly, just like this and that will all work.

Now that's basic destructuring, you can see it only took four lines of code. If you were to convert that into something that all the browsers would be able to work with, look at what you have to do.

This is where Babel comes in very handy. You'd have to create this slicedToArray anonymous function, and you'd have to write all of this code right here, then you'd need to create a different version of this object. And then you'd need to do quite a bit of work in order to assign that dynamically.

So as you can see it may only be 13 lines of code compared with six, but this is a pretty significant function that you would not want to have to write manually, so that's what Babel does.

It's going to take all of our code, it may only have to change a few things or it may have to change hundreds of things. But it's going to allow you to write your code using the latest syntax and then it's going to streamline it so all the browsers are able to work with it.

So Babel is very flexible, let me zoom out here for a second, and on the side here you can see some of the different presets. So if you notice in our code, remember where we talked about presets? Where we have this environment, env is just short for environment and then React.

Well, what we can do is, you can assign all kinds of different presets, each one of these is a specific version of JavaScript. So we have our ES2015 version, we have ES2017, and you could assign each one of these presets so that you can use that specific kind of syntax.

Now I know that seems like a lot of stuff, you don't have to have all this memorized or anything. All I'm trying to say is that I want to give you an idea for what Babel is doing. Babel allows us to write, in this case, React code that's a reason why we have this as a preset.

React has a specific set of syntax options that we're going to be able to use. And then it will convert that into something the browser can use, without that we'd have to write a lot of boilerplate code and that would not be very fun at all. So that's what Babel and this RC file allows us to do. It's kind of the same as if we just came to this website and we said okay, yeah, I want to be able to write with the React syntax and ES2015, and I want to include arrow functions and that kind of stuff.

And that's all we're really doing, it's like we're selecting presets here and when we're adding that to our .babelrc file, that's exactly what we're doing, we're listing off how we want our JavaScript code to be converted.

Resources

• Babel Repl