Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-24 22:46:02 -05:00
Code Issues Activity

Fix astro/jsx comparison table formatting (#673)

Browse source
This commit is contained in:
François Vaux 2021-07-13 18:01:49 +02:00 • committed by GitHub
parent a05957cccf
commit d07f3d4186
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
docs/core-concepts/astro-components.md
View file

@ -205,26 +205,23 @@ Inside of an expression, you must wrap multiple elements in a Fragment. Fragment
`.astro` files can end up looking very similar to `.jsx` files, but there are a few key differences. Here's a comparison between the two formats. `.astro` files can end up looking very similar to `.jsx` files, but there are a few key differences. Here's a comparison between the two formats.
| Feature | Astro | JSX | | Feature | Astro | JSX |
| ----------------------- | --------------- | ---------------- | | ---------------------------- | ------------------------------------------ | -------------------------------------------------- |
| File extension | `.astro` | `.jsx` or `.tsx` | | File extension | `.astro` | `.jsx` or `.tsx` |
| User-Defined Components | `<Capitalized>` | `<Capitalized>` | | User-Defined Components | `<Capitalized>` | `<Capitalized>` |
| Expression Syntax | `{}` | `{}` | | Expression Syntax | `{}` | `{}` |
| Spread Attributes | `{...props}` | `{...props}` | | Spread Attributes | `{...props}` | `{...props}` |
| Children | `<slot>` (with named slot support) | `children` |
| | Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` |
| Children | `<slot>` (with named slot support) | `children` | Inline Functions | `{items.map(item => <li>{item}</li>)}` | `{items.map(item => <li>{item}</li>)}` |
| | IDE Support | WIP - [VS Code][code-ext] | Phenomenal |
| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` | | Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope |
| Inline Functions | `{items.map(item => <li>{item}</li>)}` | `{items.map(item => <li>{item}</li>)}` | | Fragments | Automatic top-level, `<>` inside functions | Wrap with `<Fragment>` or `<>` |
| IDE Support | WIP - [VS Code][code-ext] | Phenomenal | | Multiple frameworks per-file | Yes | No |
| Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope | | Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) |
| Fragments | Automatic top-level, `<>` inside functions | Wrap with `<Fragment>` or `<>` | | Comment Style | `<!-- HTML -->` | `{/* JavaScript */}` |
| Multiple frameworks per-file | Yes | No | | Special Characters | `&nbsp;` | `{'\xa0'}` or `{String.fromCharCode(160)}` |
| Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) | | Attributes | `dash-case` | `camelCase` |
| Comment Style | `<!-- HTML -->` | `{/* JavaScript */}` |
| Special Characters | `&nbsp;` | `{'\xa0'}` or `{String.fromCharCode(160)}` |
| Attributes | `dash-case` | `camelCase` |
### URL resolution ### URL resolution