This example is from Facebook's React tutorial. By their own admission, it's some very unusual React code (because ReactDOM.render gets called many times; more typically in a React application ReactDOM.render gets called only once). In the tutorial they're taking very small steps so you get some fundamental ideas. Subsequent steps in the tutorial will rework this small feature into a fuller React application, written in more idiomatic React.
Let's step through the code. It's really basic JavaScript -- barely any React at this point. First a function called tick gets defined. Then the built-in function setInterval is called. Two arguments are passed into setInterval: the tick function and a delay of 1000 (milliseconds). So, in other words, this code
Says to wait one second then execute the tick function, then wait another second and execute the tick function again, and so on. setInterval is a built-in function that executes the callback function you provide, repeatedly, delayed by the amount of time you indicate. (There are some nuances with setInterval, but they're not important here.)
Each time the tick function gets executed, a new React element (stored in the local variable "element") gets created. That element will produce the HTML markup per the JSX code. The part in curly brackets -- {new Date().toLocaleTimeString()} -- allows a JavaScript expression to get executed as part of generating the HTML. In this case, it creates a new Date object (representing the date/time at the time of execution) formatted per Locale conventions. ReactDOM.render finds the DOM element with the ID "root" and sets the HTML generated by the React element "element" as the "root" element's inner HTML.
So each time the tick function gets executed, it replaces some HTML in the DOM. That HTML displays the current time.
(This exact example could have been coded fairly easily with plain, vanilla JavaScript, by the way.)
From a React standpoint, this approach (conceptually) is fairly inefficient, constantly rewriting the entirety of the HTML under the "root" element. Later examples in the tutorial will show you how to build a React application to call ReactDOM.render only once in your code, and the seeming magic of React will only update the parts of the DOM that are absolutely necessary to update. ("Update" here is a not entirely accurate. React is largely about efficiently *replacing* parts of the DOM.)
Giovanni Montano wrote:
1) Is the order of execution: `render` that calls the element `element` above, and then? are all the other eventual method get sequentially called also if nobody explicitly call them?
Calling setInterval() in the last line is what sets this all in motion. setInterval sets up the timer that calls tick every second. tick first generates the React element it stores in the variable "element" then it calls ReactDOM.render() to update the DOM. There's really no magic (and not much React) going on here.
2)There is setInterval for instance, that (from a Java point of view) is not instantiated by nobody, but still get called( because is not a class), correct?
setInterval is a built-in function on the browser's global object "window." It's a function, and it gets called as a function.
3) if I cancel setInterval( playing with the code) even Hello World does not appear, why?
By cancel do you mean clearInterval? If so, then it depends on timing of the setInterval and clearInterval calls.
4) what is the best tool to debug when does not appear nothing on the page, as it is the case if I erase the last line setInterval()? is console log I guess?
If by cancel you mean you comment out or remove the code, then of course nothing will appear. Nothing is calling tick or really doing much of anything then. If you're uncomfortable with setInterval you could call tick() to display the time just once, but that's sort of missing the point of the example.