Everyone these days is crazy about React. So, I thought I’d write a blog post explaining one of the integral features of React – JSX. This is the templating language used for building React components. JSX has everything you need to define the structure, customize appearance, and customize components in many other ways.
JSX is beginner-friendly because it looks a lot like HTML. It is familiar to anyone even remotely familiar with building websites. You don’t have to be a programmer to know HTML.
All of the rules in JSX are similar to those in HTML. For example, you there must be opening and close JSX tags for all elements and even components. You can also self-close the element or component.
One additional rule is that every component must be wrapped in one JSX element.
JSX does not allow you to embed if/else statements or for loop directly in the code. You can, however, use ternary operators or forEach() and map() methods as an alternative.
Pass down props in JSX
Obviously, you can pass down props in JSX. To do this, you need to define name of the prop as element attribute. Then specify value for that prop.
Prop values can be strings, numbers, or even objects and arrays.