"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["When ", _jsx(_components.a, { href: "https://dev.to/mroman7/the-fundamentals-of-reactjs-a-rich-understanding-of-its-basics-118l", children: "diving into the world of ReactJS" }), ", one of the first things you encounter is JSX. JSX, or JavaScript XML, is a syntax extension that enables you to write HTML-like code within JavaScript. Despite its initial appearance, JSX is a powerful tool that enhances the way we build user interfaces in React. In this blog post, we’ll take a deep dive into JSX syntax, exploring its intricacies, capabilities, and best practices."] }), "\n", _jsx(_components.p, { children: "JSX was introduced by Facebook as part of the React library. It was designed to make the process of writing user interfaces in JavaScript easier and more intuitive. Facebook’s development team recognized that traditional JavaScript was not well-suited for describing UIs, which led to the creation of JSX." }), "\n", _jsx(_components.h2, { children: "Understanding JSX" }), "\n", _jsx(_components.p, { children: "JSX allows developers to write UI components using a syntax that closely resembles HTML. It’s important to note that JSX is not valid JavaScript or HTML on its own. Instead, JSX code gets transpiled into regular JavaScript code before being executed in the browser. This transpilation process is handled by tools like Babel, which convert JSX syntax into React.createElement calls." }), "\n", _jsx(_components.p, { children: "Let’s start with a basic example of JSX:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Hello, world!;" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["In this example, ", _jsx("h1", { children: "Hello, world!" }), " looks like HTML, but it’s actually JSX. When transpiled, it becomes:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "createElement" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'h1'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "null" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Hello, world!'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }) }) }) }), "\n", _jsx(_components.p, { children: "This React.createElement function creates a React element, which is used to render content to the DOM." }), "\n", _jsx(_components.h2, { children: "How Does JSX Work?" }), "\n", _jsxs(_components.p, { children: ["JSX is not valid JavaScript or HTML on its own. Under the hood, JSX is transpiled to regular JavaScript by a tool like Babel before the code runs in the browser. This transpilation process converts JSX into ", _jsx(_components.a, { href: "https://react.dev/reference/react/createElement", children: "React.createElement" }), " calls."] }), "\n", _jsx(_components.p, { children: "For example, the JSX:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Hello, world!;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "gets transpiled to:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "createElement" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'h1'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "null" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Hello, world!'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "The React.createElement function is what actually creates the React element used to update the UI." }), "\n", _jsx(_components.h2, { children: "How JSX Syntax benefits us?" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Improved Readability" }), ": JSX’s HTML-like syntax makes the code more readable and easier to understand, especially for those who are already familiar with HTML."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Component-based Structure" }), ": JSX fits naturally with React’s component-based architecture, making it easy to see the structure and hierarchy of components."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Enhanced Developer Experience" }), ": With JSX, you get better error messages and warnings during development, which helps in debugging and maintaining the code."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Problem JSX Solved" }), ": JSX simplifies this process by allowing developers to write HTML-like code directly within JavaScript, which is then seamlessly transformed into React elements."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Is JSX Mandatory in React" }), ": No, JSX is not mandatory in React, but it is highly recommended. You can write React code using plain JavaScript by calling React.createElement directly."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "JSX Features and Syntax" }), "\n", _jsx(_components.h3, { children: "Embedding Expressions" }), "\n", _jsxs(_components.p, { children: ["One of the powerful features of JSX is the ability to embed JavaScript expressions within curly braces ", ". This allows you to include dynamic content within your JSX code:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " name" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'Alice'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Hello, {name}!;" })] })] }) }) }), "\n", _jsx(_components.h3, { children: "Attributes" }), "\n", _jsx(_components.p, { children: "JSX supports HTML-like attributes for elements. However, there are some differences. For example, the class attribute in HTML becomes className in JSX:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"container\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Content here;" })] }) }) }) }), "\n", _jsx(_components.h3, { children: "Self-Closing Tags" }), "\n", _jsx(_components.p, { children: "Similar to HTML, elements with no children must be self-closed in JSX:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "img" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " src" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"image.jpg\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " alt" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"A description\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />;" })] }) }) }) }), "\n", _jsx(_components.h3, { children: "Conditional Rendering" }), "\n", _jsx(_components.p, { children: "JSX allows you to render elements conditionally using JavaScript conditions:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " isLoggedIn" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " isLoggedIn " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Welcome back! " }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Please sign up.;" })] })] }) }) }), "\n", _jsx(_components.h3, { children: "Looping" }), "\n", _jsx(_components.p, { children: "You can use JavaScript loops like map to render lists of elements:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " numbers" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "3" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "4" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "5" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "];" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " listItems" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " numbers." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "number" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "li" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{number." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "toString" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "()}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {number}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "ul" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{listItems};" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.h3, { children: "Fragments" }), "\n", _jsx(_components.p, { children: "JSX supports fragments, which allow you to group multiple elements without adding extra nodes to the DOM:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <>" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Hello, world!" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Welcome to learning JSX." })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.h3, { children: "Inline Styles" }), "\n", _jsx(_components.p, { children: "You can style JSX elements using inline styles by passing a JavaScript object to the style attribute:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{{ color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'blue'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", fontSize: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'24px'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }}>Hello, world!;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.h2, { children: "Best Practices for JSX" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Keep Components Small and Focused" }), ": Each component should do one thing and do it well, promoting reusability and readability.\nUse Descriptive Names: Clearly name your components and props to make your code more understandable."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Consistent Formatting" }), ": Follow a consistent code style to improve maintainability."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Avoid Inline Styles" }), ": For better maintainability and consistency, use CSS classes or styled-components instead of inline styles."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Conclusion" }), "\n", _jsx(_components.p, { children: "JSX is a powerful syntax extension for JavaScript that enhances the React development experience. It makes it easier to write and understand UI components by allowing developers to use an HTML-like syntax directly within JavaScript. By solving the verbosity and complexity issues of traditional JavaScript UI creation, JSX has become an essential tool for React developers. Whether you’re new to React or looking to deepen your understanding, mastering JSX is a key step towards becoming a proficient React developer. Happy coding!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };