wfx-common-components
v0.0.2
Published
React reusable components
Downloads
2
Readme
These are the most relevant technologies that this boilerplate includes.
- React: A JavaScript library for building user interfaces.
- TypeScript: Written in TypeScript language.
- SASS: Some good Sass practices to create the Styles.
- Autoprefixer: Automatically add vendor prefixes to these Styles.
- Webpack: Automation of tasks and compilation of the project.
- Babel: Transpiler to different versions of EcmaScript.
- Browserlist: To configure which browsers will support.
- Jest: Framework for testing.
- ESLint: Linting for Scripts.
- StyleLint: Linting for Styles.
- Prettier: Formatter for Scripts and Styles.
- EditorConfig: Formatter for files in general.
- Husky: Used for attaching to git hooks and run scripts.
- Inversify: You can optionally configure Dependency Injection.
Setup and scripts
Install all the dependencies.
$ yarn
Run the project for local development.
$ yarn start
Build the project for a production environment.
$ yarn build
Test your code.
$ yarn test
The linting is configured with husky and will run before commit, but you can run it.
$ yarn lint # (Will run scripts and styles linting with autofix)
$ yarn lint:scripts # (Will run ESLint)
$ yarn lint:styles # (Will run Stylelint)
$ yarn lint:editor # (Will run ECLint)
Run this command if you get this error
$ Error: ENOSPC: System limit for number of file watchers reached
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
If you are adding new components make sure add story book for the component including testcases. Follow below link on how to add storybook
$ https://github.com/storybookjs/storybook/tree/master/app/react
For best code practices follow this article by Airbnb <Airbnb JavaScript Style Guide>
$ https://airbnb.io/javascript/react/