javascriptreactjsnpmtonic

Tonic getElementById()

I'm trying to setup a code example on tonicdev.com for my open source react component hosted on Npm.

Here's the code I'm trying to run (live edit on tonicdev.com here):

var React = require('react');
var ReactDOM = require('react-dom');
var {Calendar, CalendarControls} = require('react-yearly-calendar');

function onDatePicked(date) {
  alert(date);
}

ReactDOM.render(
  <Calendar
    year={2016}
    onPickDate={onDatePicked}
  />,
  document.getElementById('calendar')
);

Tonic complains because it doesn't have a document selector:

No document object in node. Tonic is a node environment, so document and other browser features won't exist.

But it does not provide an alternative. Since this is a React component I should render it with ReactDOM.render, which requires as second argument a domContainerNode. How can I obtain one in Tonic?

More generally: am I doing something wrong? Is there any way to run React examples in Tonic?

Solution

  • Gavino, you got it all wrong. Tonic is a node prototyping service which means it allows you run / test code for nodeJS.

    As you may already know, nodeJS is a backend service which means it is server-side. Therefore, a document or any other browser-specific ( client-side features ) are not available.

    Use nodeJS to get data out of your server towards the /public folder as that is the place in which you want to use the following:

    function onDatePicked(date) {
  alert(date);
}

ReactDOM.render(
  <Calendar
    year={2016}
    onPickDate={onDatePicked}
  />,
  document.getElementById('calendar')
);