nathanssantos / react-ts-boilerplate

WIP - Boilerplate for React.js applications, built with Mobx as a state manager, Chakra UI as a component library and Vite as a build tool.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Github | NPM

The @emotion/react package requires React and is recommended for users of that framework if possible.

@emotion/styled

Github | NPM

The @emotion/styled package is for those who prefer to use the styled.div style API for creating components.

@fontsource/roboto

Github | NPM

The CSS and web font files to easily self-host the “Roboto” font.

axios

Github | NPM

Promise based HTTP client for the browser and node.js.

formik

Github | NPM

Formik is the world's most popular open source form library for React and React Native.

mobx

Github | NPM

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).

mobx-react

Github | NPM

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

Github | NPM

React is a JavaScript library for building user interfaces.

react-dom

Github | NPM

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

Github | NPM

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

Github | NPM

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

Github | NPM

The all-in-one Vite plugin for React projects.

eslint

Github | NPM

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.

eslint-config-prettier

Github | NPM

Turns off all rules that are unnecessary or might conflict with Prettier.

eslint-plugin-import

Github | NPM

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

Github | NPM

Static AST checker for accessibility rules on JSX elements.

eslint-plugin-prettier

Github | NPM

Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

eslint-plugin-react

Github | NPM

React specific linting rules for eslint.

eslint-plugin-react-hooks

Github | NPM

This ESLint plugin enforces the Rules of Hooks.

prettier

Github | NPM

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

Github | NPM

Frontend build tool.

About

WIP - Boilerplate for React.js applications, built with Mobx as a state manager, Chakra UI as a component library and Vite as a build tool.

License:MIT License


Languages

Language:TypeScript 95.7%Language:HTML 3.7%Language:Shell 0.6%