In this video, Emmanuel Henri creates the new entry files needed and adds a brand new index file into a new public folder. He also creates an src folder and adds App.js and index.js.
- [Instructor] So, in any React project, we need three major files as the entry point for the application. The index.html, the index.js, and the app.js, so let's create those files. So, the first thing I want you to do is exit out of Visual Code or your editor, and then open the legacy project and then the example project. Make sure you create this in the legacy project, so what I want you to do first is copy and paste the public folder here, so copy that folder and paste it in the legacy project, like so, and then you should have those three files.
You can delete the manifest and the favicon. We won't need those. And then in the app folder, rename the index, so we have the point of reference, so basically this is going to be our point of reference when we start dissecting the HTML into components. We still need it, so we have that example, but we won't need it for the actual React applicaton, so grab that file, now put it in the public folder.
Keep in mind, at this point, we're breaking the legacy app, so it's not going to work if we don't keep an index in the app, so let's go ahead and keep one just in case we need to go back here and reference it, like so, and then just remove the 2 like that, so at least we have a reference here, and then we have our main HTML here. Okay, so let's go back to VS Code now, and in VS Code, by clicking on the public, you should have the main, this is the React one, so let's remove quickly, and I'm going to do that quickly.
You don't need to remove that code. All the green code is just comments for you, but I want to remove it just to make it cleaner for us to take a look at what's in here. So, basically, this is the exact same thing as what we would need for any React application, so let's just write something. Legacy React, so now we know that this is now the legacy React code. Two things that you're going to need in order for this to work with Bootstrap.
We're first going to need a CDN for jQuery, and we're going to need a CDN for Bootstrap itself, so let's go ahead and grab that, and the best way to find CDNs for those is to do CDN Google jQuery, and then if you go into the hosted libraries, you should find, on the right, a jQuery one, and then just copy the latest code here, and I'm just going to copy that and close, actually, let's copy the whole thing, and you want to put that below div root, and you need to make sure you put jQuery first, and then let's go back and do the same search, CDN Bootstrap, and click on Getting started here, and you should have the CDN somewhere in here, so you need to also grab the CSS, so grab the CSS first.
Let's put it at the top where we have our link files here. Oh, and another trick in VS Code, if you often put some lines that are going way above the actual screen estate, there's a little tool here that is capped Wrap, so Toggle Word Wrap on the View, so that will make multiple lines out of your single lines, and make sure that you have everything on the screen, so that's a little trick that I sometimes when I want to see the entire code.
All right, so let's go grab the actual script files, and this is the one that you need. And you want to put this after jQuery, here. Okay, so we got that file. Now we need the index, and we need the app.jss, so now you need to create a folder in legacy called src, so right-click on legacy, New Folder, src, and inside of that folder, you create one that is called index, so create a new file, right-click, index.js.
That is okay. We're actually going to do this later, so just ignore that warning for now, and then right-click again, and then create a new file called App.js. So, what we'll do, we'll basically copy the main code for this, so go in the example, go in the src folder, then grab the index, and grab everything but the registerServiceWorker, and we'll remove that like so.
Copy that, go inside of your index in the legacy, paste, and remove the index.css, like so, and remove the register worker here, like so. And save that, and then go inside of your App.js, and we'll create our first component here, so import React, and component, by the way this is one of many ways that you can extend a component.
You can literally do this, and I'll show you the two ways to do that, so from React, like so, and then class, create a class App, and then extends, so one way to do the component is to do React.Component, or the second way is to literally remove React and import it here, like so, and you should be fine like that, too.
Both ways work. And then let's do our render method, and let's return, and let's return a simple div, and let's do a h1 so we can see something on the screen once we run our application, Welcome to React, and let's make sure we export.
Let's make this... Perfect, and export default App, like so. You could have done something also where you would have export default here. It depends on the styles of who you work for and your own styles. Do whatever you think is best for you. Save this, so now we are loading root here, which we are now passing App, and we are loading App and our rendering, Welcome to React, so we should be fine to start our legacy application and have React running, so let's go ahead and do that.
Let's make sure we are in legacy, and do an npm run start, and our application will be running, and we should see Welcome to React in a few seconds, so now we have an entry point to our React application, and we are ready to code our components using the legacy code.
- Creating a new React project
- Installing and working with React Developer Tools
- Dissecting a project into components
- Setting up the state with static data
- Adding and finalizing CSS in components
- Setting up and leveraging Firebase
- Standard code best practices
- Installing and setting up Flow for type checking