mrzarkovic

var Navbar = React.createClass({
    render: function () {
        return (
            <div>
                This is navbar
            </div>
        );
    }
});

mrzarkovic

SELECT HOLD.TARGETFINISH, HOLD.TICKETID, HOLD.ACTUALSTART, HOLD.ACTUALFINISH, TO_CHAR(TO_DATE(HOLD.ACTUALSTART,'yyyy-MM-dd HH24:MI'),'YYYY-IW') as START_WEEK, TO_CHAR(TO_DATE(HOLD.ACTUALFINISH,'yyyy-MM-dd HH24:MI'),'YYYY-IW') as END_WEEK, HOLD.RESOLVER, HOLD.RESOLVEDBY, HOLD.CLASSIFICATIONID, HOLD.PRIORITY, HOLD.INDICATEDPRIORITY1, HOLD.RESPONSE_TIME, HOLD.RESOLUTION_TIME, HOLD.HOLD_DUR, HOLD.EXPECTED_RESOLUTION, INPROG.INPROG_DUR as INPROG_SERVICE_DESK_DUR, CASE 
WHEN HOLD.RESOLUTION_TIME > HOLD.EXPECTED_RESOLUTION THEN 'NO'
ELSE 'YES'
END as SLA
FROM (
	SELECT C.TARGETFINISH, C.TICKETID, TO_CHAR(C.ACTUALSTART,'YYYY-MM-DD HH24:MI') as ACTUALSTART, C.ACTUALFINISH, C.RESOLVER, C.RESOLVEDBY, C.CLASSIFICATIONID, C.PRIORITY, C.INDICATEDPRIORITY1, C.RESPONSE_TIME, C.RESOLUTION_TIME, CASE 
	WHEN D.HOLD_DUR is null THEN 0 
	ELSE D.HOLD_DUR 
	END as HOLD_DUR, C.EXPECTED_resolution
	FROM (

mrzarkovic

// Kreiranje React elementa
var Title = React.createElement(
  'h1',
  {className: 'main-title'},
  'Naslov'
);

// React bi napravio sledeći objekat
{
  type: 'h1',

mrzarkovic

var Container = React.createElement(
  'div',
  {className: 'container'},
  React.createElement(
    'h1',
    {className: 'main-title'},
    'Naslov'
  )
); 

mrzarkovic

// JSX React element
var Title = <h1 className="main-title">Naslov</h1>;

// Isto kao da smo napisali:
var Title = React.createElement(
  'h1',
  {className: 'main-title'},
  'Naslov'
);

mrzarkovic

function TitleComponent (props) {
  return React.createElement(
    'h1',
    {className: 'main-title'},
    props.title
  );
  // Ili JSX
  return <h1 className="main-title">{props.title}</h1>;
}

mrzarkovic

var TitleComponent = React.createClass({
  render: function () {
    return React.createElement('h1', {className: 'main-title'}, this.props.title);
    // Ili JSX sintaksa:
    return <h1 className="main-title">{this.props.title}</h1>;
  },
});

mrzarkovic

// ES6 + JSX
class TitleComponent extends React.Component {
  render () {
    return <h1 className="main-title">{this.props.title}</h1>;
  }
}

mrzarkovic

render () 
  return (
    <div className="container">
      <h1 className="main-title”>Naslov</h1>
    </div>
  );
}

mrzarkovic

// Primer
var Title = React.createElement(
  TitleComponent, {
    title: 'Naslov', 
    className: 'main-title'
  }
);
// Ili JSX
var Title = <TitleComponent title="Naslov" className="main-title"/>;