Menu
npm start
: The classical, starts the React project
other commands
npm run build
: Build the React projectnpm run lint
: Run eslint checknpm run lint:fix
: Run an eslint check with the flag --fix (cf.eslint cli), auto-fix commons synthax errorsnpm run test
: Run the Jest unit tests in watch mode. It allows any actions :
Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
npm run test:coverage
: Run the Jest unit tests and generate a coverage tracking page, a list that details all the testing coverage of the app. It creates a coverage folder at the project root with all the coverage page assets.npm run storybook
: Run the complete UI kit interactive documentation powered by storybook. More info here
This project is based on a CRA (Create React App) typescript bootstrap setup :
You will need to have NodeJS install on your machine :
npm i
npm start
🎉
- Create-react-app
The project embarks an exhaustive listing of fragments (eg. basic and scalables components based on the UI kit figma spec), you can play with props of some very scalable fragments like button, and you'll see a real-time render. The storybook runs on the default 6006 port, eg.localhost:6006.
The project architecture follows a modular feature-oriented architecture. At the root you can find :
.storybook/ // storybook config files.
public/ // public assets.
src/ // the hot topic ! The React project source files.
Let's have a deeper look at the src
folder 🔍
assets/
feature/
components/
MyFeature.tsx
MyFeature.module.scss
internal/
components/
App.tsx
App.module.scss
Well, the goal is to have as many starter pack as we need to avoid loss of time. For now, there's two starters, redux-toolkit ready w/ full hook support and redux-saga ready (the good ol' .mind way ! 🤠).
We use Sass with CSS modules ➡️ **/*.module.scss
What's comming next ?
- UNIT TESTS with JEST
- STORYBOOK for UI Documentation
- More branch with more starter pack
The first rule about fight club is you don't talk about fight club 🙃