React typescript + RxJs Boilerplate

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn coverage

Launches the test runner and outputs the tests code coverage.

yarn build or yarn build.ci

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Tech Stack

Here’s a curated list of packages that you should be at least familiar with before starting your project. However, the best way to see a complete list of the dependencies is to check package.json.

Core

• React
• React Router
• Redux
• RxJs
• React Redux
• Redux Act
• Redux Observable
• Redux Persist
• Typescript

Unit Testing

• Jest
• Enzyme
• Redux mock store

Linting

• ESLint
• Prettier
• Lint Staged

Project Structure

src/components/

Folder that contains all the UI reusable components.

src/hooks/

Folder that contains all custom hooks. Ex: useI18n.
Create inside here all custom hooks and export them using the index.tsx file.

export * from './useCustomHook'

src/pages/

Folder that contains all react components that represent website pages.
Structure of a page component:

• Page/
  • snapshots /
  • Page.scss
  • Page.test.tsx
  • index.tsx

__snapshots__/ folder is auto generated by jest.
Export the component from the index.tsx file

export default Page

src/router/

Contains the component that maps the Pages to routes as well as the routes.
To add a new page add it’s path to the routes.ts file and then map the component to the file.

<Switch>
  <Route path={paths.PAGE_PATH} component={Page} ></Route>
  ...
  <Route path={paths.ROOT} component={Home} ></Route>
</Switch>

src/state/

src/state/actions/

This folder contains the actions RxJs and Redux listens to.

export const ACTION_NAME = createAction('ACTION_NAME')

src/state/epics/

This folder contains RxJs epics that are triggered when their corresponding action is fired.
Check out here which operations to use.

1. To add new epics export the folder as an array using the epics/{new folder}/index.ts

import { epic1Epic } from './epic1'
...
import { epicNEpic } from './epicN'
export default [epic1Epic, ..., epicNEpic]

1. Import the new epics folder and use the spread operator to add them to the existing ones in epics/index.ts

import global from './global'
import newEpics from './newEpics'
export default combineEpics(...[...global, ...newEpics])

src/state/reducers/

This folder contains all the reducers and the configurations of the redux persist.

Structure:

• reducers/
  • newReducer/
    • index.ts
    • newReducer.test.ts
  • index.ts

Create one folder per reducer. This folder must contain the index.ts file that export the reducer and a {reducerName}.test.ts
In the index.ts import the new reducer and add it to the combineReducers method.
If you want to have the data of this reducer persisted in the local storage then encapsulate the reducer with persistReducer.

src/styles/

This folder contains all extensions of the styles framework.

src/testing/

This folder contains testing utilities.