- React
- Getting data using
fetch()
- API keys
- How to load environment variables from .env (see create-react-app documentation on this)
- How to
.gitignore
secrets (such as your API keys)
- Fork and clone repo
cd fetch-react-lab
- Get an NewsAPI API key here (Click on the 'Get API key' button on the top right)
- In your browser, make a GET request for the following URL:
https://newsapi.org/v2/everything?sources=hacker-news&apiKey=REPLACE_WITH_YOUR_API_KEY
(you should see a JSON response with news articles) - Create a new file in the project directory and name it
.env.local
. Place the following snippet in the file:
REACT_APP_NEWSAPI_API_KEY=REPLACE_WITH_YOUR_API_KEY
-
Note: Because this
.env.local
file contains secrets, it is listed in.gitignore
and will not be committed ingit
-
Run
npm start
- In
NewsFeed.js#componentDidMount()
, start by making a GET request to the defined URL usingfetch()
. Here's a short snippet to get your started. You can also useasync/await
syntax if you like.
fetch(URL)
.then(response => {
return response.json();
})
.then(responseBody => console.log(responseBody))
-
In
NewsFeed.js#componentDidMount()
, callsetState
to store the articles returned from the fetch request in the state object of theNewsFeed
component. -
Incrementally flesh out the data in
this.state.articles
. Try to create new components (e.g. anArticle
component) as you see fit. -
Bonus: implement the following features in your app
- allow users to upvote / downvote articles