Wtf is JSX?

React/Babel has a neat feature where you can easily build your own React DOM element by merely writing it in XML format. This is called 'JSX' which means 'Javascript XML'.
e.g. <myElement myAttr1={value1} myAttr2={value2} myAttr3={value3} /> That's It!: The values {value} can be inserted as a string, number, function return, or argument.

To create a JSX SVG element you can use all standard attribute names associated with that SVG element. Note, however, attribute names separated with the dash (-) require camelCase conventions (strokeWidth = stroke-width, fillOpacity = fill-opacity, etc.).


React Root SVG Source:

Babel Script (code):
  1.  const svgRoot=ReactDOM.render(<svg className="svg-root" id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  2.  
  3. var randColor = function() //---create random colors---
  4. {
  5.     return '#'+Math.floor(Math.random()*16777215).toString(16);
  6. }
  7.  
  8.     //--- build JSX svg elements---
  9.     var svgElems=[]
  10.     //---INCLUDE  key={} for each element---
  11.     svgElems.push(<rect key={'rect0'}  x={0} y={0} width={100} height={100} fill={randColor()} stroke={"black"} strokeWidth={3} rx={10} ry={10} />)
  12.     svgElems.push(<circle key={'circle0'}   cx={125} cy={180} r={50}  fill={randColor()} stroke={"black"} strokeWidth={3} strokeDasharray={"10,10"} />)
  13.     svgElems.push(<ellipse key={'ellipse0'}   cx={100} cy={280} rx={50} ry={30} fill={randColor()} stroke={"black"} strokeWidth={3} fillOpacity={.3} />)
  14.     //---object holding all elements---
  15.     var SVGElems = React.createClass({
  16.     render: function()
  17.     {
  18.         return  <g>{ svgElems }</g>  //---encapsulate in <g> element---
  19.     }
  20.     });
  21.  
  22.     ReactDOM.render(<SVGElems />, mySVG);
  23.  
  24.     //---local function to show svg source on page: React Root SVG Source---
  25.     showSourceSVG()