component-party/README.md at f9509a70dc2c6890a37d3e07b2c5c6fb35000897

mirror of https://github.com/lainbo/component-party.git synced 2026-04-05 13:09:03 +08:00

Files

Liou f9509a70dc feat(content): add render app > solid (#157 )

* feat(content): add render app > solid

* fix: update Solid file sort

* doc: update readme

2023-02-28 11:31:25 +01:00

10 KiB

Raw Blame History

Web component JS frameworks quick overview by their syntax and features

Website: https://component-party.dev

🤔 Why ?

Many JS developers don't have a good overview of every existing JS framework with their own syntax and features. How do we solve this ? Developers love having framework overview by examples. It's a quick introduction before going deeper.

🔥 Progression

Svelte

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

React

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

Vue 3

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

SolidJS

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

Qwik

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

Angular

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

Lit

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

Vue 2

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

Ember

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

Alpine

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

Aurelia 1

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
- Context
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Render app
- Fetch data
- Router link
- Routing

🤝 Contributing

This site is built with Vite and Svelte. Site content is written in Markdown format located in content. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.

For local development, pnpm is preferred as package manager:

pnpm i
pnpm run dev

This project requires Node.js to be v16.0.0 or higher.

Add a framework

Fork the project and create a new branch
Add the new framework SVG logo in public/framework
Install the ESLint plugin associated to the framework
In frameworks.mjs, add a new entry with SVG link and ESLint configuration

🧑‍💻 Contributors

This project exists thanks to all the people who contribute. [Contribute].

⚖️ License

MIT. Made with 💖

10 KiB Raw Blame History