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.

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 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.

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!