Run the React App and the React Project Structure

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 234,940 students

Lecture description

Run the React application set up in the previous video, and go over the project structure.

Learn more from the full course

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

10:33:13 of on-demand video • Updated August 2019

  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
English Welcome back. In this video the first goal is to run the react project and the second goal is to understand the react Projects structure. We can actually take care of goal one right away. In the command line fire npm run start in the portfolio directory. That's npm run start. All right. This is going to open up the project at localhost:3000. And look at that. You'll have a react application running right on your browser. Now how does this all work. Let's take a look at the key files in the project that are making this happen. First within your code editor, head to public/index.html This is the core index.html document of the web app. The browser receives this document and then uses it to display the content on the page. Now if you haven't worked with each html before. or as a refresher, html is a tag-based language where pairs of tags like the head and the body section and divs create the actual structure of the web page. So notice that there's this head and body section. Apparently the creators of html felt that a medical metaphor was the perfect analogy to destructure the web page. But seriously though it's actually a useful way to have things named because all the structure of the actual document goes in the body and then things that aren't necessarily there for the structure but important tags like links and meta information go in the head. All right head back to the application in the browser and then open up the developer console you can open up the developer console by doing a special click and then selecting inspect and immediately you're going to find yourself in the elements section. Now if you look around you'll find the elements section is essentially a collapsible version of the html file we just looked at. So there's the head and the body but if you go to the body section you're going to find that there's a lot more content in here than what we saw in the original html document within the actual project. Mainly if you look at the div with the id of root it has all these inner divs with a div class of app. The class of app has this whole header section with some paragraphs, an image, as well. That whole class of apps section is controlling what we're seeing in the actual document. If you scroll down to the bottom of the body section you'll even find it there's these script tags which point to JavaScript files. Now head back to the main H.html. document and if you look at the bottom of the html file itself you're gonna find that none of that content is here within the body section. So how did those divs end up within the root? And then how did those script tags end up within the body at the end? So the first question can actually be answered by looking at the src/index.js file. In here there's quite a bit going on. First there's two libraries imported. React and react-dom. The first react import sets up the file to write react code by importing global values and methods that are defined within the react library. And then the react-dom library takes care of actual application rendering meaning displaying the application on the browser itself. Now there's also this service worker bit which is kind of distracting at this point because it's really something that becomes useful once you have the application in other people's hands in production as it basically allows for offline usage of your application in case one of your users temporarily loses Internet connection. But there's one line I want you to really pay attention to. And that's the ReactDOM.render line ReactDOM. Render is a function which takes care of inserting react code into the html Now I'll say that again because the true importance of that statement can't be stressed enough for react applications. ReactDOM.render is a function which takes your react code and then inserts it into the html. So there it is. That's the answer of how the root div got all of its inner divs after all. Notice that this ReactDOM.render line targets the element with the id of root and then it's going to insert this app over here. Now you might find it a bit fishy that it's app part kind of looks like html with the tag arrow0like syntax despite the fact that we're in a javascript file. But this is actually still javascript syntax. It's called JSX and it's supported within react applications. Now the whole video to look at that in more detail next. All right let's take a look at the App.js code and what you'll find is that while we have an entire app component. And there's a lot more JSX this App.js file. But you'll find that its structure matches the divs that we saw within the root div in the elements section on the browser. There's that header in the paragraph the anchor tag and the image. Cool! So that's the complete answer. ReactDOM.render inserts this components JSX as HTML elements within the root div in the H.HTML. document. Now, components and react are pieces of the web application that can be reused. They UI have dynamic functionality etc. and they act like Lego bricks. If you put them together you end up making a whole lego house which is the react application so a react app is really a combination of a bunch of React Components. Very cool. Now one really nice thing about using create-react-app is that it comes in with a neat live development server so you can check this out by making a change to the app component and take out everything within the div instead let's have it output Hello react. So if you make that change and then save the file then head back to the browser. What you're going to find is that while it automatically reloaded those changes I'm going to go ahead and zoom in a bit and there's our new output of Hello react for the app component. And now the div with the id of root still has the div with the class of app but its output is now Hello. React. Nice! So that was our first bit of actual react code that we wrote ourselves. In the next video we're gonna write a lot more react code. But first let's do a quick exploration of the rest of the react project structure so that we know why each of these files and directories were included. So back in the code editor I'm going to start from the top and go down. First there's this node_modules directory which is where all the libraries of javascript code for the project get installed. In JS. We use modules as the terminology for packages and libraries. Now it can be kind of overwhelming when you open it up because of the sheer amount of code contained within. Luckily though you're not on the hook for knowing the code for every single one of these modules. After node modules, there's the public directory and we already looked at the index html file but then there's also the browser icon the favicon.ico file and then the manifes.json file which is for more immediate information about the project. And next we have the src directory which houses all the react code. So App.js, as well as styling with the index.css and App.css files. There's this .gitignore file which lists files that are unnecessary to include when storing this project in an online repository and then a really important one is the main package.json file. This file is a key to any javascript project. And the two main parts to look at are the dependencies and the scripts section. The dependencies specify what should go into the node modules library. Now even though there's only three dependencies listed here the node_modules directory will actually contain a lot more folders and modules because these modules here require their own dependencies to work. And all of those sub dependencies end up in the node modules directory as well. The scripts section over here tells us what commands we can run to fire up the project. In this case we have one to start up the project which we already did. The build script builds a production version of the project. The test prep run some tests, and finally for create-react-app there's this one time eject function and it essentially blows up the project into a more detailed and customizable version in case you want to dig deeper into the react app project. Finally there's this README file which provides directions for working with the project. Ok, so that covers the structure of the react project. You also know how the root div got its nested elements, based off the ReactDOM.render line in the index.js file. But beyond that there's still the looming question of how the index.html got those script tags to run the javascript. This touches on the subject of building and bundling which is a huge topic that we're going to spend a lot of time on later. Essentially when you run the react project the building and bundling process will package all of your javascript files into single compiled javascript code that you're html can now refer to. So create-react-app takes care of this for us. It's convenient, but because of that you'd be surprised, how many react coders don't have a complete accurate understanding of the concept. But not you. You're going to learn how to do that yourself from scratch in the next section of this course. In terms of building and bundling overall it's a deeper subject though. And before you get to that I think you'll benefit more immediately by writing quite a bit of real code and getting some react experience first. So next up let's look at react elements, JSX, and the React DOM.