What Else You Should Know
Explore the fundamentals of JSX syntax and its role in React. Understand when to use parentheses for multi-line JSX, embed JavaScript expressions in props, and apply the correct attribute names. Learn how React handles inline styles differently from HTML and how to write comments properly within JSX code. This lesson equips you to write cleaner and more consistent React components using best practices for JSX.
We'll cover the following...
Parentheses
Depending on your level of JavaScript knowledge, you may have noticed a few details. In some examples discussed previously, parentheses appear in seemingly odd places. The parentheses, ( and ), need to be wrapped around any JSX which spans more than one line — not quite so random anymore.
You can usually just put your JSX in parentheses without a problem. Many people actually prefer this practice as all JSX is uniformly treated the same way, but only multi-line JSX actually requires parentheses.
If an expression instead of a string should be used inside our props, we should use curly brackets ({ and }). These indicate to React that an expression is contained within them as opposed to a plain string, which would be indicated by single or double quotes.
Note: For each object, we need to use two opening and two closing braces. The outer braces introduce the expression, ...