Chapter 5. React with JSX
React.createElement and using factories.
An alternative to typing out verbose
React Elements as JSX
Facebook’s React team released JSX when they released React to provide a concise syntax for creating complex DOM trees with attributes. They also hoped to make React more readable, like HTML and XML.
In JSX, an element’s type is specified with a tag. The tag’s attributes represent the properties. The element’s children can be added between the opening and closing tags.
You can also add other JSX elements as children. If you have an unordered list, you can add child list item elements to it with JSX tags. It looks very similar to HTML (see Example 5-1).
Example 5-1. JSX for an unordered list
<li>1 lb Salmon
<li>1 cup Pine Nuts
<li>2 cups Butter Lettuce
<li>1 Yellow Squash
<li>1/2 cup Olive Oil
<li>3 cloves of Garlic
JSX works with components as well. Simply define the component using the class name. ...