JSX

Description #

JSX (JavaScript XML) is a syntax extension for JavaScript commonly used with React. It allows developers to write HTML-like code directly within JavaScript, making UI component development intuitive and declarative.

History #

JSX was introduced by Facebook in 2013 as part of the React library. It was designed to simplify the creation of complex UIs by allowing developers to write HTML structures inside JavaScript code. Though initially met with skepticism, JSX quickly gained popularity due to its clarity and efficiency in representing UI components. Today, it is a foundational part of React development.

Hello World Code #

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>Hello, World!</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

How to Run #

JSX needs to be transpiled (usually via Babel) before it can run in browsers.

• Online Editors:
  • CodeSandbox
  • StackBlitz JSX Starter
  • PlayCode JSX Runner
• Local Setup:
  • Use create-react-app or Vite to scaffold a project
  • JSX is transformed using Babel

Key Concepts #

1. Combines HTML with JavaScript
2. Requires Babel to compile
3. Commonly used in React
4. Enables dynamic rendering
5. Elements are translated to React.createElement()
6. Syntax sugar for component trees
7. JSX must return one parent element
8. CamelCase attributes (e.g., className)
9. Can embed JavaScript expressions with {}
10. JSX files typically use .jsx extension

Try It Online #

• CodeSandbox – JSX
• StackBlitz React JSX Starter
• PlayCode – JSX Editor

Fun Facts #

• JSX is not required to use React, but it makes writing UI components significantly easier.
• It is inspired by XML syntax but follows JavaScript rules.
• Tools like Babel convert JSX into plain JavaScript behind the scenes.

Resources #

• React Official JSX Docs
• MDN – JSX
• Babel JSX Transform
• JSX Overview (W3Schools)