https://github.com/swiatlon/example-react-configuration

Example structure of React configuration files
https://github.com/swiatlon/example-react-configuration

absolute-imports atomic-design config eslint husky prettier react

Last synced: 3 months ago
JSON representation

Example structure of React configuration files

• Host: GitHub
• URL: https://github.com/swiatlon/example-react-configuration
• Owner: Swiatlon
• Created: 2022-05-20T10:34:00.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-05-20T16:40:40.000Z (about 3 years ago)
• Last Synced: 2025-01-16T20:57:27.885Z (4 months ago)
• Topics: absolute-imports, atomic-design, config, eslint, husky, prettier, react
• Language: HTML
• Homepage:
• Size: 527 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **React example configuration**

##  Hello there ! 😃

I share with you my react configuration with everything explained. Below, you can read about tools I used.

![IMAGE](https://github.com/IWiercik/example-react-configuration/blob/gh-pages-images/images/react.jpg)

# **TOOLS :**

>## ***Absolute imports (jsconfig.json)***

It helps us avoid the hell nests -> ../../../../**God-where-IAM ?!?!!?**

*Compiler "learn" that our "src" folder work as base folder with imports.*  

![IMAGE](https://github.com/IWiercik/example-react-configuration/blob/gh-pages-images/images/nests.jpg)

>## ***ESLint (.eslintrc)***

ESLint help us to get our **code cleaner** and more **protected** from errors.It works depending on created patterns, standards and rules.If something will be wrong in your code eslint will show you error or warning depending on configuration.

![IMAGE](https://github.com/IWiercik/example-react-configuration/blob/gh-pages-images/images/eslint.JPG)

>## ***Prettier (.prettierrc)***

In this configuration I used the prettier to transform our code to cleaner. Prettier is using his schematics linked with ESLint rules. This tool will transform the code after the save.

***IMAGE AFTER CTRL + S (SAVE)***

![IMAGE](https://github.com/IWiercik/example-react-configuration/blob/gh-pages-images/images/prettier.JPG)

>## ***Husky + lint-staged***

Husky saves us from commiting awful formmated code to the github.It formating code one more time before commit.

![IMAGE](https://github.com/IWiercik/example-react-configuration/blob/gh-pages-images/images/husky.jpg)

>## ***Styled Components***

Styled Components help us to style our components faster.

![IMAGE](https://github.com/IWiercik/example-react-configuration/blob/gh-pages-images/images/styledcomponents.JPG)