Project 13 of 100 - React Movie Search

Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: link
Link to the repo: github

I've been meaning to follow along with the excellent James Q Quick-led React movie search app tutorial on Scrimba for a while now. It seemed almost as though it were designed for students who just finished Bob Ziroll's React intro course, so I'm glad I finally made the time for it.

The Application

This application has a simple structure with just 3 functional components. We use all functional components because one of the primary intentions of the course is to practice using React's new-ish useState hook.

The 3 components were Main, SearchMovies- where we write a search form, and a MovieCard component which we later import into a container and use when looping through API results from a text query sent to themoviedb.org, which is another full-featured API with documentation perfect for simple fetch() based apps like this.

The useState Hook

In a previous blog post I wrote that I was confused that we were just creating a constant called state without using the constructor function in class based components. That's been a thing in React for about a year, and it's very convenient.

useState adds a whole new level of convenience by completely removing the need to reference prevState when changing state. It provides a neat syntax which is even includes its own required setState mini-function upon declaration.

Compare the following two ways to change a state given some text input:

1. setState()

class MyComponent extends React.Component {
  state = {
    userInput: ''
  }

  handleInput(e) {
    this.setState({userInput: e.target.value})
  }
  ...
}

2. useState()

function MyComponent() {
  const [userInput, setUserInput] = useState('');

  handleInput(e) {
    setUserInput(e.target.value)
  }
  ...
}

Overall in terms of intuitive-ness I find it to be a big improvement.

5/5 stars would code again.