Frontend architecture

The project is structured as follows:

• src/components: React components are reusable pieces of the application (such as a button).

• src/pages: React pages correspond to the application pages (such as the home page). Sub-components of these pages should be in sub-folders of each page, if they cannot be reused anywhere else.

• src/redux: Redux actions/reducers/sagas/selectors are all grouped by page in this folder (following the ducks pattern). Learn more about Redux by reading the documentation.

Quick start

Useful commands:

• yarn to install dependencies

• yarn start to start a local dev-server

• yarn build to build a minified version of the code, for production use!

• yarn test to launch tests in watch mode

• yarn generate to generate a new component or a new page. You will be prompted the following questions:

  • Do you want a page or a component?
  • What is the name of the component?
  • What is the type of the component? Choose between PureComponents, Components and stateless functions for your React component.
  • Do you want to connect your component to the Redux store? Use Redux to handle your global state.
  • Do you want to use react-intl? Use react-intl to handle the translations within your application.
  • Do you want to use styled-components? Use styled-components to easily style your components using a CSS syntax.
  • Do you want snapshot tests? Snapshot tests allow you to easily lock the comportment of a component.

Going further

Other useful commands:

• yarn flow to generate flow configuration for your node_modules

• yarn lint:fix to automatically fix linting errors

• yarn test:coverage to generate the coverage

• yarn nsp to spot security breaches in your application

• yarn analyze to analyze the production bundle size

For more see create-react-app documentation