Create React App Template (by Apptension)

create-react-app template customised for Apptension projects.

Quick start

1. Run create-react-app with Apptension's template:

npx

$ npx create-react-app [app-name] --template apptension

yarn

yarn create react-app [app-name] --template apptension

2. Start application:

$ yarn start

Features

Note: Most features are covered by create-react-app documentation so don't forget to check it out first!

Typescript

Configured together with ESLint and Prettier provides you with static types checking and helps with maintaining good code style.

Storybook

Check out live examples to understand Apptension stack workflow. Interactively develop and test components in isolated environment by running yarn storybook.

Plop

Use prepared commands for repeatable actions like creating new components or modules.

Ramda

Build complex logic through functional composition. For easier start with this library check out Learn ramda and What Function Should I Use.

Redux

Unidirectional data flow allows for change logging and time travel debugging. Used with Redux-Saga, Immer, Reselect and configured for Redux DevTools to speed up development.

React Router

It's natural to want to add pages (e.g. /about) to your application, and routing makes this possible.

Styled Components

Use the best bits of ES6 and CSS to style your apps without stress.

React Intl

Scalable apps need to support multiple languages, easily add and support multiple languages with react-intl.

Jest & React Testing Library

Use Jest for running tests, mocking, assertions and snapshots. Take advantage of React Testing Library for rendering and interacting with React components.

Git pre-hooks

Automated processes executed before git actions.

Commands

| Command | Description | | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | yarn start | Runs the app in development mode.Open http://localhost:3000 to view it in the browser. | | yarn test | Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. | | yarn lint | Lints your JavaScript. | | yarn extract-intl language1, language2, [...] | Automatically generates .json files with messages gathered from application. | | yarn storybook | Runs storybook on localhost |

Code generation commands

| Command | Description | | ------------------- | --------------------------------------------------------------------------------------- | | yarn plop | Runs interactive code generator | | yarn plop module | Generate Redux module (reducer, saga, selectors, action types, action creators, tests): | | yarn plop container | Generate Redux container and its react component in specified path: | | yarn plop component | Generate React class component or function component in specified path | | yarn plop hook | Generate React custom hook in specified path |

Files structure

app-name
├── .editorconfig
├── .env
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .prettierrc
├── .stylelintrc
├── README.md
├── package.json
├── plopfile.js
├── yarn.lock
├── .git
│   └── ...
├── public
│   └── ...
└── src
    ├── i18n.ts
    ├── index.ts
    ├── setupTests.ts
    ├── support.ts
    ├── support.messages.ts
    ├── .storybook
    │   └── ...
    ├── images
    │   └── ...
    ├── modules
    │   └── ...
    ├── routes
    │   └── ...
    ├── shared
    │   ├── components
    │   │   └── ...
    │   ├── services
    │   │   └── ...
    │   └── utils
    │       └── ...
    ├── theme
    │   └── ...
    └── translations
        └── ...

Guidelines

• Use commands for code generation
• Create Redux related code in modules directory
• Style components with Styled components and use global theme rules located in theme directory
• Try to write less code with Ramda
• Make use of React-Intl for any text
• Use routes as a location of code that is unique for a given route
• Use shared for reusable:
  • React components
  • services (e.g. API connection)
  • utils - helpers for other elements
• Write tests to make application bulletproof

Modules

A single module can be generated by using yarn plop module. It will be placed in modules directory. It consists of 3 main files:

• *.redux.ts - defining state, actions, types and reducers
• *.sagas.ts - implement dispatch side-effects
• *.selectors.ts - create selectors for app state

Components and containers

By using code generation commands there is possibility to generate dumb components (components) and smart components (containers) connected with redux.

Both of them contains two main files. The first one is for react component (*.component.tsx) and second one for styled components (*.styles.ts) to use in this component.

When creating container, there will be a third file named *.container.tsx which handles connection with redux. For usage in tests, container is also exported as component without redux connection from *.component.tsx.

Text and translations

Any text should be stored in *.messages.ts file for given component with use of react-intl:

import { defineMessages } from 'react-intl';

export default defineMessages({
  firstMessage: {
    id: 'someComponent.firstMessage',
    defaultMessage: 'First Message',
  },
  secondMessage: {
    id: 'someComponent.firstMessage',
    defaultMessage: 'Second Message with counter: {count}',
  },
});

Usage in component:

import { FormattedMessage } from 'react-intl';
import messages from './someComponent.messages';

...

<FormattedMessage {...messages.firstMessage} />
<FormattedMessage
  {...messages.secondMessage}
  values={{ count: this.state.count }}
/>

...

Tests

Modules and components are generated with __tests__ directory for tests.

Modules should contain tests for reducers, sagas and selectors.

Components should be based on snapshot testing checking if everything renders correctly base on given props.

Environment

Environment variables are stored in .env file.

Dependencies

All project dependencies are stored as dependencies in package.json. No packages should be stored as devDependencies because it could lead to some issues with deployment (Dan Abramov's comment on this topic).

Tech stack

Here's a curated list of packages that you should have knowledge of, before starting your awesome project.

Core

• [ ] React 16.8
• [ ] React Router 5
• [ ] React Intl
• [ ] React Helmet
• [ ] Redux
• [ ] Redux Saga
• [ ] Reselect
• [ ] Immer
• [ ] Ramda
• [ ] Axios

Development

• [ ] Webpack 4
• [ ] Redux Devtools
• [ ] React Hot Loader 4
• [ ] Storybook
• [ ] Husky

Styling

• [ ] Styled components
• [ ] Normalize.css

Testing

• [ ] Jest
• [ ] React Testing Library
• [ ] Redux Saga Test Plan

Linting

• [ ] ESlint

Code generation

• [ ] Plop

Release notes

CHANGELOG.md

Development & Contributing

CONTRIBUTING.md

License

This project is licensed under the MIT license, Copyright (c) 2017 Apptension. For more information see LICENSE.md.