React Sample Application
React sample application purpose is to help bootstrap new React projects in a simple and fast way. This application can also be considered a boilerplate application with all the preferred development configurations, folder structure and tools in place and ready to start coding.
Please, bear in mind that this application is always evolving and new tools may be added along the way.
React
framework (with Typescript) for the overall application development;Typescript
coding language;SASS
style pre-processor to build the needed application styles;Axios
to communicate with the backend API;DotEnv
to load project environment variables;PicniCSS
lightweight CSS framework for UI styling;
Webpack
to bundle the application and serve it in development mode;Log4Brains
to manage Architectural Decision Record (ADR) and generate static HTML knowledge base;Statoscope
to generate reports about the application;husky
to automate git hooks;
ESLint
for code linting;Prettier
for code formatting;StyleLint
for style linting;
Jest
javascript testing framework;React Testing Library
testing framework for working with React components;
From the project root folder, please execute the following commands in a terminal window:
# install the application dependencies
npm i
# start the application in development mode
npm start
# or
npm run dev
# build a version of the application for distribution
npm run build
# run prettier automatic file formatter
npm run prettier-format-all
# run ESLint
npm run lint
# run ESLint and fix all automatically fixable problems
npm run lint:fix
# run StyleLint
npm run lint:css
# run StyleLint and fix all automatically fixable problems
npm run lint:css:fix
# run all the necessary commands before a code commit
npm run pre-commit
# run the application unit tests
npm run test
# run the application unit tests in file watch mode
npm run test:watch
# run the application unit tests and present a code coverage report
npm run test:coverage
# add a new entry to the application ADR
npm run adr:add
# serve the application ADR for consulting in a browser
npm run adr:serve