Topics:
- React Router
- Using Link and NavLink to navigate to specific routes
- Passing Route Parameters
- Passing props to components rendered by the Router
[ x ] _ Fork this repository, then clone your fork.
[ x ] _ NOTE You have 2 servers that you will be running here so read these instructions carefully.
[ x ] _ In the root of this directory: Run yarn install
to download dependencies.
[ x ] _ Run the server using yarn start
or node server.js
. (Don't worry too much about this process, you'll get used to doing this and it will be explained more in the future).
[ x ] _ In a separate terminal cd into the client
folder and run yarn install
to download dependencies.
[ x ] _ Still inside the client
folder run yarn start
to run the client application.
[ x ] * Once your application is up and running on the client, you should see a browser window that looks like this at localhost:3000
[ x ] _ Wrap your app with the router.
[ x ] _ Inside your App file add two routes.
[ x ] _ one route for /
that loads the MovieList
component.
[ x ] _ one route that will take an id
parameter after/movies/
(ex: /movies/2
, /movies/3
where the id is dynamic). This route should load the Movie
component.
[ x ] _ Make it so that the card in MovieList
is a link, this should direct the user to the /movies/{id of movie here}
URL, where :id
is the id of the individual movie.
[ x ] _ When a user clicks on a movie card they should be taken to /movies/{id of movie here}
to see the details for the selected movie.
[ x ] _ You will need to modify line 13 of Movie.js
in order to accept the correct id for the movie selected.
[ x ] _ Add functionality so the Home
button on the SavedList
component navigates back to home.
[ x ] - You should now be able to navigate back and forth between the individual movies and the home screen.
If you have completed Parts 1 & 2 feel free to move on to these stretch goals.
[ x ] You may notice that we are using essentially the same exact JSX code in the Movie
component and the MovieDetails
component in MovieList.js
create a new component in MovieCard.js
that returns this JSX code. Then remove the old code from Movie
and MovieDetails
and instead return the new MovieCard
component.
[ x ] You will notice there is a 'Saved Movies' component that we are not currently using. In this step you will add the functionality to save a movie. You will need to pass the addToSavedList
function to the Movie
component. Once you have done that you will need to add a click handler to the save button.
[ x ] You will need to uncomment lines 29-39 in Movie.js
to complete this. Your list of saved movies should be links to the movie itself. Study and understand what the saveMovie
function is doing.