16. Fetching Data on Initial Render and Refactoring with Hooks

Activity 16.01: Creating an App Using Potter API

Solution:

1. Start a new React application for the project named harry-potter-api:

   npx create-react-app harry-potter-api

2. In the src folder, remove all the existing files. Once they are removed, create a new file called index.js and add the following code. This will import the <App> component and render it in HTML:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './components/App';
   ReactDOM.render(<App />, document.querySelector('#root'));

3. Still in the src folder, create a folder called components and then create a file called App.js inside the component folder. Once that's done, add some boilerplate for the <App> component:

   import React from 'react';
   const App = () => {
     return(
       <div className="page">
    ...