[Hacktoberfest]: Add content for React - JSX (JavaScript XML)

📝 Issue Description

Add the following content for JSX (JavaScript XML) under REACT

What is JSX?
Embedding Expressions in JSX
JSX Syntax Rules (Single Parent Element, Self-Closing Tags)
JSX vs HTML
Conditional JSX Rendering

File you will be working on: src\content\docs\react\jsx.mdx

🎯 Expected Outcome

The expected outcome is to add a well-documented and informative section under React that covers the following topics:

What is JSX?: Explanation of JSX and how it works in React.
Embedding Expressions in JSX: Instructions on embedding JavaScript expressions within JSX.
JSX Syntax Rules: Key rules like wrapping JSX in a single parent element and using self-closing tags.
JSX vs HTML: Comparison between JSX and standard HTML, focusing on their differences.
Conditional JSX Rendering: Explanation and examples of rendering elements conditionally in JSX.

The content should be written clearly, with examples where necessary, and provide value for developers who are either new to JSX or need a refresher. Please don't make use of the AIs.

🔧 Solution Guidance (Optional)

Make use of Astro Star Light Components

📋 Steps to Reproduce

Navigate to src\content\docs\react\jsx.mdx file in the repository.
Add content for each of the 5 sections mentioned above.
Ensure the content is formatted properly using MDX.

💡 Additional Context (Optional)

🎃 Hacktoberfest Participation

✔️ This issue is tagged for Hacktoberfest. ✔️ PR should reference this issue and adhere to contribution guidelines.

👥 Contributors

If you are working on this issue, please comment below to let us know. Feel free to ask any questions! Don't forget to go through the Code of Conduct and follow the CONTRIBUTING guidelines.

Thank you for contributing to Hacktoberfest and helping improve this project!

CodeQuestic / OpenPrep