Each framework makes it easy to solve certain problems, while others remain outside its reach. React is no exception. React works best when we understand the problems that it is designed to solve. This means figuring out the boundaries and limitations of the framework and designing our solution in such a way that it causes minimum cognitive dissonance. In this series I will explain how I interpret the features of React framework and will try to make React intuitive for everyone. In doing so, this series will stay away from discussing the merits and demerits of React over other front-end frameworks.
There are two categories of JSX elements — native HTML tags and user created React components. Native HTML tags are named with lowercase letters whereas names of React components start with a uppercase letter. This distinction is made to facilitate React’s internal processing of native HTML tags. React maintains a whitelist of all valid HTML tags and checks the validity of JSX element being native HTML tag if its name is in lowercase. Otherwise it treats the JSX as a React component.
In order to prove that JSX is a blessing for front-end developers, here’s an exercise. Create a three level deep HTML structure with three different methods:
- React without JSX — using repeated calls to React.createElement method
- React with JSX
JSX is a great visual aid. With JSX, we can tell React exactly how we want our content to look like. The declarative syntax hides senseless complexity. There is no need to get tangled up in unnecessary details that distract developers from their true goals.
After reading this article, I hope you will come to like JSX a little better. However, in case I have failed in my attempt, I would appreciate constructive feedback. In the second article in this series, I will talk about Stateless Functional Components and how they can play a crucial role in building complex User Interfaces.