react-base

Simple React boilerplate, that will make your development easier and faster.

Easy setup process with option to choose between JavaScript / TypeScript, best libraries for most use cases, and ability to easily change configurations

Features

React v17
Webpack 5
SCSS
Jest/React Testing Library
Axios & React-Query
Formik for forms
Styled-components for css-in-js
ESLint & Prettier for automatic linting&formatting
Husky for Pre-commit lint&formatting of changed files
Helmet for SEO support
GitHub Action - for Continous Integration

Setup

Clone the repository

git clone https://github.com/ilyasudakov/react-base.git <YOUR_PROJECT_NAME>

cd <YOUR_PROJECT_NAME>

Initiate setup process, where you can create new repo if you want to

npm run setup

Run the app

npm run start

Commands

Run npm i to install all dependencies
Run npm run dev to run app in development mode
Run npm run start to serve files to /public folder
Run npm run test to run tests

You can run commands bellow manually, or they will run automatically with pre-commit hook(included in the app already!):

npm run lint to run ESLint
npm run format to run Prettier formatter

Future Features

Maybe?

• React DnD
• Some Animation library

Questions

• Q: Why no Redux?

  A: Too much boilercode, hard to maintain and slow to code. Rather use React-Query, which fetches, parses, caches data for you. Or in case if you need global storage for your app, React Context will probably do fine , but in huge apps where global state changes frequently - Redux is probably better option

• Q: Why use this instead of Create-React-App?

  A: CRA is really cool, but it becomes really frustrating when you want to customize project setup, configs, and here everything is easily accessible

• Q: Why use this exact boilerplate?

  A: This is perfect barebones boilerplate i wanted in my development, which could be helpful for you. Its pretty much just a skeleton, so you can build up your own structure and project. I hope this project gives pretty quick start to code stuff

Quick How-to

• Inline SVG

  This project supports inline SVGs, to in order to use it in the app, you have to import SVG first: import Star from './star.svg', then use it like this: <Star className="my-svg" />