How it renders

In the src/index.tsx file you can see date-fns configuration going and just a simple ReactDOM.render() function.

Every component is a functional component:

const App = (): React.ReactElement => {
  const storeTheme = useSelector((state) => state.settings.theme)
  const theme = createMuiTheme(storeTheme)
  const classes = useStyles(theme)

  // Set root classes
  document.body.className = classes.root

  return (
    <ThemeProvider theme={theme}>
      <Router>
        {/** Restores user scroll */}
        <ScrollRestoration />

        {/** Change document title on routing */}
        <RouterTitleChange />

        <AppBar />
        <div className={classes.app}>
          <Tabs />
          <AppRouter />
        </div>
        <Footer />
      </Router>
    </ThemeProvider>
  )
}

export default App

We have some custom hooks in src/hooks folder, if you want to create a new one, follow these instructions.

Custom hooks

Name	Description
useMediaExtendedQuery	Returns true if device viewport is wider than MIN_WIDTH. Useful if you need to make some responsiveness inside the code. Use with caution of performance
useQuery	Gets query from page's URL
useRoute	Returns current route object. See config/routes.ts for type declarations
useSelector	Custom wrapper for redux useSelector hook