Skip to content

Latest commit

 

History

History
47 lines (32 loc) · 1.79 KB

README.md

File metadata and controls

47 lines (32 loc) · 1.79 KB
Raw

React Exercise - SWC, Context and react-query

Movies application

This is an exercise made to learn more about:

  • bundling with webpack + swc
  • experiment pagination approaches with react-query
  • testing use-context-selector library

Information: All the data shown in the app is from TMDB api.

Usage

  • run yarn or npm install to install all the dependencies
  • then run yarn dev or npm run dev to run the app in port 8080

The terminal will open localhost:8080 automatically for you.

Technologies

  • React bundled with
    • Webpack and
    • SWC(faster than Babel)
  • React Query to fetch data from api
  • Material UI to style the application
    • Use of Material UI CSS-in-JS solution

Bundling configurations

  • use inline-source-map devtool in development environment to make it easier to debug;
  • Root import using ~/ indicating src folder to prevent long lines hard to predict relative path indicators ../../../..;
  • No *.css files are supported because since I'm using Material UI I decided to style using CSS-in-JS only. Not having the css-loader/style-loader set ensures I'm not going to mix approaches;
  • Use of Bundle Analyzer to help understanding/reviewing decisions

Other decisions

  • use humps to ensure code standard for naming convention camelCase;
  • use use-context-selector to help indicating react what has to be rerendered when context has changes; the image below highlights what is rerendered when context changes the selected movie. With normal ContextAPI it rerendered all the movie cards.

Thanks 👋🏻