Front page

[00:00 - 00:09] The front page. We have now prepared everything to create our first page. Single post. We'll begin by creating a component to render the news posts.

[00:10 - 00:18] This component will display a full post preview consisting of an image, a title and a short text description. Let's define the styles for this component.

[00:19 - 00:31] Inside of the components, create a new folder, post, and there create a file, post, card, style.ts. Here you want to have the styles for the post card.

[00:32 - 00:39] You can copy the contents of this file from the attached code example. In this file, we'll have the styles for the card itself. It's going to be the container element.

[00:40 - 00:56] It will have the hover style that will add box shadow, change the text color to black, and slightly move the element. Then we'll have the styles for the figure. That's the wrapper around the IMG, the image that we'll have inside of this, inside of each card, and the title.

[00:57 - 01:06] The excerpt will be a wrapper around the short post description. After you have the styles, create a new file, post, card, tss.

[01:07 - 01:19] Here we'll want the link component from next link. Basically, the whole component is going to be wrapped into a link so that each card is clickable.

[01:20 - 01:38] We also want to import card, figure, title, and excerpt from the post card style. Create the post card component, expert const, post card. We don't need to define any props, as this component for now will have all the data hardcoded.

[01:39 - 01:51] Return, we want to render a link, for now hardcode the ref value, post example. Inside of the link, we'll render a card with the figure that will wrap an image .

[01:52 - 02:03] The image should have alt, post, photo, and the C, image, one gpeg. After the figure, we'll have the post title, saying post, title.

[02:04 - 02:13] And below the title, we'll have an excerpt, as the hardcoded data, add the lore m ipsum text there, or whatever you like. There are a bunch of interesting things regarding this component.

[02:14 - 02:22] We need to pass the pass_grf property to the link. It will tell next to push the ref_prop further to the child of link.

[02:23 - 02:33] This is because we pass a card to the link instead of the a element. Card is a styled a element, so it is treated by link, not as an a but something else.

[02:34 - 02:43] Without this prop and a element, doesn't get the ref attribute. If you look at the postcard style, you will see that the card is styled a element.

[02:44 - 02:48] Let's go back. And next thing that we define on the link is the ref.

[02:49 - 03:01] It basically tells where should we redirect after the user clicks this element. Create a new file, index TS, and export everything from the postcard there.

[03:02 - 03:11] Now let's define the new section. Inside of the components, create new folder, section, and there create new file style.ts.

[03:12 - 03:23] The styles for this element you can find in the attached code example. From there you will need the grid, which is a styled div, that will basically define the section grid, in which we'll show the postcards.

[03:24 - 03:29] You'll need the title, which is styled h2, and more link. Stiled link element.

[03:30 - 03:43] Create the section file section TSX. Here we'll define the section props type section props equals an object with field title of type string.

[03:44 - 03:57] Now define the section component, export, const section. It is a functional component that will receive a title from the section props, and it's going to return a section element.

[03:58 - 04:04] We're trying to use semantic HTML here, section, and then here we'll render the styled elements. Let's import them.

[04:05 - 04:14] We'll need grid and title from the style, and we also need the postcard. Render the title, here we're under the value of the title prop, and then we'll have three postcards.

[04:15 - 04:23] We don't need to pass any props there because for now all the values are recorded in them. Create the index TS file and export everything from section.

[04:24 - 04:39] Next we want to define the news feed that will contain the sections. Create a new folder, feed, there create a new file, feed TSX, import section, from section, and export const feed.

[04:40 - 04:54] It's going to be a functional component that returns a fragment where it will render three sections. One section with title, science, another one with technology, and one with arts .

[04:55 - 05:09] Create the index TS file and export everything from feed. Now let's update the front component inside of the pages index TSX, remove the hello world, and render the feed instead.

[05:10 - 05:23] Now let's launch the app, yarn, dev. If you open the site in the browser you should see the news feed with a bunch of sections containing the posts.