MinFlix

The project creating a movie review web service with react

Final Screen

Main

Loading	Home	Detail

Learning Notes

Create a react app

• npx create-react-app minflix

Run server

• npm start

Review

• Component: It's similar to a function in javascript. After it take "props" as input, it returns React element describing how it expresses on the screen.
  • Always have to write import React from 'react'; on first line in new js file. and write export default Component Name on last line
    • Unless write it above, react can't understand jsx.
  • import Component Name from './ComponentFileName'
  • The first letter of the component's name must start uppercase.
• JSX: Grammar combining JavaScript and HTML
• props: It's data to transfer between components. Using this is efficient to reuse components.
• map()
  • e.g., {FoodILike.map(dish => ( <Food key={dish.id} name={dish.name} picture={dish.image} rating={dish.rating} /> ))}
• prop-types
  • reference: http://github.com/facebook/prop-types
• state: It's object-type data used when handling *dynamic data - state can be used in class-type components (must inherit React.Component)
  • dynamic data: data that is likely to change
  • Not mutate state directly. Only use setState()
• Class Component's life cycle function
  • constructor(): a function executed first(executed before the render() function)
  • componentDidMount(): a function executed when a component is first drawn on the screen(executed after the render() function)
  • componentDidUpdate(): a function executed when updated (newly rendered)
  • componentWillUnmount(): a function executed when a component destroyed
• Especially, The render(), constructor(), and componentDidMount() functions are life cycle functions classified as Mount.
  • Unmount: componentWillUnmount()

code	result