ANNOUNCEMENT

DO NOT MODIFY OR CHANGE THE CODE BEFORE CONFIRMED BY DOOBOOLAB. THIS REPOSITORY IS USED IN DOOBOO-CLI.

React Typescript Boilerplate

Specification

Gain points

State management with recoil.
Know how to structure react web app with typescript.
Know how to navigate between pages with react-router.
Know how to write test code with react-native-testing-library.
Know how to lint your project with eslint.
Know how to localize your project.

Example

Know how to place your retina image into your project.
Know how to use emotion.
Know how to implement theming with emotion.

[Dark Mode]
[Light Mode]

Structures

app/
├─ assets
│  └─ icons // app icons
│  └─ images // app images like background images
├─ docs // explanation for dev stack we used. (Sorry for Korean)
├─ node_modules/
├─ src/
│  └─ apis
│  └─ components
│  └─ contexts
│  └─ providers
│  └─ types
│  └─ utils
│  └─ App.tsx
│  └─ theme.ts
├─ test/
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ environment.d.ts
├─ jest.config.js
├─ package.json
├─ postcss.config.js
├─ README.md
├─ STRINGS.js
├─ tsconfig.json
├─ typings.d.ts
├─ vite.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 Jest

We've created test examples with jest-ts in src/components/page/__tests__ and src/components/ui/__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've defined localized strings in assets/lang/en.json for English and assets/lang/ko.json for Korean. Since the en is default locale setup in current project, you do not need to localize this file. However, you still should not delete this if you don't want to see missing localization warning messages when you are running jest.

We are using fbt to localize our app which is maintained by Facebook team. Simply running yarn fbt:all will generate assets/translatedFbts.json which has all the localized strings.

If you find trouble using it, we've wrote an article, Localizing react app with FBT instead of i18n in the medium. You may follow that.

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]

dooboolab-community/dooboo-frontend-ts