This video is available to students only

Reviewing our React Project

In this lesson, we're going to look at our React project and understand the role of each file

Reviewing our React project#

Now that our React project is set up, let's look at what we've got and what's responsible for showing what we see here. Let's go back to VS Code. As you can see, we have a client project. Now let's go in and look at the tsconfig.json file first. This file is only available with typescript React project and is basically about configuration of typescript in our project. On top, we have compiler options. With this configuration, it will be compiled to es5 version which is supported by majority of the browsers. You can change it to any other version if you want to, but it's not going to be as compatible as version es5.

Below that, we have the libraries that are used by Typescript dom, dom.iterable, and esnext. Then we have the typescript options below, such as allowJS or the strict mode which is set to true by default, which means that all the code we are going to write should meet the strict typescript criteria or it'll give us a warning, which is a good thing as we can correct the error as soon as we make it.

jsx is set to react-jsx which means we have type safety in jsx code as well. If you don't know what jsx is, it is javascript syntax of writing html and javascript together.

If we go inside our public folder, we have the logos and favicon which we saw in the React page. We also have index.html file which has to be there because we are going to make a single-page application and this is our single page. Inside the html file, everything is usual; meta tags which carry meta information about our project, link tag with icon file and manifest file — if you need to add fonts to your application, this is where you'll usually add them. We have our title, which you can change obviously. Inside our body tag, we have a tag which says you need to enable Javascript to run this app which will be loaded if Javascript is disabled. Finally, we have the div tag with id root; this is where our React application is going to live. Everything we write in our application will replace this div. Let's see how.


Open the src directory and go to index.tsx file. On top, we have couple of imports from React and React Dom. React DOM is responsible for rendering the React code which is what the users see on the browser. We have some internal imports as well from our index.css and our App component which we'll talk about in few moments. We also have reportwebvitals which is basically a performance measurement tool for React. We are not going to use it in this project, so let it be as it is. Below that, we have our render method from ReactDOM which takes our React Code and keeps it in place of the root div which we saw inside index.html file. This code is getting the root div for us using javascript. If you notice, our App component is wrapped around by React.StrictMode which makes sure we are not writing the deprecated React code. I am pretty sure the code we'll write won't be a deprecated one, but since we are going to use third party libraries as well, we can't say the same for those libraries, so it's better to take these off for now. I am not saying all the libraries will be out of date; this is just a precautionary measure. You can keep it till you see any warning. I'll take it off.

Start a new discussion. All notification go to the author.