Update framework-components.mdx

[JusticeMatthew]

Description (required)

Informs users that additional configuration is required when mixing jsx components and provides a link to the related page

See discussion #11742 for more info

Related issues & labels (optional)

• Closes Add link to "Mixing Frameworks" #11742

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	1f59454
🔍 Latest deploy log	https://app.netlify.com/projects/astro-docs-2/deploys/686073aa4a91b90008d3c7e5
😎 Deploy Preview	https://deploy-preview-11955--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[astrobot-houston]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
en/guides/framework-components.mdx	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[sarah11918]

Thank you for jumping on this issue! I think this is important and helpful! 🙌

See below for my specific comments!

[sarah11918]

Suggested change

	You can import and render components from multiple frameworks in the same Astro component. [Additional configuration](/en/guides/integrations-guide/react/#combining-multiple-jsx-frameworks) is required when mixing JSX frameworks.
	You can import and render components from multiple frameworks in the same Astro component.

I think we'd rather not clutter up the basic "here's how it works/what it looks like" before the code snippet, so we can quickly get this major point across.

I'd suggest something between the snippet and the caution, maybe like:

Astro will recognize and render your component based on its file extension. To distinguish between frameworks that use the same file extension, [additional configuration when rendering multiple JSX frameworks](/en/guides/integrations-guide/react/#combining-multiple-jsx-frameworks) (e.g. React and Preact) is required.

(also, one of the reasons for my rewording is thinking about what text is linked: "additional configuration" isn't as revealing about what the link is for as e.g. "additional configuration when rendering multiple JSX framworks" -- I always think about it as, what if the link text were my navigation/table of contents. Does it clearly tell me what is at the link the same way a section header should tell me what content is contained within that section?)

What do you think?

[JusticeMatthew]

I think that's a great way to think about a link, very purpose driven design 😄

Will update it 👍

[sarah11918]

@JusticeMatthew Are you still up for updating this? (I don't see another commit)

[JusticeMatthew]

Yes sorry, fell through the cracks with my computer dying 😅 (PC is repaird now)

Will update it today