</div>or has to be self-closing (
React.createElement()calls at a later step in our build process. Remember that I mentioned in the introduction that React creates a tree-like structure of elements — this happens here.
createElement()call denotes the tag name of the DOM element's string representation or another JSX element (in this case this would only be a function reference).
createElement()call are the props of an element. Props are comparable to HTML attributes but are much more flexible than regular HTML attributes. They are not limited to strings but can also include arrays, objects or even other React components as their value.
divcontains two children: two paragraphs (
<p>) . These in turn do not have any other props though (
null) and only contain a text string (
A paragraph in JSXand
Another paragraph) as their children.
lointo a single value
ifin this snippet, we are left with a Logical AND operator which is indeed an expression and returns a value (in this case
classNamewas used in the example. The DOM Element API of the browser lets us access the
classattribute of an element by using
Element.className. React does just the same and borrows from the properties of the DOM
classis a reserved word which is why we use
classNameinstead. Same applies to
<label>which input field it belongs to. Instead of using
for, JSX code can employ the HTMLLabelElement Interface
accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap
//) cannot be used in JSX meaning even short one-line comments need to be written with the above (