Per for Scrimba

Posted on Jun 6, 2020 • Edited on Nov 4, 2020

Learn React in 1 Hour by Building a Movie Search App

#react #scrimba

If you've been meaning to learn React but unsure of where to start, Scrimba's brand new Build a Movie Search App course is perfect for you! You'll be guided through the app's creation from start to finish in just one hour, with interactive challenges helping you gain the muscle memory you need to become an effective React developer.

Why learn React?

React is the world's most popular front-end framework. As the docs state, React makes it painless to create interactive UIs and more predictable code which is easier to debug. With React, you can produce complex UIs through constructing reusable components that manage their own state.

What does this course do?

This learning journey takes you through 11 interactive screencasts, showing you the following core concepts of modern React:

How to get an API key
Adding base styles
Creating and styling components
Creating functions
Managing state using hooks
Displaying information
Creating and styling cards

Intro to the teacher

This tutorial is led by James Q. Quick, a full-stack Web Developer who regularly speaks at community events and participates in Hackathons. He also runs a YouTube channel teaching web development. His motto 'Learn. Build. Teach.' makes him the perfect teacher for this practical course.

Prerequisites

To study this course effectively, you should have basic knowledge of HTML, CSS, and JavaScript. You'll also find it useful to have seen some React code before, but it's not a must-have. If you need a bit more background knowledge, take a look at these fantastic free Scrimba courses:

If you're ready to hit the ground running with React, let's get started!

Course Introduction

In the first scrim, James runs us through a few of the key features of the app we'll be building and gives us a quick rundown of how the app works. Lastly, James introduces us to the API we'll use - themoviedb.org.

How to Get Your Movie DB API Key

In this short cast, James gives us the lowdown on how to get a Movie DB API Key by signing up with a free account. This is super straightforward and takes just a few minutes. Click the image above to access the course.

Add Base Styles to Your App

Next up, James shows us the basic React application he has instantiated for us:

import React from "react";
import ReactDOM from "react-dom";

class Main extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

ReactDOM.render(<Main />, document.getElementById("root"));

We then add some base styles to our style.css file including margins and padding, title styles and, the Holy Grail of CSS - centering the app's contents. Click here to check out the styles for yourself.

Create Your First Component

In this scrim, we have our first challenge - to create a React component. James uses a test.js file to give us a brief preview of what's needed before breaking down the task into manageable chunks:

//to create the SearchMovies component //form with a class of form //label with
htmlFor="query" and a class of Label //input of type text with a name of "query"
and a placeholder //button class of button and a type of submit

Click through to the link or image above to get your hands dirty and give the challenge a try.

Style the Search Movies Component

Next up, it's time to style our new app. James suggests some styles for our <form>, <label>, <input> and <button> and adds a media query to adjust the styles on larger screens:

@media (min-width: 786px) {
    .form {
        grid-template-columns: auto 1fr auto;
        grid-gap: 1rem;
        align-items: center;
    }

    .input {
        margin-bottom: 0;
    }
}

Don't forget that Scrimba is fully interactive, so you can be as creative as you like with the styles - these ideas are just some possibilities.

Create the Search Movies Function

export default function SearchMovies(){

    const searchMovies = async (e) => {
        e.preventDefault();

        const query = "Jurassic Park";

        const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;

        try {
            const res = await fetch(url);
            const data  = await res.json();
            console.log(data);
        }catch(err){
            console.error(err);
        }
    }

In this screencast, we create an async function that will use the Fetch API to retrieve the movie information from the Movie DB API. Hit the link to see how it's done.

Manage State with React useState Hook

In this scrim, James shows us how to use state to track the user's query with the useState hook:

const [query, setQuery] = useState("");

Next, we set the onChange on our <input> to bind it to that state:

<input
    className="input"
    type="text"
    name="query"
    placeholder="i.e. Jurassic Park"
    value={query}
    onChange={(e) => setQuery(e.target.value)}
/>

Then it's time for our second challenge - to create the state for movie information and update that state as appropriate. Hop on over to the tutorial to try it out.

Display Movie Information

Now that we can search for our movies, it's time to display the information to the user. Click the link or image to see how it's done!

Style the Movie Cards

Next up, James shows us how to style our movie cards to create an attractive, user-friendly app. We start with our card container <div> :

.card {
    padding: 2rem 4rem;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    margin-bottom: 2rem;
    background-color: white;
}

With that done, we move onto our titles and images. Click the link or image above to get the lowdown.

Create the Movie Card Component (Challenge)

Our final task is to create a separate component to display the movie card. This ensures maintainability should our project grow, and is a good habit to get into in preparation for bigger projects.

In true Scrimba style, James presents this challenge and then walks us through his solution. Head over to the cast now to try for yourself. Note: Props are needed for this, but James gives a quick how-to in the task explanation.

Wrap up

Congratulations on completing the Movie Search app! You now know how to build a fully functional app using core React concepts including functional components, hooks, fetch requests, styling, and reusable components.

I hope that you gained a lot from this course and feel inspired to continue your learning journey. To find out more about React, head over to Scrimba's free, six-hour Learn React for Free course.

After that, why not check out all the other great courses available over on Scrimba to see where you'll go next?

Wherever your journey takes you, happy coding :)

DEV Community