JSX on component

React exercise1

by Jacques Surveyer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="container"></div>

CSS

body {color:white; font-size:54px; background-color:pink}

Babel + JSX

// There are multiple ways to implement this component. This is one.
var VacancySign = React.createClass({
  render: function() {
    var text;
    if (this.props.hasvacancy) {
      text = 'Vacancy';
    } else {
      text = 'No Vacancy';
    }
    return <div>{text}</div>;
  }
});

/**
// Here is another implementation.
var VacancySign = React.createClass({
  render: function() {
    // Notice how we use a ternary expression, which is a valid JavaScript expression.
    // Uncomment and try using this implementation. Inspect the DOM result. How is it different?
    return <div>{this.props.hasvacancy ? '' : 'No '}Vacancy</div>;
  }
});
**/


ReactDOM.render(
  <VacancySign hasvacancy={false} />,
  document.getElementById('container')
);