JSX in detail
JSX is an XML/HTML like syntax used in React that extends ES6 so XML/HTML like text can include in React code.
First of all, you have to determine the type of React element. React component referred by Capitalized JSX tag.
2.React must be in scope:
React library must be in scope when using JSX. Both of the imports necessary in this code.
We can refer to React components using dot notation in JSX. it’s convenient for referencing React components from a module that exports multiple React parts.
In JSX element type start with a capital letter. But when an element type starts with a lowercase letter, it refers to a build-in component like <dev> or <span>.
5.Type of Runtime:
A general expression can not be used as the React element type. First, you have to assign capitalized variable to indicate the type of element, if you want to use a general expression.
There are some different ways to specify props in JSX.
#.Props Default to “True”.
#.Children in JSX
#.Function as children
#.Booleans, Null, and Undefined Are Ignored.
8. String Literals
You can pass a string literal as a prop. These two JSX expressions are equivalent.
9. Props Default to “True”.
When you pass no value fr a prop, it defaults to true.
10. Spread Attributes.
By using … as a “Spread” operator you can pass the whole props object when you have already had props as an object.