5/3/2023 0 Comments Movieicon appWe're going to use create-react-app to get us off the ground quickly. Ok with that out of the way, we can get into the good stuff – creating a React project. We're going to take the Poster image for each object and display it in our app How to Set Up a React Project Each item in the array contains some details about a movie (title, year and so on). Click "send" again, and this time you'll see the response is different: This will query the API for all movies containing "star wars" in the title. To do this, we change the i query parameter to s like so: So far we've used the API to retrieve one movie, but what we want to do is search for "Titles containing a search term". But this means our URL from the email is working fine and our React App will be able to retrieve movies. Mission success! Well, part of the mission is a success – we're only getting started here after all. Click "send" and you should get some JSON back in the "body" section like so: We're going to use Postman ( download if here if you haven't got it) to play with the API.įire up Postman and paste in the "OMBb API" URL you received in your email (highlighted in yellow in the image above). This is an optional step, so if you'd rather get into the React-y goodness feel free to jump to the next section. You should receive an email like this:Ĭlick the activation link (highlighted in green) and you're good to go. This API is free to use, and all we have to do is sign up and get an API key. We're going to use the OMDB API as our source for movies. Our movie app wouldn't be any good if we didn't have any movies to display. Don't forget to subscribe!įinally, in case you get lost while following along, you can grab the finished code here (on GitHub). Save our favourites to local storage to they appear when the app refreshesĪnd here's a video walkthrough if you want to supplement your reading.Add movies to and remove them from our favourites.Create a "Netflix style" horizontal scroll effect.Use a real API to search for movies as we type. In this React movie app tutorial, we're going to:
0 Comments
Leave a Reply. |