Dive into the asynchronous world of React by creating an application that fetches and displays blog posts from an API. You'll practice handling API calls with the Fetch API, managing application state, and gracefully handling errors.
Your task is to build a React application that makes HTTP GET requests to the JSONPlaceholder API to retrieve a list of dummy blog posts. The application should render the titles and bodies of these posts on the screen. You'll also implement error handling to manage unsuccessful API calls.
-
Project: Create a React application
-
API Integration: Use the Fetch API to asynchronously fetch blog posts from
https://jsonplaceholder.typicode.com/posts. Ensure the API response is checked—if it's not "ok", throw an error. -
State Management: Store the fetched posts in the application's state. Use React hooks like
useStateanduseEffectto manage state and side effects. -
Error Handling: Catch any errors that might occur during the API call. If an error occurs, catch it and store the error message in the state instead of logging it to the console.
-
UI Rendering:
- If the API call is successful, display each post's title and body in your application.
- If the API call fails, display a user-friendly error message. Ensure your application does not crash.
- If the API call is successful, display each post's title and body in your application.
-
Testing Error States: Simulate an error state by modifying the API URL to an incorrect address, and observe if the application correctly handles the error by displaying the appropriate message.
- Prioritize clean, readable code. Make sure to separate concerns by keeping your fetching logic and UI rendering distinct.
- Comment your code where necessary to explain why certain decisions were made, especially around error handling.
- No styling is required.
- Correct implementation of asynchronous data fetching.
- Effective state management and error handling.
- Code readability and structure.
- Handling of edge cases and potential errors.