/react-movies

A react-based app to store and fetch movies.

Primary LanguageJavaScriptMIT LicenseMIT

react-movies

A react-based app to store and fetch movies.

Usage:

User can add the movie info to database and fetch the data from the database.

Demo: http://jordon-chen.github.io/react-movies

Installation

npm install
npm start

Learning: firebase, useState, useEffect, useCallback, fetch(), async, await, Try Catch Throw, response.josn(), JSON.stringify()

Implementation:

  • This app consists of 3 components: Movie, MoviesList, AddMovie.
  • Set up firebase as a backend server.
  • Post movie info to the backend server, and get data from backend server through JavaScript built in fetch API.
  • Use response.json() to transform data into objects after fetching the json data.
  • Use JSON.stringify() to convert a JavaScript object or value to a JSON string before posting data to the backend server.
  • When fetching data from backend server, we need to deal with many conditions, such as isLoading, error, no data, got data.
  • We can use useEffect to fetch data automatically at the beginning of components loaded.
  • We can use useCallback to save the async fetch function to prevent unnecessary renders.