create-react-app template customised for Apptension projects.
- Run create-react-app with Apptension's template:
npx
$ npx create-react-app [app-name] --template apptensionyarn
yarn create react-app [app-name] --template apptension- Start application:
$ yarn startNote: Most features are covered by create-react-app documentation so don't forget to check it out first!
Configured together with ESLint and Prettier provides you with static types checking and helps with maintaining good code style.
Check out live examples to understand Apptension stack workflow. Interactively develop and test components in isolated environment by running yarn storybook.
Use prepared commands for repeatable actions like creating new components or modules.
Build complex logic through functional composition. For easier start with this library check out Learn ramda and What Function Should I Use.
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.
It's natural to want to add pages (e.g. /about) to your application, and routing makes this possible.
Use the best bits of ES6 and CSS to style your apps without stress.
Scalable apps need to support multiple languages, easily add and support multiple languages with react-intl.
Use Jest for running tests, mocking, assertions and snapshots. Take advantage of React Testing Library for rendering and interacting with React components.
Automated processes executed before git actions.
| 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 |
| 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 |
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
└── ...
- Use commands for code generation
- Create Redux related code in
modulesdirectory - Style components with Styled components and use global theme rules located in
themedirectory - Try to write less code with Ramda
- Make use of React-Intl for any text
- Use
routesas a location of code that is unique for a given route - Use
sharedfor reusable:- React
components services(e.g. API connection)utils- helpers for other elements
- React
- Write tests to make application bulletproof
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
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.
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 }}
/>
...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 variables are stored in .env file.
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).
Here's a curated list of packages that you should have knowledge of, before starting your awesome project.
This project is licensed under the MIT license, Copyright (c) 2017 Apptension. For more information see LICENSE.md.