DEV Community

Edison Sanchez
Edison Sanchez

Posted on • Edited on

10 3

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

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