React - Best Practices
Edison Sanchez
Posted on September 9, 2020
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.
Posted on September 9, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.