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 = (
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
References:
https://www.w3schools.com/whatis/whatis_react.asp
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
No comments:
Post a Comment