If you've never heard this before, this is a pretty common abbreviation for source. What this is really representing is all of the logic for our application is going to be placed inside of this directory.

You can think of all the other files in the root of the project, those are all the dependencies and configuration items whereas the source is actually our pure React and JavaScript code that we're going to be writing.

We may take a few videos to get through all of this, because there's quite a bit to cover. If you feel like I'm not going in quite as much detail as usual with a few of these, it's because a few of the items like actions and reducers, we're actually going to have an entire section of the course dedicated to them.

So I'm just going to give you a high level overview of them now and then later on we're going to dive into them more. So starting at the very top with actions, if you click in this directory, you'll see there is an index file, and it's empty right now.

What this is going to do is it's going to give us the ability to interact with our Redux store. Like I said, we have an entire section dedicated to Redux. For right now just know that Redux gives us the ability to store all of our data in a single place and then to query it and then access it.

So that provides a very helpful interface for being able to get access to that data. That is also what reducers are; actions and reducers are both specifically made for working with Redux so we'll cover those later.

Now components, this is a very key element of our entire application. Components are what make up a React application. If you remember in the introduction I talked about component based architecture and what that represents.

It means that we have the ability to build an app one piece at a time. Instead of creating all of these pages the way you would with... that was kind of the older way that you'd build out applications. With systems like React or View, they are component based systems, which means that we put together and we compose all of these components and then that is what gives us the full application.

So you'll see us do things like create a component just for a little alert on one page, or a component that is just a button. So they're all going to have their own roles, the reason why we do that is because it makes it much easier to create one component, one element on the page, or one piece of functionality and then share it across the entire application.

So you're going to see us following that approach quite a bit. And we're going to place that logic inside of this components directory. Now, the template that you have right here just has a single component right now called the App component. This is a very critical one for our application because all of our other components are going to be nested inside of this App component.

The technical term for this in React is this is going to be the parent component for all of the other components that we have. So if we have a portfolio list page, if we have the home page, if we have a portfolio form, our blog, our sign-in page, all of those are going to be nested inside.

They're going to be the child components of this App component. Right now it's pretty basic, we just have our name and a heading, then we're calling moment js and that's all that there is.

We're going to walk through, if this syntax looks a little bit crazy to you, don't worry. In the next section when we go through React fundamentals, we're going to walk through exactly what this is. We're going to see what we mean when we say App and extends component and what that allows us to do and what a render function is.

For right now, just know that these are items that are built into React that allow us to render items on the page as you can see right here. Moving on down the line, we already talked about reducers, those have to deal with Redux, which we'll get into later.

Then we have our style directory. The style directory is where we're going to be able to place our Scss and our CSS style. So the look and feel of our application is going to be stored right inside of this directory. Now React is incredibly flexible when it comes to styles. You have the ability to implement styles the way we're going to by placing them inside of CSS files.

That's my preferred approach, that's just the way that I like to do it. But, React gives you so many options. You can also actually create entire styled components and that's one way of doing it.

It's the preferred way that I like it because I feel like whenever I can place all of my styles in a single directory like this, it makes it very easy to find them. I know where all my Scss files are and it's easy to access and maintain. We're going to create probably over a dozen dedicated Scss files throughout this course. Then you'll see how we can import them and call them and we're going to use Scss for that.

Next is this bootstrap.js file. One thing I want to remind you of is that the React ecosystem and how you can build React applications is very flexible. It's the reason why React is technically not even considered a framework. It's more of just a JavaScript library that allows you to implement, the ability to build applications, to render items on the page, to manage Reactive state.

So because of that, what we have here with this file system might be very different than another React application that you've worked with, because React really lets you do anything that you want.

If you use a different app, so say you get a job after you go through this course, or after you go through the boot camp, and you login to see the code for the application you're working on and you don't have a bootstrap.js file, or a vendor.js file that's perfectly fine.

Whenever you're building out your own applications, there are quite a few ways of implementing the structure. So with bootstrap right here, what we're using it for is to make this the start of the application. So this is kind of like the entry point for everything that we're going to be building out.

You can see we import React, this is where we have our other Redux imports here, which we'll get into later. We have our router import and you may also notice we're importing our app component. That's the same one that we just looked at and we'll walk through how you can import direct files later on quite a bit more, but for right now you can see we import app and then we pass in the path to that app file.

Then once again, another item related to Redux with those reducers and the createStoreWithMiddleware, also something else related to Redux. As you may tell by now, Redux is a pretty big system, so there's a lot of configuration items related to it. So I don't want you to be intimidated when you see these long function names or variable names, like createStoreWithMiddleware.

We'll talk about what each one of those represent, we're going to spend a lot of time with Redux. Then we are importing our main style file right here, this gives us the ability to have a single entry point for all of our styles.

So this is where we can import one file, and then we are going to make this main.scss file, we're going to make that the entry point for all of our styles. This is going to not actually really host any of it's own styles, it's simply going to import other style files so that we can manage it that way and it makes the code a lot easier to read.

Now, moving on down the line we have a main function. This is where we're starting up the React application, we're saying that we want to have React dom, which is saying that we are using React dom which means it's going to be in the browser.

The reason why we have the word dom here is because if you were wanting to build out a React native mobile application, you wouldn't be using ReactDOM, you'd be using a React native library. So when you see the word ReactDOM, that means that we're using an application, or we're going to be building an application that is going to be rendered in the browser, not on a smartphone.

That's the reason why they have that different naming. That's all it means is it gives us the ability to build web applications. Then inside of here, these items are ones we'll cover later on. A provider that's related to Redux, BrowserRouter is going to give us the ability to create custom routes for our application, then, we are importing the app.

Now the syntax, if you've never seen it before, may look a little bit weird. So we're going to walk through that when we talk about JSX. It gives us the ability to write code that looks like HTML, but React's able to take that, wrap it up, treat it like JavaScript and then render content on the page.

One thing I do want to point out is we have two document lookup. We have a document querySelector and then we have document addEventListener.

These actually are just pure JavaScript, they are not related to React at all. But what they do is they give us one point where we can point to the HTML file that's our entry point and this is how we slide in all of our React application.

So you see where it says .app-wrapper? All we're doing here is we're using a regular, just pure vanilla JavaScript selector and we're saying I want you to find a class on the page called app wrapper. Then I want you to slide all of this React code, this JavaScript code, right inside of that div.

So where exactly is this file? Well, there are a few ways you can go finding it. You could just perform a search, but if you just go to static and then index.html, then you can see that we have our entry point right here.

This is technically, and I know this may seem weird, but every React application you're going to see is going to have a single entry point, it's just a plain html file. You can see we have a class here called app wrapper. So the way that React works is it loads up this bootstrap.js file, it calls ReactDOM, it loads in all those libraries and then it looks for a class called app wrapper, then it attaches our files, it attaches all of our components directly into this html file.

So technically, the entire application is in a single page. I know that may sound weird, especially because there are some React applications that are gigantic. You have Facebook, which is a React application and it has a million lines of code. Technically though, it's still one file.

So whenever you have these what are called single page applications, this is the way they work, where they give an entry point and then they dynamically slide in and out the JavaScript code just like it's doing right there, so that's what the query selection does.

Then document.addEventListener, this is giving us the ability to see when the page has loaded and then it injects main here. If you've never really gone through a React file, then some of this may seem very confusing and that's perfectly fine. I don't want you to feel like you need to understand the role of each line of code yet.

What I'm wanting to do and the whole goal is that I'll give you a high level overview, just so you can kind of see what the files are and what they do. And as we go through the course, we're going to dissect every one of these elements until it is perfectly clear on what they do.

Now, we only have one more file to go through in this video in the source directory, and it's this vendor file. It's pretty small and we're not really going to make any changes to this throughout the course. It provides what are called polyfills and vendors.

We're going to talk quite a bit about babel, we're going to see what babel does and the role that it plays in JavaScript applications. So what all vendor does is, it's going to load up a polyfill and what that means is it fills in anything that a browser is missing.

So as great as browsers are, like Chrome, Safari, and all of the modern browsers out there, they still only interpret a small percentage of modern JavaScript code. What a babel polyfill does, is it looks at the browser, and then it takes the JavaScript code and it converts it.

So even our modern syntax that usually a browser wouldn't be able to recognize, it converts it into something the browser can. So that's the reason why we're able to write in a syntax like we do and we don't have to write this entire application using pure vanilla JavaScript.

In review, that is the full analysis of all of the files and the code inside of the source directory.