Git Product home page Git Product logo

foodorderingsystem's Introduction

Food Ordering App

About the Project

  • React Hooks
  • CSR and SSR
  • React's Lifecycle method workflow
  • Custom Hooks
  • Bundlers (Parcel and webpack)
  • React Context
  • Redux Architecture & workflow
  • Testing the React App

React Hooks

  • (Normal JS utility functions)
  • useState() -superpowerful state variable
  • useEffect() - to connect our app to external s/m.

2 types Routing in web apps

  • Client Side Routing
  • Server Side Routing

React's lifecycle methods workflow

lifecyclemethodsdiagram

Custom Hook

  • custom utility function - spcl useCase
  • Single responsibility principle
  • modularity -reusable, maintainable, testable,readable
  • Abstract the fetching data(API call), and heavy loaded tasks inside the custom hook, so that it makes our code testable.
  • maintain seperate file for each and every custom hook

Bundling - in detail

  • to break down the App into smaller chunks of code
  • chunking
  • code splittting
  • dynamic bundling
  • Ondemand loading
  • Lazy loading
  • Dynamic Import

React Context

  • when using redux, no need of context in React's App.
  • no need of external data management libraries/ state management libraries
  • useContext(),
  • <UserContext.Consumer> - used inside class based components.
  • <UserContext.Provider> - override the default values of the context

Redux - Architecture & how it works

  • Install @reduxjs/toolkit and react-redux
  • Build our own store
  • connect our store to our App
  • Slice
  • dispatch(action)
  • Selector alt text

Testing the React App

  • 3 types of testing that developer can do a) Unit Testing - testing in Isolation b) Integration Testing -testing b/w integration of the components c) End to End Testing (E2E) - entire application testing

Settings up Testing in our App

  • Install React Testing Library
  • Install jest
  • Install Babel dependencies
  • Configure Babel
  • Configure Parcel config file to disable Default babel transpilation
  • Jest - npx jest --init
  • Install JsDom Library
  • Install @babel/preset-react - to make jsx work in test cases
  • Include @babel/preset-react inside my babel config

foodorderingsystem's People

Contributors

sansavvy avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.