What that's going to do is it's going to help give you a frame of reference for understanding exactly what the end goal is and how React allows you to build these powerful interfaces. And if you've come from a different programming language and a different type of web frameworks such as Rails or Django or some type of framework like that. React is a very different way and creates a different methodology for building these types of systems and so that's what I want to go through in this guide. I want to analyze exactly what the architecture is. I am here on 'Reactjs.org' and this is the home page for React.

and I want you to be pointed out to a very specific part of the site if you notice right here right under the name react. It says a 'Javascript library for building user interfaces'. Now I wanted to state this right at the beginning because React is many times called a framework and the reason for that is because React is so powerful and people use it as a framework. However, React is also very lightweight and because it's so lightweight it's technically a Javascript library. It gives you the ability to build out applications very similar to a framework such as Angular or Rails or Django. However, it is so lightweight that it's technically called a library. So that is just a little point of clarification in case you weren't sure of the difference or if you had heard React called a framework.

Now the other thing that I want to point out that React is component based. So what that means is that React organizes code bases based on components and I know that is probably about as clear as mud. So let's walk through an example of how that works. So React is used and is actually developed by Facebook. So this is one of the best examples in case studies on how React is used in the real world.

So right here I'm on the dev camp page on Facebook and I want you to look at this page and see how it's organized and I don't really mean from a UI perspective. I more mean look at each component on this page and think of it like it's its own unique entity and it's a reusable entity. So right here you could see this thumbnail.

Now this thumbnail is actually a component. Each one of these elements such as the sidebar.

This is a component and most likely this link is a component and their reusable so you can have your home component here. You're about component here and it's probably one component called something like sidebar link but it's a reusable component that each one of these elements can utilize in order to be rendered on the screen. So every one of these spots on the page is what is called and React a component. So this little build your business banner here. This is a component and I can click and close it.

So I want you to start developing the mindset of instead of building Web pages which that is the way that you would traditionally build an application where you have these series of HTML files and you build them out and you add the content that you want in each one of the files. So if I go and look at a different type of application. So if you went through the Dissecting Rails course that I have and you saw how we built how this portfolio you would know that each one of these pages is its own individual HTML page. So here on the home page, this is a home HTML page.

If I click about me this is the about page if I click on portfolio right here this is going to have the portfolio items. So each one of these is its own file. So instead of being a component-based system what we have here and this is using the Rails Framework. This is where you have a large number of files and then whatever content you want on the page is whatever you want to put inside of those files. Now I know that if you have never worked on a component-based type of system it may not seem to be a big difference but once we actually get in and we start building out the system you'll see how this is a completely different way of building applications. With the way that React works is we don't have all of these HTML files, in fact, and this may surprise you but we only have one file.

So all of the React apps that we're going to build and all of these apps that you see they are in a single HTML file. Then the data and all of those components simply slide in and they're used and rendered on the screen whenever the application calls them. And then when they're not needed they simply get knocked off the stack and then whatever else a user wants to see is what pops up. Now let's take one more example and this is going to be the very first app that we're going to build out which is a Mad Lib application.

Now, this is a single HTML file and right here you're going to see that we're going to have a couple different components here. So a Mad Lib if you've never heard of them before it's a game I used to play it when I was a kid where you simply are asked for all of these different elements like adjectives, nouns, celebrity names different things like that. So I could say funny right here. And then for celebrity I could type in someone's name and I could go through the whole thing and then if I hit submit it generates a story and whatever I typed in gets slid right into the story.

So the way that the components work here is we have a component which is this form then we have another component which is the story and the content self and much of this, if it seems a little bit vague, don't worry we're going to go through every single line of code until it makes sense. But I wanted to give you a preview of the architecture because I think that it will help a lot. The further we get into the program of understanding the methodology. Because if you come from any other type of web development type of background then this is going to be very different. Instead of building out all of these various web pages and caring about that now we're going to start to get very detailed very granular and we're simply going to care about components and then we're going to care about when we want to have them shown on the screen. So in summary that is a high-level overview of the architecture and also the strategy that we're going to have as we build out React applications.