mirror of
https://github.com/lainbo/component-party.git
synced 2026-04-05 04:59:02 +08:00
feat(content): add fetch data content for react & svelte (#79)
This commit is contained in:
Mathieu Schimmerling
committed by
GitHub
GitHub
parent
55b229baf3
commit
0c77a2440c
722
README.md
722
README.md
@@ -1,3 +1,285 @@
|
||||
<details>
|
||||
<summary>
|
||||
<img width="18" height="18" src="public/framework/svelte.svg" />
|
||||
<b>Svelte</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
* [x] Reactivity
|
||||
* [x] Declare state
|
||||
* [x] Update state
|
||||
* [x] Computed state
|
||||
* [x] Templating
|
||||
* [x] Minimal template
|
||||
* [x] Styling
|
||||
* [x] Loop
|
||||
* [x] Event click
|
||||
* [x] Dom ref
|
||||
* [x] Conditional
|
||||
* [x] Lifecycle
|
||||
* [x] On mount
|
||||
* [x] On unmount
|
||||
* [x] Component composition
|
||||
* [x] Props
|
||||
* [x] Emit to parent
|
||||
* [x] Slot
|
||||
* [x] Slot fallback
|
||||
* [x] Form input
|
||||
* [x] Input text
|
||||
* [x] Checkbox
|
||||
* [x] Radio
|
||||
* [x] Select
|
||||
* [x] Webapp features
|
||||
* [x] Routing
|
||||
* [x] Router link
|
||||
* [x] Fetch data
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
<img width="18" height="18" src="public/framework/react.svg" />
|
||||
<b>React</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
* [x] Reactivity
|
||||
* [x] Declare state
|
||||
* [x] Update state
|
||||
* [x] Computed state
|
||||
* [x] Templating
|
||||
* [x] Minimal template
|
||||
* [x] Styling
|
||||
* [x] Loop
|
||||
* [x] Event click
|
||||
* [x] Dom ref
|
||||
* [x] Conditional
|
||||
* [x] Lifecycle
|
||||
* [x] On mount
|
||||
* [x] On unmount
|
||||
* [x] Component composition
|
||||
* [x] Props
|
||||
* [x] Emit to parent
|
||||
* [x] Slot
|
||||
* [x] Slot fallback
|
||||
* [x] Form input
|
||||
* [x] Input text
|
||||
* [x] Checkbox
|
||||
* [x] Radio
|
||||
* [x] Select
|
||||
* [x] Webapp features
|
||||
* [x] Routing
|
||||
* [x] Router link
|
||||
* [x] Fetch data
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
<img width="18" height="18" src="public/framework/vue.svg" />
|
||||
<b>Vue 3</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
|
||||
|
||||
* [x] Reactivity
|
||||
* [x] Declare state
|
||||
* [x] Update state
|
||||
* [x] Computed state
|
||||
* [x] Templating
|
||||
* [x] Minimal template
|
||||
* [x] Styling
|
||||
* [x] Loop
|
||||
* [x] Event click
|
||||
* [x] Dom ref
|
||||
* [x] Conditional
|
||||
* [x] Lifecycle
|
||||
* [x] On mount
|
||||
* [x] On unmount
|
||||
* [x] Component composition
|
||||
* [x] Props
|
||||
* [x] Emit to parent
|
||||
* [x] Slot
|
||||
* [x] Slot fallback
|
||||
* [x] Form input
|
||||
* [x] Input text
|
||||
* [x] Checkbox
|
||||
* [x] Radio
|
||||
* [x] Select
|
||||
* [ ] Webapp features
|
||||
* [x] Routing
|
||||
* [x] Router link
|
||||
* [ ] Fetch data
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
<img width="18" height="18" src="public/framework/angular.svg" />
|
||||
<b>Angular</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
|
||||
|
||||
* [x] Reactivity
|
||||
* [x] Declare state
|
||||
* [x] Update state
|
||||
* [x] Computed state
|
||||
* [x] Templating
|
||||
* [x] Minimal template
|
||||
* [x] Styling
|
||||
* [x] Loop
|
||||
* [x] Event click
|
||||
* [x] Dom ref
|
||||
* [x] Conditional
|
||||
* [x] Lifecycle
|
||||
* [x] On mount
|
||||
* [x] On unmount
|
||||
* [x] Component composition
|
||||
* [x] Props
|
||||
* [x] Emit to parent
|
||||
* [x] Slot
|
||||
* [x] Slot fallback
|
||||
* [x] Form input
|
||||
* [x] Input text
|
||||
* [x] Checkbox
|
||||
* [x] Radio
|
||||
* [x] Select
|
||||
* [ ] Webapp features
|
||||
* [x] Routing
|
||||
* [x] Router link
|
||||
* [ ] Fetch data
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
<img width="18" height="18" src="public/framework/solid.svg" />
|
||||
<b>SolidJS</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
|
||||
|
||||
* [x] Reactivity
|
||||
* [x] Declare state
|
||||
* [x] Update state
|
||||
* [x] Computed state
|
||||
* [x] Templating
|
||||
* [x] Minimal template
|
||||
* [x] Styling
|
||||
* [x] Loop
|
||||
* [x] Event click
|
||||
* [x] Dom ref
|
||||
* [x] Conditional
|
||||
* [x] Lifecycle
|
||||
* [x] On mount
|
||||
* [x] On unmount
|
||||
* [x] Component composition
|
||||
* [x] Props
|
||||
* [x] Emit to parent
|
||||
* [x] Slot
|
||||
* [x] Slot fallback
|
||||
* [x] Form input
|
||||
* [x] Input text
|
||||
* [x] Checkbox
|
||||
* [x] Radio
|
||||
* [x] Select
|
||||
* [ ] Webapp features
|
||||
* [x] Routing
|
||||
* [x] Router link
|
||||
* [ ] Fetch data
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
<img width="18" height="18" src="public/framework/lit.svg" />
|
||||
<b>Lit</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
|
||||
|
||||
* [x] Reactivity
|
||||
* [x] Declare state
|
||||
* [x] Update state
|
||||
* [x] Computed state
|
||||
* [x] Templating
|
||||
* [x] Minimal template
|
||||
* [x] Styling
|
||||
* [x] Loop
|
||||
* [x] Event click
|
||||
* [x] Dom ref
|
||||
* [x] Conditional
|
||||
* [x] Lifecycle
|
||||
* [x] On mount
|
||||
* [x] On unmount
|
||||
* [x] Component composition
|
||||
* [x] Props
|
||||
* [x] Emit to parent
|
||||
* [x] Slot
|
||||
* [x] Slot fallback
|
||||
* [x] Form input
|
||||
* [x] Input text
|
||||
* [x] Checkbox
|
||||
* [x] Radio
|
||||
* [x] Select
|
||||
* [ ] Webapp features
|
||||
* [x] Routing
|
||||
* [x] Router link
|
||||
* [ ] Fetch data
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
<img width="18" height="18" src="public/framework/ember.svg" />
|
||||
<b>Ember</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
|
||||
|
||||
* [x] Reactivity
|
||||
* [x] Declare state
|
||||
* [x] Update state
|
||||
* [x] Computed state
|
||||
* [x] Templating
|
||||
* [x] Minimal template
|
||||
* [x] Styling
|
||||
* [x] Loop
|
||||
* [x] Event click
|
||||
* [x] Dom ref
|
||||
* [x] Conditional
|
||||
* [x] Lifecycle
|
||||
* [x] On mount
|
||||
* [x] On unmount
|
||||
* [x] Component composition
|
||||
* [x] Props
|
||||
* [x] Emit to parent
|
||||
* [x] Slot
|
||||
* [x] Slot fallback
|
||||
* [x] Form input
|
||||
* [x] Input text
|
||||
* [x] Checkbox
|
||||
* [x] Radio
|
||||
* [x] Select
|
||||
* [ ] Webapp features
|
||||
* [x] Routing
|
||||
* [x] Router link
|
||||
* [ ] Fetch data
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
<img width="18" height="18" src="public/framework/alpine.svg" />
|
||||
<b>Alpine.js</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/87" /></summary>
|
||||
|
||||
* [x] Reactivity
|
||||
* [x] Declare state
|
||||
* [x] Update state
|
||||
* [x] Computed state
|
||||
* [x] Templating
|
||||
* [x] Minimal template
|
||||
* [x] Styling
|
||||
* [x] Loop
|
||||
* [x] Event click
|
||||
* [x] Dom ref
|
||||
* [x] Conditional
|
||||
* [x] Lifecycle
|
||||
* [x] On mount
|
||||
* [x] On unmount
|
||||
* [x] Component composition
|
||||
* [x] Props
|
||||
* [x] Emit to parent
|
||||
* [x] Slot
|
||||
* [x] Slot fallback
|
||||
* [x] Form input
|
||||
* [x] Input text
|
||||
* [x] Checkbox
|
||||
* [x] Radio
|
||||
* [x] Select
|
||||
* [ ] Webapp features
|
||||
* [ ] Routing
|
||||
* [ ] Router link
|
||||
* [ ] Fetch data
|
||||
|
||||
</details>
|
||||
|
||||
[![Open in Gitpod][gitpod-src]][gitpod-href]
|
||||
|
||||
|
||||
@@ -13,9 +295,9 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
|
||||
## 🚀 Roadmap
|
||||
|
||||
- \[ ] Add Preact
|
||||
- \[ ] Add Stencil
|
||||
- \[ ] Add native JS ?
|
||||
* \[ ] Add Preact
|
||||
* \[ ] Add Stencil
|
||||
* \[ ] Add native JS ?
|
||||
|
||||
## 🔥 Progression
|
||||
|
||||
@@ -25,33 +307,33 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
<b>Svelte</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
- [x] Reactivity
|
||||
- [x] Declare state
|
||||
- [x] Update state
|
||||
- [x] Computed state
|
||||
- [x] Templating
|
||||
- [x] Minimal template
|
||||
- [x] Styling
|
||||
- [x] Loop
|
||||
- [x] Event click
|
||||
- [x] Dom ref
|
||||
- [x] Conditional
|
||||
- [x] Lifecycle
|
||||
- [x] On mount
|
||||
- [x] On unmount
|
||||
- [x] Component composition
|
||||
- [x] Props
|
||||
- [x] Emit to parent
|
||||
- [x] Slot
|
||||
- [x] Slot fallback
|
||||
- [x] Form input
|
||||
- [x] Input text
|
||||
- [x] Checkbox
|
||||
- [x] Radio
|
||||
- [x] Select
|
||||
- [x] Webapp features
|
||||
- [x] Routing
|
||||
- [x] Router link
|
||||
* \[x] Reactivity
|
||||
* \[x] Declare state
|
||||
* \[x] Update state
|
||||
* \[x] Computed state
|
||||
* \[x] Templating
|
||||
* \[x] Minimal template
|
||||
* \[x] Styling
|
||||
* \[x] Loop
|
||||
* \[x] Event click
|
||||
* \[x] Dom ref
|
||||
* \[x] Conditional
|
||||
* \[x] Lifecycle
|
||||
* \[x] On mount
|
||||
* \[x] On unmount
|
||||
* \[x] Component composition
|
||||
* \[x] Props
|
||||
* \[x] Emit to parent
|
||||
* \[x] Slot
|
||||
* \[x] Slot fallback
|
||||
* \[x] Form input
|
||||
* \[x] Input text
|
||||
* \[x] Checkbox
|
||||
* \[x] Radio
|
||||
* \[x] Select
|
||||
* \[x] Webapp features
|
||||
* \[x] Routing
|
||||
* \[x] Router link
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
@@ -59,33 +341,33 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
<b>React</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
- [x] Reactivity
|
||||
- [x] Declare state
|
||||
- [x] Update state
|
||||
- [x] Computed state
|
||||
- [x] Templating
|
||||
- [x] Minimal template
|
||||
- [x] Styling
|
||||
- [x] Loop
|
||||
- [x] Event click
|
||||
- [x] Dom ref
|
||||
- [x] Conditional
|
||||
- [x] Lifecycle
|
||||
- [x] On mount
|
||||
- [x] On unmount
|
||||
- [x] Component composition
|
||||
- [x] Props
|
||||
- [x] Emit to parent
|
||||
- [x] Slot
|
||||
- [x] Slot fallback
|
||||
- [x] Form input
|
||||
- [x] Input text
|
||||
- [x] Checkbox
|
||||
- [x] Radio
|
||||
- [x] Select
|
||||
- [x] Webapp features
|
||||
- [x] Routing
|
||||
- [x] Router link
|
||||
* \[x] Reactivity
|
||||
* \[x] Declare state
|
||||
* \[x] Update state
|
||||
* \[x] Computed state
|
||||
* \[x] Templating
|
||||
* \[x] Minimal template
|
||||
* \[x] Styling
|
||||
* \[x] Loop
|
||||
* \[x] Event click
|
||||
* \[x] Dom ref
|
||||
* \[x] Conditional
|
||||
* \[x] Lifecycle
|
||||
* \[x] On mount
|
||||
* \[x] On unmount
|
||||
* \[x] Component composition
|
||||
* \[x] Props
|
||||
* \[x] Emit to parent
|
||||
* \[x] Slot
|
||||
* \[x] Slot fallback
|
||||
* \[x] Form input
|
||||
* \[x] Input text
|
||||
* \[x] Checkbox
|
||||
* \[x] Radio
|
||||
* \[x] Select
|
||||
* \[x] Webapp features
|
||||
* \[x] Routing
|
||||
* \[x] Router link
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
@@ -93,33 +375,33 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
<b>Vue 3</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
- [x] Reactivity
|
||||
- [x] Declare state
|
||||
- [x] Update state
|
||||
- [x] Computed state
|
||||
- [x] Templating
|
||||
- [x] Minimal template
|
||||
- [x] Styling
|
||||
- [x] Loop
|
||||
- [x] Event click
|
||||
- [x] Dom ref
|
||||
- [x] Conditional
|
||||
- [x] Lifecycle
|
||||
- [x] On mount
|
||||
- [x] On unmount
|
||||
- [x] Component composition
|
||||
- [x] Props
|
||||
- [x] Emit to parent
|
||||
- [x] Slot
|
||||
- [x] Slot fallback
|
||||
- [x] Form input
|
||||
- [x] Input text
|
||||
- [x] Checkbox
|
||||
- [x] Radio
|
||||
- [x] Select
|
||||
- [x] Webapp features
|
||||
- [x] Routing
|
||||
- [x] Router link
|
||||
* \[x] Reactivity
|
||||
* \[x] Declare state
|
||||
* \[x] Update state
|
||||
* \[x] Computed state
|
||||
* \[x] Templating
|
||||
* \[x] Minimal template
|
||||
* \[x] Styling
|
||||
* \[x] Loop
|
||||
* \[x] Event click
|
||||
* \[x] Dom ref
|
||||
* \[x] Conditional
|
||||
* \[x] Lifecycle
|
||||
* \[x] On mount
|
||||
* \[x] On unmount
|
||||
* \[x] Component composition
|
||||
* \[x] Props
|
||||
* \[x] Emit to parent
|
||||
* \[x] Slot
|
||||
* \[x] Slot fallback
|
||||
* \[x] Form input
|
||||
* \[x] Input text
|
||||
* \[x] Checkbox
|
||||
* \[x] Radio
|
||||
* \[x] Select
|
||||
* \[x] Webapp features
|
||||
* \[x] Routing
|
||||
* \[x] Router link
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
@@ -127,33 +409,33 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
<b>Angular</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
- [x] Reactivity
|
||||
- [x] Declare state
|
||||
- [x] Update state
|
||||
- [x] Computed state
|
||||
- [x] Templating
|
||||
- [x] Minimal template
|
||||
- [x] Styling
|
||||
- [x] Loop
|
||||
- [x] Event click
|
||||
- [x] Dom ref
|
||||
- [x] Conditional
|
||||
- [x] Lifecycle
|
||||
- [x] On mount
|
||||
- [x] On unmount
|
||||
- [x] Component composition
|
||||
- [x] Props
|
||||
- [x] Emit to parent
|
||||
- [x] Slot
|
||||
- [x] Slot fallback
|
||||
- [x] Form input
|
||||
- [x] Input text
|
||||
- [x] Checkbox
|
||||
- [x] Radio
|
||||
- [x] Select
|
||||
- [x] Webapp features
|
||||
- [x] Routing
|
||||
- [x] Router link
|
||||
* \[x] Reactivity
|
||||
* \[x] Declare state
|
||||
* \[x] Update state
|
||||
* \[x] Computed state
|
||||
* \[x] Templating
|
||||
* \[x] Minimal template
|
||||
* \[x] Styling
|
||||
* \[x] Loop
|
||||
* \[x] Event click
|
||||
* \[x] Dom ref
|
||||
* \[x] Conditional
|
||||
* \[x] Lifecycle
|
||||
* \[x] On mount
|
||||
* \[x] On unmount
|
||||
* \[x] Component composition
|
||||
* \[x] Props
|
||||
* \[x] Emit to parent
|
||||
* \[x] Slot
|
||||
* \[x] Slot fallback
|
||||
* \[x] Form input
|
||||
* \[x] Input text
|
||||
* \[x] Checkbox
|
||||
* \[x] Radio
|
||||
* \[x] Select
|
||||
* \[x] Webapp features
|
||||
* \[x] Routing
|
||||
* \[x] Router link
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
@@ -161,33 +443,33 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
<b>SolidJS</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
- [x] Reactivity
|
||||
- [x] Declare state
|
||||
- [x] Update state
|
||||
- [x] Computed state
|
||||
- [x] Templating
|
||||
- [x] Minimal template
|
||||
- [x] Styling
|
||||
- [x] Loop
|
||||
- [x] Event click
|
||||
- [x] Dom ref
|
||||
- [x] Conditional
|
||||
- [x] Lifecycle
|
||||
- [x] On mount
|
||||
- [x] On unmount
|
||||
- [x] Component composition
|
||||
- [x] Props
|
||||
- [x] Emit to parent
|
||||
- [x] Slot
|
||||
- [x] Slot fallback
|
||||
- [x] Form input
|
||||
- [x] Input text
|
||||
- [x] Checkbox
|
||||
- [x] Radio
|
||||
- [x] Select
|
||||
- [x] Webapp features
|
||||
- [x] Routing
|
||||
- [x] Router link
|
||||
* \[x] Reactivity
|
||||
* \[x] Declare state
|
||||
* \[x] Update state
|
||||
* \[x] Computed state
|
||||
* \[x] Templating
|
||||
* \[x] Minimal template
|
||||
* \[x] Styling
|
||||
* \[x] Loop
|
||||
* \[x] Event click
|
||||
* \[x] Dom ref
|
||||
* \[x] Conditional
|
||||
* \[x] Lifecycle
|
||||
* \[x] On mount
|
||||
* \[x] On unmount
|
||||
* \[x] Component composition
|
||||
* \[x] Props
|
||||
* \[x] Emit to parent
|
||||
* \[x] Slot
|
||||
* \[x] Slot fallback
|
||||
* \[x] Form input
|
||||
* \[x] Input text
|
||||
* \[x] Checkbox
|
||||
* \[x] Radio
|
||||
* \[x] Select
|
||||
* \[x] Webapp features
|
||||
* \[x] Routing
|
||||
* \[x] Router link
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
@@ -195,33 +477,33 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
<b>Lit</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
- [x] Reactivity
|
||||
- [x] Declare state
|
||||
- [x] Update state
|
||||
- [x] Computed state
|
||||
- [x] Templating
|
||||
- [x] Minimal template
|
||||
- [x] Styling
|
||||
- [x] Loop
|
||||
- [x] Event click
|
||||
- [x] Dom ref
|
||||
- [x] Conditional
|
||||
- [x] Lifecycle
|
||||
- [x] On mount
|
||||
- [x] On unmount
|
||||
- [x] Component composition
|
||||
- [x] Props
|
||||
- [x] Emit to parent
|
||||
- [x] Slot
|
||||
- [x] Slot fallback
|
||||
- [x] Form input
|
||||
- [x] Input text
|
||||
- [x] Checkbox
|
||||
- [x] Radio
|
||||
- [x] Select
|
||||
- [x] Webapp features
|
||||
- [x] Routing
|
||||
- [x] Router link
|
||||
* \[x] Reactivity
|
||||
* \[x] Declare state
|
||||
* \[x] Update state
|
||||
* \[x] Computed state
|
||||
* \[x] Templating
|
||||
* \[x] Minimal template
|
||||
* \[x] Styling
|
||||
* \[x] Loop
|
||||
* \[x] Event click
|
||||
* \[x] Dom ref
|
||||
* \[x] Conditional
|
||||
* \[x] Lifecycle
|
||||
* \[x] On mount
|
||||
* \[x] On unmount
|
||||
* \[x] Component composition
|
||||
* \[x] Props
|
||||
* \[x] Emit to parent
|
||||
* \[x] Slot
|
||||
* \[x] Slot fallback
|
||||
* \[x] Form input
|
||||
* \[x] Input text
|
||||
* \[x] Checkbox
|
||||
* \[x] Radio
|
||||
* \[x] Select
|
||||
* \[x] Webapp features
|
||||
* \[x] Routing
|
||||
* \[x] Router link
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
@@ -229,33 +511,33 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
<b>Ember</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||
|
||||
- [x] Reactivity
|
||||
- [x] Declare state
|
||||
- [x] Update state
|
||||
- [x] Computed state
|
||||
- [x] Templating
|
||||
- [x] Minimal template
|
||||
- [x] Styling
|
||||
- [x] Loop
|
||||
- [x] Event click
|
||||
- [x] Dom ref
|
||||
- [x] Conditional
|
||||
- [x] Lifecycle
|
||||
- [x] On mount
|
||||
- [x] On unmount
|
||||
- [x] Component composition
|
||||
- [x] Props
|
||||
- [x] Emit to parent
|
||||
- [x] Slot
|
||||
- [x] Slot fallback
|
||||
- [x] Form input
|
||||
- [x] Input text
|
||||
- [x] Checkbox
|
||||
- [x] Radio
|
||||
- [x] Select
|
||||
- [x] Webapp features
|
||||
- [x] Routing
|
||||
- [x] Router link
|
||||
* \[x] Reactivity
|
||||
* \[x] Declare state
|
||||
* \[x] Update state
|
||||
* \[x] Computed state
|
||||
* \[x] Templating
|
||||
* \[x] Minimal template
|
||||
* \[x] Styling
|
||||
* \[x] Loop
|
||||
* \[x] Event click
|
||||
* \[x] Dom ref
|
||||
* \[x] Conditional
|
||||
* \[x] Lifecycle
|
||||
* \[x] On mount
|
||||
* \[x] On unmount
|
||||
* \[x] Component composition
|
||||
* \[x] Props
|
||||
* \[x] Emit to parent
|
||||
* \[x] Slot
|
||||
* \[x] Slot fallback
|
||||
* \[x] Form input
|
||||
* \[x] Input text
|
||||
* \[x] Checkbox
|
||||
* \[x] Radio
|
||||
* \[x] Select
|
||||
* \[x] Webapp features
|
||||
* \[x] Routing
|
||||
* \[x] Router link
|
||||
|
||||
</details><details>
|
||||
<summary>
|
||||
@@ -263,33 +545,33 @@ How do we solve this ? Developers love having framework overview by examples. It
|
||||
<b>Alpine.js</b>
|
||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/91" /></summary>
|
||||
|
||||
- [x] Reactivity
|
||||
- [x] Declare state
|
||||
- [x] Update state
|
||||
- [x] Computed state
|
||||
- [x] Templating
|
||||
- [x] Minimal template
|
||||
- [x] Styling
|
||||
- [x] Loop
|
||||
- [x] Event click
|
||||
- [x] Dom ref
|
||||
- [x] Conditional
|
||||
- [x] Lifecycle
|
||||
- [x] On mount
|
||||
- [x] On unmount
|
||||
- [x] Component composition
|
||||
- [x] Props
|
||||
- [x] Emit to parent
|
||||
- [x] Slot
|
||||
- [x] Slot fallback
|
||||
- [x] Form input
|
||||
- [x] Input text
|
||||
- [x] Checkbox
|
||||
- [x] Radio
|
||||
- [x] Select
|
||||
- [ ] Webapp features
|
||||
- [ ] Routing
|
||||
- [ ] Router link
|
||||
* \[x] Reactivity
|
||||
* \[x] Declare state
|
||||
* \[x] Update state
|
||||
* \[x] Computed state
|
||||
* \[x] Templating
|
||||
* \[x] Minimal template
|
||||
* \[x] Styling
|
||||
* \[x] Loop
|
||||
* \[x] Event click
|
||||
* \[x] Dom ref
|
||||
* \[x] Conditional
|
||||
* \[x] Lifecycle
|
||||
* \[x] On mount
|
||||
* \[x] On unmount
|
||||
* \[x] Component composition
|
||||
* \[x] Props
|
||||
* \[x] Emit to parent
|
||||
* \[x] Slot
|
||||
* \[x] Slot fallback
|
||||
* \[x] Form input
|
||||
* \[x] Input text
|
||||
* \[x] Checkbox
|
||||
* \[x] Radio
|
||||
* \[x] Select
|
||||
* \[ ] Webapp features
|
||||
* \[ ] Routing
|
||||
* \[ ] Router link
|
||||
|
||||
</details>
|
||||
|
||||
@@ -318,5 +600,7 @@ This project requires Node.js to be `v14.0.0` or higher, because we use new Java
|
||||
MIT. Made with 💖
|
||||
|
||||
<!-- variables -->
|
||||
|
||||
[gitpod-src]: https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod
|
||||
|
||||
[gitpod-href]: https://gitpod.io/#https://github.com/matschik/component-party
|
||||
|
||||
28
content/7-webapp-features/1-fetch-data/react/App.jsx
Normal file
28
content/7-webapp-features/1-fetch-data/react/App.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import useFetchUsers from './useFetchUsers';
|
||||
|
||||
export default function App() {
|
||||
const { isLoading, error, data: users } = useFetchUsers();
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading ? (
|
||||
<p>Fetching users...</p>
|
||||
) : error ? (
|
||||
<p>An error occured while fetching users</p>
|
||||
) : (
|
||||
users && (
|
||||
<ul>
|
||||
{users.map((user) => (
|
||||
<li key={user.login.uuid}>
|
||||
<img src={user.picture.thumbnail} alt="user" />
|
||||
<p>
|
||||
{user.name.first} {user.name.last}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function useFetchUsers() {
|
||||
const [data, setData] = useState();
|
||||
const [error, setError] = useState();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchUsers() {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await fetch('https://randomuser.me/api/?results=3');
|
||||
const { results: users } = await response.json();
|
||||
setData(users);
|
||||
setError();
|
||||
} catch (err) {
|
||||
setData();
|
||||
setError(err);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
return { isLoading, error, data };
|
||||
}
|
||||
23
content/7-webapp-features/1-fetch-data/svelte/App.svelte
Normal file
23
content/7-webapp-features/1-fetch-data/svelte/App.svelte
Normal file
@@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import useFetchUsers from './useFetchUsers';
|
||||
|
||||
const { isLoading, error, data: users } = useFetchUsers();
|
||||
</script>
|
||||
|
||||
{#if $isLoading}
|
||||
<p>Fetching users...</p>
|
||||
{:else if $error}
|
||||
<p>An error occured while fetching users</p>
|
||||
{:else if $users}
|
||||
<ul>
|
||||
{#each $users as user}
|
||||
<li>
|
||||
<img src={user.picture.thumbnail} alt="user" />
|
||||
<p>
|
||||
{user.name.first}
|
||||
{user.name.last}
|
||||
</p>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export default function useFetchUsers() {
|
||||
const data = writable();
|
||||
const error = writable();
|
||||
const isLoading = writable(false);
|
||||
|
||||
async function fetchData() {
|
||||
isLoading.set(true);
|
||||
try {
|
||||
const response = await fetch('https://randomuser.me/api/?results=3');
|
||||
const { results: users } = await response.json();
|
||||
data.set(users);
|
||||
error.set();
|
||||
} catch (err) {
|
||||
data.set();
|
||||
error.set(err);
|
||||
}
|
||||
isLoading.set(false);
|
||||
}
|
||||
fetchData();
|
||||
|
||||
return { isLoading, error, data };
|
||||
}
|
||||
Reference in New Issue
Block a user