- Open your command line and navigate to your repos directory (if you do not have a repos folder, then you can use mkdir repos to create one)
- Use this template repository to start a new project in your repos folder: git clone <repo_name> cd repo_name to navigate into your new repo directory
- Make sure to run
npm install
to fetch the dependencies for the project - Start Visual Studio Code and select 'Open Folder'. Then select repo_name to open the folder in the editor (or just type code . in your terminal inside the repo directory)
- Follow the instructions on the README.md file to complete exercises
- Open the app.js file to get started
- We will be using the Studio Ghibli API to make calls, and display data in our application, depending on our current url route.
- Studio Ghibli API
- We'll be fetching from the /films and /people endpoints for this exercise
- Configure React Router in your application. Use the same structure as the walkthrough during the lecture. Just make sure that it works!
- Reminder
BrowserRouter
:
<BrowserRouter>
<Switch>
<Route>
<Component />
</Route>
</Switch>
</BrowserRouter>
- is the starting point
-
Create a
Navbar
component. Import and then render the component in theApp
component (not inside theSwitch
) -
Next, you should create three
Links
that point to a specificRoute
url. One forHome
, another forFilms
, and a third forPeople
-
Start configuring your first route.
- Say, for /films. After navigating to localhost:3000/films, you should see Studio Ghibli's list of films.
- The data should only be loaded and displayed when you navigate to /films. You should use componentDidMount() and fetch to make this request.
- You will use
"https://ghibliapi.herokuapp.com/films"
for the api endpoint - Construct a fetch request with
.then
and.catch
. Remember to:- Fetch the data
- If a response was resolved, parse the JSON object
- Then set the response to the state of your
Films
component - In your render method, be sure to map through the
films
state and display the results to the browser
- Configure your second route. Repeat the steps from the
/films
route, but for/people
. Use"https://ghibliapi.herokuapp.com/people"
.
- At the end of these tasks, you should have at least three pages in your application, and you should be able to navigate to them simply by clicking a link.
- Create two more routes for
/places
and/vehicles
.