JAVASCRIPT

what is jsx in react

instead of putting JavaScript into HTML,
JSX allows us to put HTML into JavaScript.
JSX stands for JavaScript XML. 
It is simply a syntax extension of React. 
It allows us to directly write HTML in React.

render jsx in react

// To render a JSX expression means to make it appear onscreen.
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

jsx react

const element = <h1>Hello World</h1>

JSX Syntax and JavaScript in react

// JSX Syntax and JavaScript in react
// JSX is a syntax extension of JavaScript. It’s used to create DOM elements which are then rendered in the React DOM.

// A JavaScript file containing JSX will have to be compiled before it reaches a web browser. The code block shows some example JavaScript code that will need to be compiled.
import React from 'react';
import ReactDOM from 'react-dom';
 
ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'));

JSX syntax and HTML

// JSX syntax and HTML
// In the block of code we see the similarities between JSX syntax and HTML: they both use the angle bracket opening and closing tags (<h1> and </h1>).

// When used in a React component, JSX will be rendered as HTML in the browser.
const title = <h1>Welcome all!</h1>