React with vite and typescript

Specification

• react
• react-router
• react-i18next
• typescript
• emotion
• react-testing-library
• vitest
• react-hook
• prettier
• recoil

Gain points

1. State management with recoil.
2. Know how to structure react web app with typescript.
3. Know how to navigate between pages with react-router.
4. Know how to write test code with react-testing-library.
5. Know how to lint your project with eslint.
6. Know how to use emotion.
7. Know how to implement theming with emotion.

• [Dark Mode]
• [Light Mode]

Tips

Setting up yarn berry

1. yarn set version berry
2. yarn
3. yarn dlx @yarnpkg/sdks vscode
4. yarn plugin import typescript
5. yarn dlx @yarnpkg/sdks vscode
   • Useful when prettier extension is not working.

Structures

app/
├─ assets
│  └─ icons // app icons
│  └─ images // app images like background images
├─ node_modules/
├─ src/
│  └─ apis
│  └─ components
│  └─ contexts
│  └─ providers
│  └─ types
│  └─ utils
│  └─ App.tsx
│  └─ theme.ts
├─ test/
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ environment.d.ts
├─ package.json
├─ postcss.config.js
├─ README.md
├─ STRINGS.js
├─ tsconfig.json
├─ typings.d.ts
├─ vite.config.ts
└─ vitest.config.ts

Install and running the project

Installing and running the project is as simple as running

yarn && yarn start

• Note that we recommend using yarn.

This runs the start script specified in our package.json, and will spawn off a server which reloads the page as we save our files. Typically the server runs at http://localhost:8080, but should be automatically opened for you.

Testing the project

Testing is also just a command away:

yarn test
 PASS  src/components/ui/__tests__/Button.test.tsx
 PASS  src/components/page/__tests__/Intro.test.tsx

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   2 passed, 2 total
Time:        2.145s, estimated 3s

Writing tests with vitest and testing-library

We've created test examples with vitest in src/components/pages/__tests__ and src/components/uis/__tests__. Since react is component oriented, we've designed to focus on writing test in same level of directory with component. You can simply run yarn test to test if it succeeds and look more closer opening the source.

Vscode prettier and eslint setup

These are preferred settings for auto linting and validation

• with prettier extension installed
• with eslint extension installed

"eslint.enable": true,
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
],
// prettier extension setting
"editor.formatOnSave": true,
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"prettier.arrowParens": "always",
"prettier.jsxSingleQuote": true

Using Context Api

Whenever you add your own Context provider you can add it to providers/ and use it inside of providers/index.tsx

• Splitting provider is preferred

// Add providers here
const RootProvider = ({
  initialThemeType,
  children,
}: Props): React.ReactElement => {
  return (
    <AppProvider>
      <ThemeProvider
        initialThemeType={initialThemeType || 'light'}
      >
        {children}
      </ThemeProvider>
    </AppProvider>
  );
};

The RootProvider is being used at App.tsx and test files easily

// App.tsx
function App(): React.ReactElement {
  return (
    <RootProvider>
      <SwitchNavigator />
    </RootProvider>
  );
}

// test files
const component = (props): React.ReactElement => {
  return (
    <RootProvider initialThemeType="light">
      <Intro {...props} />
    </RootProvider>
  );
};

using consistent theme('light') explicitly is encouraged in testing for avoiding unexpected snapshot test errors

Localization

We use react-i18next for translation. This is configured in src/utils/i18n.ts.

Read more about the configuration options.

Creating components

Copy sourcecode in /src/components/page/Temp.tsx Copy sourcecode in /src/components/page/test/Temp.test.tsx Create new tsx file with compnent name you will create

To do above more easily, you can simly install dooboo-cli. Then you can easily create [page] or [ui] components along with test file by running below commands.

# page component
dooboo page [PageComponentName]
# ui component
dooboo ui [UIComponentName]