When adding UI components, you should be able to group them in two root domains:
pages
- page scope based componentsshared
- components that are shared all across the app
Folder naming rules:
kebab-case
folder name indicates domain name
export interface ICodeEditorProps { | |
children: ReactNode; | |
className?: string; | |
path?: string; | |
code?: string; | |
isLive?: boolean; | |
title?: string; | |
lang?: Language; | |
} |
import React, { createContext, useState, useMemo, useContext, cloneElement, isValidElement, FC } from 'react'; | |
import useConstant from '../../../hooks/useConstant'; | |
type TabStateContext = [number, React.Dispatch<React.SetStateAction<number>>]; | |
interface ITabsProps { | |
state?: TabStateContext; | |
} |
// utils/env.ts | |
export const isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement); | |
export const isServer = !isBrowser; |
import Link from 'next/link' | |
import Head from 'next/head' | |
export default class Layout extends React.Component { | |
componentDidMount() { | |
console.log('mount'); | |
} | |
componentWillUnmount() { | |
console.log('unmount'); | |
} |
$(document).ready(function() { | |
// Product slider | |
var $sliderFilters = $('.js-products-slider-filter > li'); | |
var $productsSliderNavigation = $('.js-products-slider-nav'); | |
var $productsSliderPreview = $('.js-products-slider-preview'); | |
initSliders(); | |
function initSliders() { |