diff --git a/src/content/docs/en/guides/content-collections.mdx b/src/content/docs/en/guides/content-collections.mdx index 9a71dc2964fba..56d782aefda86 100644 --- a/src/content/docs/en/guides/content-collections.mdx +++ b/src/content/docs/en/guides/content-collections.mdx @@ -564,12 +564,12 @@ Alternatively, you can set this value in your editor settings. For example, to s ```json { "json.schemas": [ - { - "fileMatch": [ - "/src/content/authors/**" - ], - "url": "./.astro/collections/authors.schema.json" - } + { + "fileMatch": [ + "/src/content/authors/**" + ], + "url": "./.astro/collections/authors.schema.json" + } ] } ``` diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx index f8a59d4faa167..cacc1eb6950c6 100644 --- a/src/content/docs/en/guides/imports.mdx +++ b/src/content/docs/en/guides/imports.mdx @@ -15,10 +15,9 @@ The following file types are supported out-of-the-box by Astro: - Astro Components (`.astro`) - Markdown (`.md`, `.markdown`, etc.) - JavaScript (`.js`, `.mjs`) -- TypeScript (`.ts`, `.tsx`) +- TypeScript (`.ts`) - NPM Packages - JSON (`.json`) -- JSX (`.jsx`, `.tsx`) - CSS (`.css`) - CSS Modules (`.module.css`) - Images & Assets (`.svg`, `.jpg`, `.png`, etc.) @@ -41,6 +40,13 @@ import { getUser } from './user.js'; JavaScript can be imported using normal ESM `import` & `export` syntax. +:::note[Importing JSX files] + +An appropriate [UI framework](/en/guides/framework-components/) ([React](/en/guides/integrations-guide/react/), [Preact](/en/guides/integrations-guide/preact/), or [Solid](/en/guides/integrations-guide/solid-js/)) is required to render JSX/TSX files. +Use `.jsx`/`.tsx` extensions where appropriate, as Astro does not support JSX in `.js`/`.ts` files. + +::: + ### TypeScript ```js @@ -65,20 +71,6 @@ import MyComponent from "./MyComponent"; // MyComponent.tsx Read more about [TypeScript support in Astro](/en/guides/typescript/). -### JSX / TSX - -```js -import { MyComponent } from './MyComponent.jsx'; -``` - -Astro includes built-in support for JSX (`*.jsx` and `*.tsx`) files in your project. JSX syntax is automatically transpiled to JavaScript. - -While Astro understands JSX syntax out-of-the-box, you will need to include a framework integration to properly render frameworks like React, Preact and Solid. Check out our [Using Integrations](/en/guides/integrations-guide/) guide to learn more. - -:::note -**Astro does not support JSX in `.js`/`.ts` files.** JSX will only be handled inside of files that end with the `.jsx` and `.tsx` file extensions. -::: - ### NPM Packages If you've installed an NPM package, you can import it in Astro. diff --git a/src/content/docs/fr/basics/astro-components.mdx b/src/content/docs/fr/basics/astro-components.mdx index 19a77b4583127..99a48749057de 100644 --- a/src/content/docs/fr/basics/astro-components.mdx +++ b/src/content/docs/fr/basics/astro-components.mdx @@ -74,7 +74,7 @@ const myFavoritePokemon = [/* ... */]; const { title } = Astro.props; --- -{/* La syntaxe des commentaires JavaScipt est aussi valide ! */} +{/* La syntaxe des commentaires JavaScript est aussi valide ! */}

Hello, world!