diff options
| author |  Zade Viggers <74938858+zadeviggers@users.noreply.github.com>
| 2022-01-11 11:17:07 +1300 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-01-10 17:17:07 -0500 |
| commit | 973751e31b52c301ff21ba17b120d9e488614a45 (patch) | |
| tree | 81ef201f3a448637bc2425d79da76ccde713a697 /docs/src | |
| parent | 0b0df4168b2a750e312c1b5e0a84305e14b85da0 (diff) | |
| download | astro-973751e31b52c301ff21ba17b120d9e488614a45.tar.gz astro-973751e31b52c301ff21ba17b120d9e488614a45.tar.zst astro-973751e31b52c301ff21ba17b120d9e488614a45.zip | |
Note that Astro also supports `<Fragment>` syntax (#2354)
Diffstat (limited to 'docs/src')
| -rw-r--r-- | docs/src/pages/en/core-concepts/astro-components.md | 34 |
1 files changed, 18 insertions, 16 deletions
diff --git a/docs/src/pages/en/core-concepts/astro-components.md b/docs/src/pages/en/core-concepts/astro-components.md index 0c7f6d71a..629ae74e6 100644 --- a/docs/src/pages/en/core-concepts/astro-components.md +++ b/docs/src/pages/en/core-concepts/astro-components.md @@ -275,6 +275,8 @@ When working inside a JSX expression, however, you must wrap multiple elements i A Fragment must open with `<>` and close with `</>`. Don't worry if you forget this, Astro's compiler will warn you that you need to add one. +> **Note:** Astro also supports opening a fragment with `<Fragment>` and closing it with `</Fragment>` if you prefer to use that syntax. + ```astro --- const items = ["Dog", "Cat", "Platipus"]; @@ -327,22 +329,22 @@ import TwitterTimeline from '../components/TwitterTimeline.astro'; `.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 | -| ---------------------------- | ------------------------------------------ | -------------------------------------------------- | -| File extension | `.astro` | `.jsx` or `.tsx` | -| User-Defined Components | `<Capitalized>` | `<Capitalized>` | -| Expression Syntax | `{}` | `{}` | -| Spread Attributes | `{...props}` | `{...props}` | -| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` | -| Inline Functions | `{items.map(item => <li>{item}</li>)}` | `{items.map(item => <li>{item}</li>)}` | -| IDE Support | WIP - [VS Code][code-ext] | Phenomenal | -| Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope | -| Fragments | Automatic top-level, `<>` inside functions | Wrap with `<Fragment>` or `<>` | -| Multiple frameworks per-file | Yes | No | -| Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) | -| Comment Style | `<!-- HTML -->` | `{/_ JavaScript _/} | -| Special Characters | ` ` | ` ` | -| Attributes | `dash-case` | `camelCase` | +| Feature | Astro | JSX | +| ---------------------------- | ---------------------------------------------------------- | -------------------------------------------------- | +| File extension | `.astro` | `.jsx` or `.tsx` | +| User-Defined Components | `<Capitalized>` | `<Capitalized>` | +| Expression Syntax | `{}` | `{}` | +| Spread Attributes | `{...props}` | `{...props}` | +| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` | +| Inline Functions | `{items.map(item => <li>{item}</li>)}` | `{items.map(item => <li>{item}</li>)}` | +| IDE Support | WIP - [VS Code][code-ext] | Phenomenal | +| Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope | +| Fragments | Automatic top-level, `<Fragment>` or `<>` inside functions | Wrap with `<Fragment>` or `<>` | +| Multiple frameworks per-file | Yes | No | +| Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) | +| Comment Style | `<!-- HTML -->` | `{/_ JavaScript _/} | +| Special Characters | ` ` | ` ` | +| Attributes | `dash-case` | `camelCase` | ## URL resolution |