Creating React Nodes With JSX

Working off the knowledge given in the previous chapter you should be familiar with creating React nodes using the React.createElement() function. For example, using this function one can create React nodes which both represent HTML DOM nodes and custom HTML DOM nodes. Below I use this familiar function to create two React nodes.

  1. //React node, which represents an actual HTML DOM node
  2. var HTMLLi = React.createElement('li', {className:'bar'}, 'foo');
  4. //React node, which represents a custom HTML DOM node
  5. var HTMLCustom = React.createElement('foo-bar', {className:'bar'}, 'foo');

To use JSX instead (assuming you have Babel setup) of React.createElement() to create these React nodes one just has to replace React.createElement() function calls with the HTML/XML like tags which represent the HTML you’d like the virtual DOM to spit out. The above code can be written in JSX like so.

  1. //React node, which represents an actual HTML DOM node
  2. var HTMLLi = <li className="bar">foo</li>;
  4. //React node, which represents a custom HTML DOM node
  5. var HTMLCustom = <foo-bar className="bar" >foo</foo-bar>;

Notice that the JSX is not in a JavaScript string format and can just be writing as if you are writing it inside of an .html file. As stated many times already JSX is then transformed back into the React.createElement() functions calls by Babel. You can see the transformation occurring in the following JSFiddle (i.e., Babel is transforming JSX to JavaScript, then React is creating DOM nodes).

source code

If you were to examine the actual HTML produced in the above JSfiddle it would look like so:

  1. <body>
  2.     <div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
  3.     <div id="app2"><foo-bar class="bar" data-reactid=".1">foo</foo-bar></div>
  4. </body>

Creating React nodes using JSX is as simple as writing HTML like code in your JavaScript files.

Notes

  • JSX tags support the XML self close syntax so you can optionally leave the closing tag off when no child node is used.
  • If you pass props/attributes to native HTML elements that do not exist in the HTML specification, React will not render them to the actual DOM. However, if you use a custom element (i.e., not a stand HTML element) then arbitrary/custom attributes will be added to custom elements (e.g., <x-my-component custom-attribute="foo" />).
  • The class attribute has to be written className
  • The for attribute has to be written htmlFor
  • The style attribute takes an object of camel-cased style properties
  • All attributes are camel-cased (e.g., accept-charset is written as acceptCharset)
  • To represent HTML elements, ensure the HTML tag is lower-cased
  • The following are the HTML attributes that React supports (shown in camel-case):
  1. accept acceptCharset accessKey action allowFullScreen allowTransparency alt
  2. async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
  3. charSet checked classID className colSpan cols content contentEditable
  4. contextMenu controls coords crossOrigin data dateTime default defer dir
  5. disabled download draggable encType form formAction formEncType formMethod
  6. formNoValidate formTarget frameBorder headers height hidden high href hrefLang
  7. htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
  8. lang list loop low manifest marginHeight marginWidth max maxLength media
  9. mediaGroup method min minLength multiple muted name noValidate nonce open
  10. optimum pattern placeholder poster preload radioGroup readOnly rel required
  11. reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
  12. shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
  13. summary tabIndex target title type useMap value width wmode wrap