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.

//React node, which represents an actual HTML DOM node
var HTMLLi = React.createElement('li', {className:'bar'}, 'foo');

//React node, which represents a custom HTML DOM node
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.

//React node, which represents an actual HTML DOM node
var HTMLLi = <li className="bar">foo</li>;

//React node, which represents a custom HTML DOM node
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:

<body>
    <div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
    <div id="app2"><foo-bar class="bar" data-reactid=".1">foo</foo-bar></div>
</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):
accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls 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 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

results matching ""

    No results matching ""