React TypeScript Boilerplate
WIP - Boilerplate for React applications, built with MobX as a state manager, Chakra UI as a component library, and Vite as a build tool.
Setup
1 - Install the project dependencies:
yarn
2 - Install all the necessary extensions for VS Code:
- Eslint
- Prettier
- EditorConfig
Running the project
yarn dev
Build
yarn build
To visualize the preview:
yarn preview
Dependencies
@emotion/react
The @emotion/react package requires React and is recommended for users of that framework if possible.
@emotion/styled
The @emotion/styled package is for those who prefer to use the styled.div style API for creating components.
@fontsource/roboto
The CSS and web font files to easily self-host the “Roboto” font.
axios
Promise based HTTP client for the browser and node.js.
formik
Formik is the world's most popular open source form library for React and React Native.
mobx
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).
mobx-react
Package with React component wrapper for combining React with MobX. Exports the observer decorator and other utilities. For documentation, see the MobX project. This package supports both React and React Native.
react
React is a JavaScript library for building user interfaces.
react-dom
This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.
react-router-dom
React Router is a lightweight, fully-featured routing library for the React JavaScript library. React Router runs everywhere that React runs; on the web, on the server (using node.js), and on React Native.
yup
Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformation.
Dev Dependencies
@vitejs/plugin-react
The all-in-one Vite plugin for React projects.
eslint
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
eslint-config-prettier
Turns off all rules that are unnecessary or might conflict with Prettier.
eslint-plugin-import
This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor.
eslint-plugin-jsx-a11y
Static AST checker for accessibility rules on JSX elements.
eslint-plugin-prettier
Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
eslint-plugin-react
React specific linting rules for eslint.
eslint-plugin-react-hooks
This ESLint plugin enforces the Rules of Hooks.
prettier
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
vite
Frontend build tool.