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
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
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
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
- React DnD
- Some Animation library
-
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
-
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" />