Your test project - React.js Tutorial

- [Instructor] If you took my course, From React to React Native, the project we'll use in this course to test and debug will look familiar, as it's the same app. If you don't have access to the exercise files and didn't take the other course, no worries. You can pretty much take any project you're working on and apply the same concept we'll be exploring here. If you do have access to the exercise files you'll need to do the following steps in order to get this project up and running. So I am on my desktop, and I'm going to create a brand new folder right here. So right click and then create a folder. You can do the same on Mac and then call this testing. And then I'm going to go into the exercise files and then click on Resources and open that folder here as well. And basically copy everything that we have in the Resources folder. So copy that, so Ctrl + C on Windows, Command + C on Mac, and then paste it into this folder. Once you have this, all you have to do is open this in your favorite editor. In my case, I'm working with Visual Studio Code, so I'm going to right click and Open with Code. And if you're on a Mac, you can simply drag and drop that folder inside of Visual Studio Code. Once you're inside of Visual Studio Code, you can go ahead and open up a Terminal. So you can click on Terminal, and then New Terminal. And then make sure that you are in the root folder of that project. We're going to do npm install, or I, shortcut for install. Okay, so when you have all the dependencies installed, let's explore a little bit what this project is. So I'm going to minimize this a little bit. And then let's take a look at the source folder. So the source folder is where you have all the files. So you have the regular index, which is a React application, and then you have the index.tss. So in the data folder you're going to have a json file, which will have all the data that we're going to need to run this application, and we're going to have a static file as opposed to persist with a server or database. And then you have the components, and inside of the components you have listings, a grid, and a single. So basically inside of the app.js file, we run a grid of single items or single components, which we're going to see in a few seconds. I'm going to run the application and you'll see what I'm talking about. And this is pretty much standard React code that we're going to use to test and debug. So if we do npm start, this is the application that we are going to test and debug. So for your information, if you didn't take the course that I just referenced, this is a React application built from the ground up with Create React app CLI command. The data is a static json file created in the data folder as I explore earlier. Okay, so now we have our application properly set up and ready to go.