Using Built-in Element Factories

React provides built-in shortcuts for creating commonly used HTML element nodes. These shortcuts are called React element factories.

A ReactElement-factory is simply a function that generates a ReactElement with a particular type property.

Using a built-in element factory (i.e., React.DOM.li()), the React element node <li id="li1">one</li> can be created like so:

  1. // uses React.DOM.li(props, children);
  2. var reactNodeLi = React.DOM.li({id: 'li1'}, 'one');

instead of using:

  1. // uses React.createElement(type, prop, children)
  2. var reactNodeLi = React.createElement('li', {id: 'li1'}, 'one');

Below I list out all of the built in node factories:

  1. a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,big,blockquote,body,br,button,
  2. canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl,
  3. dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,
  4. hr,html,i,iframe,img,input,ins,kbd,keygen,label,legend,li,link,main,map,mark,menu,
  5. menuitem,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,picture,
  6. pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strong,
  7. style,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,
  8. u,ul,var,video,wbr,circle,clipPath,defs,ellipse,g,image,line,linearGradient,mask,
  9. path,pattern,polygon,polyline,radialGradient,rect,stop,svg,text,tspa

Notes

  • If you are using JSX you might not ever use factories
  • React has a built-in helper for you to create custom factories. It’s React.createFactory(type).