up:: [[React MOC]] tags:: #on/computing/programming # JSX Markup *JSX* is a syntax extension for JavaScript. It allows you to write HTML-like markup inside a JavaScript file. It is common for markup (HTML) and logic (JavaScript) to exist in separate files, but in [[React MOC|React]] the rendering logic and the markup live together in the same place. This place is a [[React Components|component]]. An example of JSX is shown below. ```jsx const Header = () => { return ( <div> <h1>Hello</h1> </div> ); }; ``` JSX looks a lot like HTML but is a bit more strict and can display dynamic information. > [!NOTE] JSX and React > JSX and React are two separate things. They're often used together, but can be used independently. The main rules of JSX are: 1. Return a single root element. 2. Close all the tags. 3. camelCase most of the things. For more information about JSX, see [this page of the React documentation](https://react.dev/learn/writing-markup-with-jsx). ## References “Writing Markup with JSX – React.” Accessed March 14, 2024. [https://react.dev/learn/writing-markup-with-jsx](https://react.dev/learn/writing-markup-with-jsx).