In the last section we generated a new project using create react up after Gendry the project successfully.
We've been schooled up a little bit and saw a message right here that said that we had to install 7500
separate packages in this video.
I want to start to understand why we had to install so many packages just to run a re-act application
and build one on our local computer.
All right so we're going to take a look at a couple of different diagrams really quickly.
So you and I just use create react up to generate a new re-act project inside this track projects are
a ton of different dependencies that are going to help us properly write our application.
I want to focus on one particular dependency because it's going to help you understand why we had to
install so much software.
So the name of the dependency that I want to focus on is Babel right here.
Now the term babbel might be familiar to you.
I'm going to give you a quick overview on what babbel is and why we use it and why it's included inside
of our accrete racked up installation.
All right.
So quick little asides here as you've been learning javascript over the last couple months weeks years
or whatever it might be you've probably been learning a version of javascript called yes 5.
And chances are you've also picked up a couple of features out of something called Yes 2015 as well.
Five and yes 2015 15s are references to a version of javascript.
Each version of Javascript has a very particular set of features and syntax of Able to it.
There are different versions of this.
Yes spec for every year after 2015.
So again chances are you've learned a little bit about yes 2015.
There's also an E.S. 2016 17 18 19 and so on and every one of these different features or different
versions has some number of new features and upgrades to the javascript language.
Now the important thing to understand here is that these updates to the language are generally for the
benefit of developers like you and I.
In other words if we can make use of say yes 20:17 javascript and use all the features in here and previous
years as well we're going to have a really good time because these newer versions of javascript have
new syntax new features available that makes your life in my life as developers a lot easier.
So as much as possible you and I want to run these newer versions of javascript.
However there's a little bit of an issue with this.
So the javascript that you and I write has to eventually be executed on our users browser member.
We shut down a javascript file to they're brought to their browser and the browser has to execute the
javascript inside there.
Now certain browsers are not always held always 100 percent up to date at present just about every single
modern browser out there has excellent support for S-5 javascript and other words.
If you and I write.
Yes five javascript code we can send it out to just about any version of browser and that code is going
to be executed just fine.
The same is almost true of.
Yes 2015 as well.
All the new updates to javascript included in yes 2015 can generally be executed in handled by every
modern browser but as we start to look at later years like 20 16 17 18 19 and 20 not all browsers and
barely any browsers for more recent years have support for the changes to javascript that are included
in those years.
So we're essentially in a little bit of a conflict here.
On the one hand you and I want to use later years or later versions because they make our lives easy
as developers.
But on the flip side our users cannot actually run the code that we're writing because their browsers
do not support it.
So in order to get around this we make use of a tool called Babel babble is a command line tool that
can take any version of javascript and spit out a newer version.
So this right here is a diagram of what might happen if we don't use a tool like Babel you and I might
write some yes 20:15 code inside of some javascript files and then send it down to some browser with
no guaranteed.
Yes 20:15 support.
If we did that our code might completely fail to run on that user's browser and they probably won't
see any content when they visit our Web page.
They'll probably just see a completely blank page or something like that.
So with babbel you and I write our Yes 2015 or 2016 2017 and so on code and then we feed it into this
command line tool called babbel and babbel spits out a E.S. 5 version of our code or a version of our
javascript code that is going to be safely executed on just about any browser in existence.
So that's the job of Babel.
And like I said Babel is included by default.
Anytime that we generate a new re-act project internally Babolat consists of a tremendous number of
different packages.
And so that at least partially explains why we're seeing this very large number of packages installed
when we generated our project.
Now there's definitely other dependencies inside this project as well.
Other things such as web pack and well-packed dev server will talk about the purpose of these other
files over time or these other dependencies over time.
But right now I just want to understand that we have these different dependencies inside of our project
and that's why you're seeing that tremendous number of dependencies or the large count of them when
we've just generated our project.
OK so now that we understand a little bit more about create re-act up well let's continue in the next
section and we're going to start looking at the contents of the project that we just generated.