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.
If we go inside our public folder, we have the logos and favicon which we saw in the React page. We also have
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
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.