How to use React in a web project

- [Instructor] Now that we know how React works, let's take a look at some of the ways that you can work with projects. Now, basically, there's two ways to work with React. You can add React to an existing website, and to do that, you can go to this installation page on their website. And it gives you all the different options. The first option is to just add React to an existing page that you're working on. So this doesn't require all the build tools that we've been working with; that's more of an advanced feature and we'll talk about it in just a minute. This is the simpler way of using React if you've got an existing page, or maybe you have a Bootstrap site and you want to run some of React's feature. The way that you do this is by using a CDN link, a content delivery network. It's basically a place where you can receive the JavaScript for different projects without having to download and install them into your local machine. So to do this you can find some great sample source code right here. So if I click on this other link, you'll see that there is a sample page that shows you where to put the CDN links and then it asks you to create the components on a separate file and it gives you a little sample of the basic button JS file. It's a little bit different that the code that we've been using. First of all this particular example happens to be class-based React. And you can see down here what you would normally find in the main dot JS file that we have been using. Now if you do scroll down, there is a comment here by this gentleman who shows you how to do this with a functional component, which is more of the syntax that's considered more modern that you can use on your project. So this is sort of the way that I would do it if I was adding React to a project. Now most people don't really do that, they just use React to create applications, and you can see a link to this code sample that I was just showing you right there as well. Now the other way that people create applications with React is with this utility called Create React App. Now, to use this, you're going to need Node JS. So make sure that you have that installed on your machine and that it's the latest current version or the one recommended to most users. Either one I think will work fine. And then you can use the Create React tool which has its own website. So let's take a look at that. So this is the Create React App website. Now this is what I'm using, so I'm going to show you that in just a minute. But this is kind of the most popular way to create a React application. Basically to create a project, you run this command right here and it's going to install everything for you. So let's go ahead and turn over to Hyper and I'm going to make sure that I'm on the desktop just to make things easier to find. So you could use any terminal application, PowerShell on a PC or a Git Bash on a Mac. I'm using Hyper, but you can use the macro s terminal and then what you want to do is run this npx command, npx is part of Node js. And then you issue the Create React App sort of option. And then you specify the name of the application that you want to create. So you can call it whatever you want. It's calling it my app here. And when you hit return, it's going to ask if you want to install the Create React application and you're going to say yes here. And this is going to take a while to install all of the modules and all of the package dot JSON files and everything else that React needs in order to generate a simple sample application. So once you finish installing this you should find this file on your desktop and you can see that it installs a bunch of stuff. Now this is pretty similar to the project that we've been using. Notice that there is a public folder with a bunch of files as well as a source folder with app dot js app css. Pretty similar to what we had when we first started this project, an index dot JS file. Now there is a tests and web vitals that we're not using in this project because we're not using Create React App, we're using something a little bit more modern but that's basically how this works. After you do this installation, you do a change directory to your application and then you run npm start. And that runs basically a live server using an application for a bundler called Webpac that manages all the creation of the application. And then if you try to build your application it'll also manage the building of the final application that you can use on your website. But I'm not using this, I'm using something as I mentioned a little bit more modern. So what I'm using to create my application is called Vite and it's considered a little bit more modern. It has a feature called HMR, which is Hot Module Reloading which allows you to quickly build new features. Basically when you create or modify a component, instead of reloading the entire application it just reloads the component that you have modified. So it tends to be a lot faster than Create React App, at least at the moment. And I think a lot of different module bundlers and different applications are moving to Vite. You might see Create React App moving to Vite in the future. Now, it also has built-in support for Sass out of the box. This is going to be particularly useful for this project since Pico css can be customized with Sass. Now you do install it with an npm command and then you use Create Vite at latest and then you add the name of the project. So let's go ahead and do that. We'll go ahead and pull up our terminal and I'm going to go ahead and paste that command in here. It's going to ask to install that package, just say yes. And here, unlike Create React App, it's not going to make all the assumptions for you. It's going to ask you a few questions. Basically, which framework do you want to use? I'm using React, so I'm using the arrow keys to move up and down. And then what version of JavaScript do you want to use? I want to use plain, regular JavaScript, not TypeScript. So I'm going to hit Return and choose that and then it builds a little project for you. Now, of course you can do cd my React and what I'm going to do is open this in Visual Studio Code. Now this is my desktop version of Visual Studio Code where I have code spaces open up right here. And I just want to show you what's in here because it's very much what we originally had in the previous project. We've got a index dot HTML document and it looks just like it did when you started the project although I had Pico css added in here in this index dot HTML file. And then if you open the source folder it has the index dot css, the main dot js and everything else that we have, the assets folder as well as a public folder, with just a file here. So this is, as you can tell, a slightly more minimal version of an installation than Create React App. Also, Vite gives you a lot of additional features not just support for Sass, although that is going to come in pretty handy when we're working with css in our project. And I think it's a superior bundler as well as a superior way to build your projects. If you look at the Vite config dot js file, it's just a very simple configuration that adds an additional plugin for React, but all that is handled for you. There's a lot more that you can configure in here. If you have any more questions about how to set it up just go to the Vite website where you can get all of the information on what else you can do with this fantastic frontend tool framework.