When I first saw JSX, I thought it was just HTML moved into a JavaScript file. It looks like HTML, it reads a bit like HTML, and it even uses familiar tags. That first impression is useful, but it is also misleading. JSX is not HTML. It is JavaScript expressions wearing HTML’s clothes, and once I understood that, React started to make much more sense.<\/p>\n\n
In plain HTML, a page is mostly static. You write the markup, the browser shows it, and if you want it to change, you add script on top. In JSX, the markup is part of the program. You can put a variable inside curly braces, call a function, or use a condition to decide what appears. The result is not a separate template file that the code occasionally touches. It is code that describes what the interface should look like for the current data.<\/p>\n\n
That is powerful because it keeps the logic and the output close together. If a button should only appear when a user is signed in, the condition lives right where the button is described. If a list should show one item for each entry in an array, the mapping lives right there too. I do not have to hunt through a separate template, a separate script, and a separate set of rules to understand why something is on the screen.<\/p>\n\n
The traps for beginners are mostly naming traps, and they make perfect sense once you remember that JSX is JavaScript. The most famous one is class versus className. In HTML, you would write class to style an element. In JSX, class is already a word JavaScript uses, so React uses className instead. The first time I hit that, I stared at a style that was not applying and felt foolish. It was not a bug. It was me writing HTML in a place where JavaScript rules apply.<\/p>\n\n
The same idea explains other small differences. Attributes are written in camelCase, event handlers are functions rather than strings, and expressions go in curly braces. None of that is there to be difficult. It is there because JSX is being turned into JavaScript calls behind the scenes, and those calls follow JavaScript conventions.<\/p>\n\n
Thinking in components follows naturally from this. A component is a small, reusable piece of interface: a button, a card, a header, a form field. Each one takes in data, decides what to show, and returns JSX. When I break a page into components, I am not just tidying the code. I am giving each part of the interface a clear job, so a change in one place does not quietly break something somewhere else.<\/p>\n\n
I also learned to keep components honest. If a component needs a long list of conditions, tangled logic, and five different jobs, that is usually a sign it should be split up. JSX makes it tempting to embed everything in the markup, but just because you can put logic there does not mean all of it belongs there. The best JSX I write reads like a description: this is what shows, and here is the small piece of logic that decides it.<\/p>\n\n
The practical takeaway is to stop treating JSX as HTML with extra features. Treat it as JavaScript that describes an interface. When something surprises you, ask what JavaScript would do with that expression, not what HTML would do with that tag. That one shift in thinking turns most JSX confusion into a simple, checkable question.<\/p>","protected":false},"excerpt":{"rendered":"
When I first saw JSX, I thought it was just HTML moved into a JavaScript file. It looks like HTML, it reads a bit like HTML, and it even uses familiar tags. That first impression is useful, but it is also misleading. JSX is not HTML. It is JavaScript expressions wearing HTML’s clothes, and once […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-technical-commentary"],"_links":{"self":[{"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":1,"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":41,"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/posts\/40\/revisions\/41"}],"wp:attachment":[{"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quentinpidcock.com\/content\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}