DEV Community

Edison Sanchez
Edison Sanchez

Posted on • Updated 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%;
}

ESLINT and Prettier

./node_modules/.bin/eslint --init

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

Discussion (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 Author

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.