Skip to main content

Libraries

TODO​

JS libraries​

https://underscorejs.org https://github.com/jashkenas/underscore

Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter...) without extending any core JavaScript objects.

Libraries​

Editors​

Select2​

https://select2.org

Modernizr​

Modernizr is a JavaScript library for conviently detecting HTML5 and CSS3 feature support in web browsers. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them.

WebP support - Look for the properties Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha and Modernizr.webp.animation.

Modernizr(js library for feature detection)

Forms​

react-query​

Performant and powerful datasynchronization for React

Fetch, cache and update data in your React and React Native applications all without touching any "global state".

  • Backend agnostic
  • Dedicated Devtools
  • Auto Caching
  • Auto Refetching
  • Window Focus Refetching
  • Polling/Realtime Queries
  • Parallel Queries
  • Dependent Queries
  • Mutations API
  • Automatic Garbage Collection
  • Paginated/Cursor Queries
  • Load-More/Infinite Scroll Queries
  • Scroll Recovery
  • Request Cancellation
  • Suspense Ready!
  • Render-as-you-fetch
  • Prefetching
  • Variable-length Parallel Queries
  • Offline Support
  • SSR Support
  • Data Selectors

https://react-query.tanstack.com

Flux​

https://facebook.github.io/flux

Testing​

Jest​

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes.

https://www.freecodecamp.org/news/how-to-test-react-applications

React Testing Library is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn't provide a way to "shallowly" render a component without its children, a test runner like Jest lets you do this by mocking.

https://reactjs.org/docs/testing.html

Cypress​

End-to-end testing

classnames​

Using classnames library to toggle classes

classnames is a simple library that lets you toggle class names easily. You can install it usingnpm install classnamesoryarn add classnames.

Please take a look at its documentation for more details, but here's the basic usage:

  • Suppose that you want to create anAlertcomponent which acceptstype, which can be'success'or'error'.
  • If it's'success', you want the text color to be green. If it's'error', you want the text color to be red.

You can first write a CSS module (e.g.alert.module.css) like this:

.success {
  color: green;
}
.error {
  color: red;
}

And useclassnameslike this:

import styles from './alert.module.css'
import cn from 'classnames'

export default function Alert({ children, type }) {
  return (
    <div
      className={cn({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error'
      })}
    >
      {children}
    </div>
  )
}

https://github.com/JedWatson/classnames

https://www.freecodecamp.org/news/front-end-development-tools-you-should-know