🚘 Vistoria Digital
👨🏫 Getting started
🧱 Build
- Run
yarn build
to build the app for production to the build folder.
⚙️Configuring style guide in vscode
-
Download the following extensions. - Eslint - Prettier - Code formatter - EditorConfig for VS Code
-
Add the following excerpt to the vscode settings file.
"editor.tabSize": 2"editor.formatOnSave": true"emmet.syntaxProfiles":"javascript": "jsx""emmet.includeLanguages":"javascript": "javascriptreact""[javascript]":"editor.formatOnSave": true"editor.codeActionsOnSave":"source.fixAll": true
👨💻 Code design patterns
-
Components and pages file structure.
Pages and components follow the same structures.
```bash 📁ui ├── 📁src/ │ ├── 📁components/ │ │ └── 📁Button/ │ │ └──📄 index.ts │ │ └──📄 Button.tsx │ │ └──📄 Button.styles.ts │ │ └──📄 Button.types.ts │ │ └──📄 Button.test.ts │ ├── 📁pages/ │ │ └── 📁Home/ │ │ └──📄 index.ts │ │ └──📄 Home.tsx │ │ └──📄 Home.styles.ts │ │ └──📄 Home.types.ts │ │ └──📄 Home.test.ts ```
-
Structure of the index.ts file. > Export the .tsx and .types.ts files.
javascript export * from './Button'; export * from './Button.types';
-
Structure of the Button.types.ts file. > Interface tem o prefixo "I" e type tem o prefixo "Type".
;``` -
Structure of the Button.styles.ts file. > Create your CSS styles.
;const Button = styledbutton`// CSS code;```` -
Structure of the Button.tsx file. > Create your component.
;;;const Button: React.FC<IButtonProps> =<Button type=buttonType />;``` -
Structure of the Button.test.ts file. > Create your tests.
;;;;```