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>one</li> can be created like so:
// uses React.DOM.li(props, children);
var reactNodeLi = React.DOM.li({id:'li1'}, 'one');
instead of using:
// uses React.createElement(type, prop, children)
var reactNodeLi = React.createElement('li', null, 'one');
Below I list out all of the built in node factories:
a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,big,blockquote,body,br,button,
canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl,
dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,
hr,html,i,iframe,img,input,ins,kbd,keygen,label,legend,li,link,main,map,mark,menu,
menuitem,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,picture,
pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strong,
style,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,
u,ul,var,video,wbr,circle,clipPath,defs,ellipse,g,image,line,linearGradient,mask,
path,pattern,polygon,polyline,radialGradient,rect,stop,svg,text,tspa
Notes
- If you are using JSX you might not ever use factories
- Custom factories` can be created if needed.
