empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Document props pattern (#15497)

Browse Source 
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
This commit is contained in:
Jacob Shandling 2023-12-21 09:24:18 -08:00 committed by GitHub
parent e58f1bbc22
commit 65d64b67a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/docs/patterns.md
View File

@ -128,12 +128,17 @@ export default {
## Components
### React Functional Components
### React functional components
We use functional components with React instead of class comonents. We do this
as this allows us to use hooks to better share common logic between components.
### Page Component Pattern
### Passing props into components
We tend to use explicit assignment of prop values, instead of object spread syntax:
```
<ExampleComponent prop1={pop1Val} prop2={prop2Val} prop3={prop3Val} />
```
### Page component pattern
When creating a **top level page** (e.g. dashboard page, hosts page, policies page)
we wrap that page's content inside components `MainContent` and
@ -169,7 +174,7 @@ const PackComposerPage = ({ router }: IPackComposerPageProps): JSX.Element => {
export default PackComposerPage;
```
## React Hooks
## React hooks
[Hooks](https://reactjs.org/docs/hooks-intro.html) are used to track state and use other features
of React. Hooks are only allowed in functional components, which are created like so: