JSX allows us to add HTML elements in React, thus making it easier to write React components in an efficient and expressive manner. In this blog I will briefly explain what JSX is, then I will focus on explaining some of the unique syntax of JSX.
What is JSX?
What JSX code looks like?
Just like in HTML, we can nest JSX elements inside of other JSX elements. Nested JSX expressions can also be saved as variables, passed to functions etc. Multi-line JSX expressions should be wrapped in parentheses:
JSX expressions should have exactly one outermost element. If JSX expression has multiple outer elements, the expression should be wrapped in a <div></div>.
A react component returns JSX with the render() method and every component you use needs a render() method to return JSX. Without an element that wraps the returned JSX in a component, we will get an error.
JSX allows us to write HTML in React. JSX provides a significant boost to readability this is especially true for building complex applications, where components can be children of other components. For more in depth JSX tutorial visit: https://reactjs.org/docs/jsx-in-depth.html