https://github.com/tutods/react-boilerplate
My React Application Boilerplate using WebPack, Babel, TypeScript, ESLint, Prettier and Husky
https://github.com/tutods/react-boilerplate
babel boilerplate eslint react reactjs typescript webpack
Last synced: 3 months ago
JSON representation
My React Application Boilerplate using WebPack, Babel, TypeScript, ESLint, Prettier and Husky
- Host: GitHub
- URL: https://github.com/tutods/react-boilerplate
- Owner: tutods
- Created: 2022-03-10T13:45:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-12T13:18:19.000Z (about 4 years ago)
- Last Synced: 2025-06-20T03:05:57.489Z (about 1 year ago)
- Topics: babel, boilerplate, eslint, react, reactjs, typescript, webpack
- Language: JavaScript
- Homepage:
- Size: 112 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Boilerplate
This repository contain the basics to start a new project using:
💡 What you will found?
You can found the folders structure below:
```
.
├── public
└── src
├── assets
│ ├── styles
│ └── media
├── components
├── contexts
├── pages
│ └── Main
└── shared
├── @types
├── hooks
├── services
└── utils
```
🗂 Details
> **`public`:** files you want each user can access, like images, favicon, etc.
> **`src/assets`:** on this folder I save my global styles (`global.scss`) and project media (SVG files, images, ...)
> **`src/components`:** all the components to this project
> **`src/contexts`:** in some applications I use contexts, so this folder is for them
> **`src/pages`:** usually I use `react-router-dom` package, and for that, the `Main/index.tsx` is the file with all routes, and to each page I create another folder and respective files in `src/pages`
> **`src/shared/@types`:** you can imagine that is the folder to storage all the types created for this project (yes, I use Typescript!)
> **`src/shared/hooks`:** folder to storage custom hooks
> **`src/shared/services`:** folder to storage external services, usually with `axios` package
> **`src/shared/utils`:** common functions, regex's, etc.
📄 Files
In this boilerplate you can found this initial files:
> **`.dockerignore`, `Dockerfile` and `docker-compose.yml`:** files related with Docker (if you want create a container)
> In this case, I create only the image to run a dev server (not a build server)
> **`.prettierrc` and `.prettierignore`:** **Prettier** configuration files;
> **`.eslintrc.js`:** **ESLint** configuration file
> **`tsconfig.json`:** My configurations to **TypeScript** (I use `baseUrl` option to clean the imports)
> **`webpack.config.js`:** **WebPack** configuration file
>**`.babelrc`:** **Babel** configuration file
🧑🏻💻 About Me
[facebook]: https://facebook.com/tutods2014
[twitter]: https://twitter.com/tutods
[youtube]: https://youtube.com/tutods2014
[instagram]: https://instagram.com/dsousa_12
[linkedin]: https://www.linkedin.com/in/daniel-sousa-tutods/
[gitlab]: https://gitlab.com/jdaniel.asousa
[
][facebook] [
][twitter]
[
][linkedin] [
][instagram]
[
][youtube] [
][gitlab]
