Part 2: Building HackerNews

In this section, you will create an interface that allows users to view and read the top 10 HackerNews articles. To get there, you'll need to build your own component.

Building and Using the ArticleLink Component

1. Create a new directory called components in the root of you project. In this new directory, create a file called ArticleLink.tsx. Paste the following code into the new ArticleLink.tsx file:

   import { Text } from 'react-native'
   import { useState } from 'react'
   
   interface ArticleLinkProps {
       itemId: number
   }
   
   interface Item {
       id: number,
       deleted?: boolean,
       type?: string,
       by?: string,
       time?: any,
       text?: string,
       dead?: boolean,
       parent?: number,
       poll?: number,
       kids?: number[],
       url?: string,
       score?: number,
       title?: string,
       parts?: any,
       descendants?: any
   }
   
   export default function ArticleLink(props: ArticleLinkProps) {
   
     const [articleInfo, setArticleInfo] = useState<Item | any>({});
     const [error, setError] = useState(false);
   
     return (
         <>
         </>
     )
   }

   If you're curious about the interfaces in this file, feel free to read up on them here. This file contains, you guessed it, a React component called ArticleLink that you are responsible for building on your own. This component can be imported into your App.tsx file the same way that GluestackUI components were imported in the previous workshop.

2. Using the URL mentioned in Part 0, implement data fetching and displaying for the relevant HackerNews story.

3. Your component should return a blue <Text/> element that opens the URL for its respective story when pressed. To accomplish this, use Expo Web Browser.

4. In App.tsx, use the .map() method to render multiple instances of your nes ArticleLink component instead of Text components.

5. Lastly, add a header to App.tsx that says "Top 10 from HackerNews".

After completing the steps above, you should end up with a page that looks something like this:

Clicking on any of the blue text should open the relevant HackerNews story.

This section is rather difficult - as always, if you need any help, feel free to raise your hand or come up to my desk.

Next up: Part 3