What is JSX?
- JSX stands for JavaScript XML.
- JSX allows us to write HTML in React.
- JSX makes it easier to write and add HTML in React.
Coding using JSX:
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
JSX converts HTML tags into react elements.
Example:
const helloWorld = <h1>Hello World using JSX!</h1>;
ReactDOM.render(helloWorld, document.getElementById('divID'));
Expressions using JSX:
With JSX you can write expressions inside curly braces { }.
Example:
const helloWorld = <h1>Hello World {10+25} using JSX!</h1>;
ReactDOM.render(helloWorld, document.getElementById('divID'));
Inserting a Large Block of HTML:
Wrap two headers inside one DIV element:
const myelement = (
<div>
<h1>Hello World ReactJS!</h1>
<h1>using JSX</h1>
</div>
);
