Skip to content

Latest commit

 

History

History
79 lines (48 loc) · 4.19 KB

react-project-dependencies.md

File metadata and controls

79 lines (48 loc) · 4.19 KB

Build, linting and other common dependencies of React projects

@dhi-gras/builder

For further documentation on the builder, see here

To allow for custom optimization, customization of the dev server and build procedure, we use a custom shared webpack configuration across our projects with the @dhi-gras/builder package.
It's still largely experimental and will have more features added as needed.

Usage:

  • Use builder build to build a production-ready bundle in the dist directory
  • Use builder start to start a dev server at http://127.0.0.1:3000
  • Use builder analyze to open a visualization of bundled file sizes

Features:

  • Reads .env file, if it exists, containing environment variables - can then be accessible in the process.env object
  • Files in the static directory will be copied to the dist folder when built
  • Images are compressed in production builds
  • Linting and type errors don't prevent a successful build

@dhi-gras/eslint-config

Consists of three config packages to extend from

Further usage documentation can be found in the root readme.md

SWR - data fetching

swr should be used for querying and fetching data. Documentation

In many cases it will be a good idea to compose your own fetcher hooks with swr.

It requires the use of your own fetcher - the native fetch API should be used for that: Documentation

swr generally only makes sense to use in GET requests. Other requests can simply be put within a function, using the fetch API.

More usage examples can be added here.

date-fns - date & time formatting and parsing

date-fns should be used for working with dates as it is the most lightweight, well known and flexible library for this.
Documentation

If a project needs only very basic parsing of dates to certain localized human-readable dates, then using only the Intl.DateTimeFormat object may make more sense.
Documentation

deck.gl - Map visualization framework

deck.gl is the recommended map visualization framework, used in many of the newer apps, where you can see existing layers and other components made for it, for both reuse and as examples for new solutions.

react-map-gl is still used by many projects, and should only be replaced by deck.gl when it makes sense.

echarts - charts

echarts-for-react should be used for charts and graphs, and many other types of data visualization.

More usage examples can be added here.

formik - forms

formik should be used for forms
Documentation

Material-UI, clsx, notistack

  • @material-ui/core should be used for component foundations. Use the DHI shared ThemeProvider, import styling related components, hooks, types and functions from @material-ui/core/styles
  • @material-ui/icons should be used for icons - DHI specific icons can currently be found in @dhi/icons, stored in the DHI/react-components repository
  • clsx should be used for using multiple and/or conditional classes. Documentation
  • notistack should be used for displaying snackbars. Documenation