Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.4 Create a File Listing

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework and JavaScript Projects Course with Tuts+. In this lesson, we will put together two components that will serve as the file listing of our repository. These components represent the content we would see if we clicked from the tab that corresponds the code. First, let's create files header.js Again we add our imports and our class all at once since we should understand how all of this works now. Then after that we add our row. Then we add a 16 wide column to hold the header. This will be a small message that provides a description about the repository. Then we add another full width column and inside we add a fluid width menu. Fluid width menus separate the menu based on the width property. The menu items will be added evenly to the menu. We add four menu items to the menu, after that add a file named fileListing.js Now I could have added the content from this component in the last one, but I chose to keep it separate so that we could keep our components uncluttered. Again we start our file off with our imports in our class. After that we add a row. This time we have a table inside the row. The first thing we add to the table is the table header. This has a header cell that stands three columns of the table. After the header, then we add the table body. Then inside the table body, we will add rows. These rows will in turn hold cells. We can think of these cells as columns. Then we add the first row. In the first cell we have the folder icon. We add collapsing to the cell so that it only takes up as much space as needed. Then the following two cells have text inside. The third cell text is a line to the right. Then we add four more rows to our table. The first two of the four we use the folder icon. Then the second two rows we use the file outline icon. After that save everything and go back to app.js. First we import the files we just created, then after that we add the two components to our grid. Once we do that save again, and navigate to the project in the command line. Then of course, run npm start. After the project compiles and starts, we should see our GitHub clone. Like I said, it's not a pixel perfect recreation, but it looks the part. The plan was not a perfect copy. The important thing is that you understand how to use the Semantic components with React, after that, the React project is complete. In the next video, we will start working on a project using Semantic UI and Angular 2

Back to the top