React JS Jargons - Part 1

Babel: Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript. With Babel, you can use the newest features of JavaScript (ES6 - ECMAScript 2015).
Babel is available for different conversions. React uses Babel to convert JSX into JavaScript.

JSX : JSX stands for JavaScript XML.JSX is an XML/HTML like extension to JavaScript. JSX is a XML syntax extension to JavaScript that also comes with the full power of ES6 (ECMAScript 2015).Just like HTML, JSX tags can have a tag names, attributes, and children. If an attribute is wrapped in curly braces, the value is a JavaScript expression.

React DOM Renderer:

The method ReactDom.render() is used to render (display) HTML elements:

|div id="id01">Hello World!|/div>

|script type="text/babel">
ReactDOM.render(
    |h1>Hello React!|/h1>,
    document.getElementById('id01'));
|/script>

JSX Expressions
Expressions can be used in JSX by wrapping them in curly {} braces.

|div id="id01">Hello World!|/div>

|script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
    |h1>Hello {name}!|/h1>,
    document.getElementById('id01'));
|/script>

React Elements
React applications are usually built around a single HTML element. React developers often call this the root node (root element): 

|div id="root">|/div>

React elements look like this:

const element = |h1>Hello React!|/h1>

Elements are rendered (displayed) with the ReactDOM.render() method:

ReactDOM.render(element, document.getElementById('root'));

React elements are immutable. They cannot be changed.The only way to change a React element is to render a new element every time:

function tick() {
    const element = (

{new Date().toLocaleTimeString()}

);
    ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);


References:
https://www.w3schools.com/whatis/whatis_react.asp