Ever find yourself wondering how web developers create components that seamlessly integrate rendering logic and markup? Wonder no more! Enter JSX, a tool that has become an integral part of React development. JSX allows developers to write components with both rendering logic and markup together in one file, offering a more organized and efficient way of managing code than traditional methods of separating JavaScript, HTML, and CSS into separate files. While JSX looks similar to HTML, there are some key differences to keep in mind when working with it. Let's dive in and explore its origin, usefulness, and differences from HTML.
What is JSX?
JSX is a JavaScript syntax extension that allows developers to use "HTML-like" markup within their JavaScript files. JSX is short for JavaScript XML(Extensible Markup Language). MDN defines XML as "a markup language similar to HTML, but without predefined tags to use." This seems to make sense if we are to use JSX in place of HTML.
Where did it come from?
Jordan Walke is credited with the creation of JSX (and React) while at Facebook and launched them together in 2013. Apparently much of the push to construct React & JSX was tied to the need to better manage ads around the time Facebook bought Instagram, so yeah, a ton of ads.
What makes JSX useful?
When asking about JSX, you must consider React as well. Web developers traditionally used separate files for JavaScript, HTML & CSS. Logic, content and design/styling concerns were split into these files respectively. This means that to find ALL code relating to a specific 'component' one would need to look in all three files. Jordan's idea was to separate concerns into components. By keeping rendering logic and markup together you can ensure that they stay in sync even after edits. JSX comes into play here. It can be seen as the 'HTML-like' representation that is placed inside of your JavaScript. Here's an example.
This example shows how JSX can be embedded within JavaScript to create components organized by logical and markup concerns.
Differences in JSX and HTML?
While JSX looks like HTML, it is not HTML. One core difference is that in JSX, you must return a single parent element in order for it to compile. It is common practice to wrap everything in a div or a fragment "<></>". Another key difference is that in JSX, you can embed JavaScript expressions directly using curly braces. HTML would require a script tag & external JavaScript file. You use className instead of class for defining CSS classes, and you use camelCase instead of kebab-case for defining attributes. Another aspect unique to JSX is in-line styling. Styling can be achieved by setting style={styleObject} within an element. The style object can be defined above and passed in as a variable, or it can be defined directly inside the curly braces. Remember, you will need an initial set of curly braces to embed your JavaScript. Here is an example of how these can be done.
How do I use JavaScript within JSX?
To use JavaScript within JSX, you can embed JavaScript expressions directly using curly braces {}. This allows you to insert dynamic content or execute JavaScript logic within your markup. For example, variables can be passed as props to components and then used within the JSX. Additionally, you can use JavaScript functions to conditionally render elements or to map over arrays and create multiple elements. Remember, Any valid JavaScript code can be used within JSX. This means that you can use loops, conditional statements, and any other JavaScript functionality within your JSX code. Overall, the ability to use JavaScript inside of JSX makes it a valuable asset when creating dynamic and reusable components in React.
This is a simple example in which the name variable is passed to and displayed within our JSX h1.
JSX is allows developers to write components with both rendering logic and markup together in one file. It offers a more organized and efficient way of managing code than traditional methods of separating JavaScript, HTML, and CSS into separate files. Although JSX looks similar to HTML, there are some key differences to keep in mind when working with it. Overall, JSX has become an integral part of React development and is widely used in modern web development.
https://react.dev/learn/writing-markup-with-jsx
https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction
https://en.wikipedia.org/wiki/JSX_(JavaScript)
https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/
Top comments (0)