In this video, Emmanuel Henri decomposes the current project into several components, and adds them to the main app.js component.
- [Instructor] So now it's time to do some work around dissecting our plane website into components, while maintaining as much of the old styles as possible. So let's get to it. The first thing I want to do is kind of clean our working space here. So we have the Reacting symbol, which we're not really going to use anymore, and then our Legacy app and the exercise files. So let's clean that up a little bit, so let's close the folder like so, and open new folder, and then just select from Desktop the Legacy Project, like so.
Okay, so we're good. The next thing I want to do is go inside of our source folder and create a new folder called Components, and then drag and drop the App.js inside of Components. So if you have your application running right now, let's do that right away. Control, Grave or go to, or go to View, Integrated Terminal here and do 'npm run start'.
There's going to be an error right now, so the application's going to error out because right now Index is calling App.js, but not in the right folder, so let's make sure we fix that. So right now Index is calling App... By the way, that warning is fine if you see it, we'll fix that once we get to Flow. Right now it's calling App from the same source folder, so we need to make sure that now it's calling from the Components folder, like so. And now that should fix it.
Let's take a look at the Legacy App here. What we want to do now is dissect this particular html into multiple components. The way we're going to do this is have our Navigation, which is here, as one component, we'll have our Jumbotron here as a second component, we'll have this particular area as a Feed component, and then inside of the Feed, we'll have Feed Items like so. The footer here will be basically LdApp.js.
So let's go ahead and do that, and let's close that. So we need a couple of components. Right click, New File, and the first one we need is the Feed. We also need for the Feed the FeedItem.js. We need the Jumbotron.js. And we need finally, the Navigation.js and what we'll do at this point is create stateless components and basically insert the code from the source file.
So if you go in the public file and go to index.2 that we kept for references, this is the code that we're going to use inside of our components. So we'll create a component of Navigation with this code, and so on and so forth, the Jumbotron. And we'll use this as a Feed Item, and we'll use the footer in the App.js. Let's go ahead and create some of that code. So the first one that we need to do is the Feed, and we'll create basically a stateless component for this one.
So import React from 'react'. And then on this one we'll import FeedItem from './FeedItem', like so. And then we'll create a stateless component, which is primarily a function, like so, (props), and we'll return, a <div><div>, and that <div> will have <FeedItem />.
So my ; here, let's make sure we export this particular file, so export default Feed;. End of the line, and save. So copy this code, and let's go in FeedItem, and paste it. And let's remove the import that we don't need, let's make sure that we change Feed to FeedItem. You can do that by doing Option click, where you want to do multiple selections.
And then for the actual code here, we'll grab from our reference file. So let's go in index.2, which we already have open here, and grab the marketing code here. So let's go ahead and grab this code specifically for the marketing, and let's put it inside of our component here. And let's make sure that we rearrange this properly.
And paste it inside of our Jumbotron. And make sure that we change FeedItem to Jumbotron. And you can do that by selecting Option click. Then inside of here, we'll grab the Jumbotron code, like so. And paste it instead of the marketing stuff here. So let's make sure that our indentation is okay, like so, and let's change all our class names.
And I'm doing this by selecting Option click, and do name, class name, like so. So we got our Jumbotron done, save. Then do the Navigation, and let's copy and paste our code here. Let's do that for Navigation. Option click to select, and Navigation, like so.
And then let's grab the code for the Navigation, and the Navigation is primarily the header here all the way down to there, line 14-21, copy that, and replace that code here. And let's make sure our indentation are okay, like so. And again, replace class. But there's a quicker way to do this, let's do a Find and Replace. So if you click here, if you do Command+F, and then click on the arrow here, you can replace all the classes to class name, and then click on this to replace all the class names.
So let's make sure everything is okay. Class name, class name, class name, class name, yeah, we're all good here. And let's save that, let's close this here, let's save that. And the last piece that we need to update is the App.js. Let's open it. And in the App first, we need to import a few things, so let's import Navigation from Navigation, then let's copy this line.
And here we need to import. So I'm doing Option click to select, multiple, Jumbotron, and then we need to also change this one to Feed, so Option click, Feed. Then here in the App, we need to grab a few things. So from the index, from the header, so line 14 on index.2 all the way down to this line here, so let's grab that and scroll up to the header.
You can delete that. And then the code that you need is everything from the <div> here to the <div> there, so let's go and copy that. And replace this code here with what we just copied. And let's make sure our indentation are correct. We don't have extra space, and let's fix this indent as well. And this is where we're going to add the components.
So first, Navigation, then the Jumbotron, then we need, and this is not right, Jumbotron, and then the Feed, like so. So save that, we can save that, too. Okay, close that. Let's go back to our application.
Perfect. So now we've successfully dissected the original project into several components that we'll be able to easily maintain, debug, and test in the future. If you take a look at it right now, we have our Navigation, we have our Jumbotron here, our Feed, and then our footer. So we are getting very close to the original project, and that is with very little effort in those styles from our main .css file applied. Great, so let's move on.
- 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