DEV Community

Edison Sanchez
Edison Sanchez

Posted on • Edited on

React - Best Practices

Structure

src/

assets

images
icons
fonts
components/

buttons/

Button

index.js : Folder Export.
Button.js : Rendering and Call Styled and Services.
Button.service.js : Hooks and Local and State Management.
Button.styles.js : Styled components CSS-JS + UI Toolkit.
Button.test.js : Test Unit.
Buttom.story.js: Component's Storybook).



config: files with configuration.
**containers:
**data:
**contexts
**helpers
**pages/

home/

**index.js
**styles.js (styled components + UI)
**styles/
themes
globalStyles.js
colors.js
fonts.js
icons.js
metrics.js
.env
.eslintrc
.gitignore
.prettierrc

CSS Images

Response Images Container or Styles.

{
  background-image: url(.////);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

ESLINT and Prettier

./node_modules/.bin/eslint --init

I'm not finished yet... I will continue updating this post.

Top comments (3)

Collapse
 
louis2688 profile image
Louis Madrigal

nice

Collapse
 
fpeluso profile image
Fabio Peluso

Some explanation would be nice, otherwise looks like your personal recipe ;)

Collapse
 
edisonsanchez profile image
Edison Sanchez

Yes, I'm building this post, when I feel its like ok, then I will explain each one of this best practices with the "Why"

Thanks for your comment.