Topics:
- React Router
- Using Link to navigate to specific routes
- Passing Route Parameters
- Passing props to components rendered by the Router
-
Fork this repository, then clone your fork.
-
NOTE You have 2 servers that you will be running here so read these instructions carefully.
-
In the root of this directory: Run
npm install
to download dependencies. -
Run the server using
npm start
ornode 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). -
In a separate terminal cd into the
client
folder and runnpm install
to download dependencies. -
Still inside the
client
folder runnpm start
to run the client application. -
Once your application is up and running on the client, you should see a browser window that looks like this at
localhost:3000
(although the port number will be different if 3000 is not being used).
Once you are done your application will have two routes:
- Wrap your app with the router.
- Inside your App.js file add two routes.
- one route for
/
that loads theMovieList
component. This component will need a prop from the state in App.js. - one route that will take an
id
parameter after/movies/
(ex:/movies/2
,/movies/3
where the id is dynamic). This route should load theMovieCard
component.
- one route for
- When a user clicks on the movie card inside
MovieList
they should be taken to/movies/{id of clicked movie here}
to see the details of the selected movie. - You will need to modify line 7 of
MovieCard.js
to get the id of the selected movie from the URL. - Find
Home
button insideSavedList.js
and Add functionality so it navigates back to home. - You should now be able to navigate back and forth between the list of movies and the detailed view of a single movie.
If you have completed Parts 1 & 2 feel free to move on to these stretch goals.
- You may notice that we are using very similar JSX in the
MovieCard
component and in theMovieList.js
component. The main difference is the list of stars, which only exists in the "detailed" view of theMovieCard
component. - Create a new component in
MovieInfo.js
that returns a Movie Card. Then remove the old code fromMovieCard
andMovieList
and instead return the newMovieInfo
component. - The Movie Info should be flexible enough to handle displaying a movie with or without the list of stars.
- 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 theMovie
component. Once you have done that you will need to add a click handler to the save button. You will need to uncomment lines 24-27 inMovieCard.js
to complete this.
- Create a component called
MovieAdd
and use thePOST
api in theserver.js
to make a post request using axios. Create a basic form to handle the input and submit the data to the API. Make sure to create ids automatically.
- Your list of saved movies should be links to the movie itself. Study and understand what the
saveMovie
function is doing.
- Submit a Pull-Request to merge
<firstName-lastName>
Branch intomain
(student's Repo). Please don't merge your own pull request