Introduction & Prerequisites
Alright then. So there's a few different ways to get started with React, but the easiest way in my opinion is to use a tool called Create React App. Now this is a command line tool which generates a starter React project for us, and it comes fully baked then with all of the setup and config that we need like Babel and Webpack. Now we need those to compile our React code and JSX later into production-ready JavaScript. And without the tool Create React App, we'd have to configure all of that ourselves.
So we'll be using Create React App to create our starter project.
Now to do this, you need a modern version of Node installed on your computer, ideally version 5.2 or above. And that's so we can use npx, which comes with modern versions of Node, to run the Create React App tool. Now you can check that you have Node installed on your computer by opening up any terminal. On Windows, you can use Command Prompt by typing cmd and opening that up. I'm going to use Windows Terminal right here and then type in node -v and press Enter. Now if it shows you a version number like it does on mine, then you have it installed. If you don't see it, you need to install it. And also if you see a version less than 5.2, you also need to install the latest version instead.
So to do that you need to go to nodejs.org. I'm just going to open this up in a browser over here and you need to download the current version right here. So go through the installation steps and then you can carry on with this course.
Creating the React Project
So let's now set up our React starter project. The first thing you need to do is navigate into the directory where you want to create this project. So to do that, I'm going to type in cd for change directory, space. Then I'm going to go into the Documents folder, then I'm going to cd into a folder called tuts, and this is where I'm going to create my project.
Now to do this we say npx create-react-app and then the name of our project. I'm going to call this dojo-blog. And this will then run this code which is on the internet, and that's what this npx tool allows us to do. That's why we need Node. And it runs this Create React App and it installs a new React project called dojo-blog for us in this location. So press Enter and this is just going to take a couple of minutes to create.
Project Tour: Public Folder and node_modules
All right then. So once that's done, we can cd into the new project directory, which is called dojo-blog in my case. And then I'm going to open this up in VS Code by typing code . and that opens up VS Code in my current directory right here, dojo-blog. So the new project.
So this here my friends, is the starter project created by Create React App. So when you first look at all of this, if you're new to React and you open these different folders and you see all of these different things, you're probably thinking, "Um, looks a little bit complicated." But believe me, once you start working with React, it really is pretty simple.
Now I'm going to give you a brief overview now of what everything is, but don't worry if you don't understand everything 100% right now, because as we start to work with React more and more, it will just kind of fall into place. But let's start with the node_modules. This is where all of our project dependencies live, including the React library as well, and any other package or library we need to install for the project later on is going to live inside this folder. Now, you don't really ever need to go inside this folder, just know that it's there and it's storing our dependencies.
Next up, we have this public folder, which is where all of our public files, public to the browser, are going to live, including this index.html file. So this is the one HTML file that is served to the browser, and then all of our React code is injected into this one file right here, inside this div with an ID of root. Again, you probably won't come in here much, but if we do, don't worry, I'm going to show you how we edit things later on.
Project Tour: The Source Folder and Cleanup
Alright, so next up we have the src folder. And probably 99% of the code that you write when you're working with React is gonna go inside this source folder. So all of our React components that we write are gonna live inside here. And there's already one created for us called App.js. So this is what a component looks like at first glance. We're going to come back to this later on so I don't want to spend too long here. We also have some CSS files.
We have a test file, which we don't actually need; it's beyond the scope of this tutorial, so I'm going to delete that. We also have this index.js file. And this is the file that kind of kickstarts our application. So this file is responsible for taking all of our React components and mounting them to the DOM. You see right here, it's taking our App component, and it's rendering it to the DOM. And it does that in that root div. Remember if we take a look at this again, we see this has an ID of root, so that's where it's rendering our App component, which is over here, to the DOM.
All right so now if we move on, we have a logo which is currently being used inside App.js, inside that component. This one is reportWebVitals; it's kind of like a performance file which we don't really need either, so I'm going to delete that. And because we've deleted that, I also need to delete this import right here inside index.js and this thing down here. Okay, so make sure you delete those as well.
All right, so at the end we have setupTests, which again we're not going to cover in this tutorial. It's kind of beyond the scope, so I'm going to delete that as well. All right, so inside the source, that's where most of your code is written—all of the different components. And the index.js file, this is what kickstarts our app. And by the way, this thing right here, React.StrictMode, that means that React does additional checks during development and it gives us warnings down in the console if there are any warnings to report.
Project Tour: package.json and Recap
All right. So that's the source folder. Again, we'll come back to all of this later on. Now we have a .gitignore file, just in case we're using version control with Git. And then down here we have these package files. Now this one right here, package.json, does a few things. First of all, it lists all the dependencies of the application. So anything our project depends on, which all live inside node_modules, remember? So right here, these are the testing libraries. We have React, React DOM, React Scripts, and Web Vitals. So there are the dependencies. And then down here we have some scripts as well.
So we can use these scripts to do things like preview our application in a browser on a local server, or build our application for production, or test our application, or eject the Webpack file. Now, I'll show you exactly how to do this in a second. This is used to build the application for production, and these are kind of beyond the scope of this tutorial. So don't worry too much about them.
So that's kind of like the project overview. And again, please do not worry if that kind of went over your head. It will all become more clear as we progress through the rest of the playlist.
Running the Development Server
So now what I'd like to do is show you how to take this starter project and preview it in a browser, which is going to be really important as we start to develop the project. We want to preview as we go along. So to do that, we need to open up the terminal. So go to Terminal and click on New Terminal. I've got a shortcut which is Ctrl+T. And then down here we're going to run one of those scripts we just saw. And it's this one right here. So to run this script, all we need to do is say npm run and then the name of the script, which is start.
So I can come down here and say npm run start. That is going to spin up a local development server so that we can preview the web application in a browser. And once it's complete over here, we should see what address it's being served. So it's this one right here, localhost:3000, and that's just opened up in a browser over here for me. So this is the starter project. And this right here, this content is coming from that App.js component we very, very briefly saw. And it's all been injected into that one single HTML file inside the public folder, and that's what we're seeing here.
If we inspect, then we're going to see that div with an ID of root. Let me just get rid of those a little bit and scroll up. And we can see this div right here with an id of root. And inside that we have this div with a class of app. So this is the app component that's been injected into this div. Okay so let me just quickly show you that. If we go into the source folder and then go down here and open up App, we can see this div has a class of app. We see className, don't worry about that, we'll talk about that later on, but essentially that means an HTML class. And that is the div that's been injected into the HTML file. Now remember, it's the index.js file which is taking this App component and it's rendering it to the DOM inside that root element.
Anyway, this is a live reload server, meaning if we make a change to our code inside this App component, for example, if we then save it, it's then going to auto-refresh in the browser, which is useful.
Managing Dependencies with npm install
One last thing I quickly want to return our attention to is this node_modules folder right here. So this contains, like I said, all the project dependencies, and it must be present for our project to work. Now, if I was to delete this folder right here and then try to start the application, let me demo this. I'm going to delete it, which might just take a second or two to do because it is very large in file size, and currently Visual Studio Code is not responding. That's always a good sign. Let's just give this a second. Okay, so that took a minute, but now it's gone.
And if I was to try and run this in a browser again by typing npm run start—remember this is the command to spin up that local development server. Now notice we get all of these errors, and that's because we no longer have the node_modules folder, and all of our project dependencies live inside this node modules folder, including React itself.
But sometimes when you download a React project, like from GitHub, then this node_modules folder is not going to be present. And that's because the node_modules folder is huge in file size. And it contains the react.js library and many other JavaScript dependencies as well. And if we left it in our projects when we uploaded or downloaded it to and from places like GitHub, it would take a much longer time to do. And for that reason, if we upload or download React projects, we never include the node_modules folder. So if it's not present right here when you download it, how do we get it once we have the project downloaded? How do we re-get that node_modules folder?
Well, all we have to do is come down here and type in our project root directory npm install. And what this will do is look inside the package.json folder, which remember contains all of our project dependencies, and it will install all of them. And it will create that node_modules folder, which we can see now again, and put all of the dependencies back in there. So it installs all of those for us. So that's why the package.json file is so useful. It lists all the dependencies that need to be installed if we download a project. Okay, and then once this is done, we can then run the project again by using npm run serve, and it should work. So if I try this again, npm run serve. Now hopefully, fingers crossed... oops, we get an error. It's not npm run serve, sorry, it's npm run start to serve the application. And now this should work. Yep, it's starting the development server, and pretty shortly we should see the address localhost:3000, and I can see it right over here.
Conclusion and Next Steps
Okay, so what is the reason I'm telling you this? Well, it's because the course files for this tutorial series are hosted on GitHub, and they won't include that node_modules folder if you download them. So if you do download them, you have to run npm install down here in the terminal before you do anything else in order to get that node_modules folder back.
So I know this was probably a pretty heavy tutorial which covered quite a lot, but if anything did go over your head, I promise you as we go on, it's all going to click into place. So next up, we're going to take a look at components, including this one right here, and how to create templates in those components.
