Many beginners have their first impression of React through JSX syntax, leading to misunderstandings such as:
- Is JSX the same as React or Is JSX equivalent to React components?
- Is JSX just another form of HTML?
- Since JSX can declare views and mix in JS expressions, can we write all logic within JSX?
These misunderstandings often cause various problems during development:
- Writing continuous JSX code exceeding a hundred or even nearly a thousand lines, resulting in lengthy and hard-to-maintain code.
- Adding HTML attributes to JSX tags that don’t work as expected.
- Persistent errors on the page after mixing JS expressions into JSX.
In fact, once you understand the relationship between JSX and React components, these issues become much easier to resolve.
Essentially, React is a declarative, component-based frontend framework/Library. JSX is a syntax extension for JavaScript. They’re often used together.
As the name suggests, declaring components is the most crucial part of React frontend development. JSX is used within the code to declare components, but JSX is not HTML, nor does it constitute the entirety of a component.
