JSX and Coding Style

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>

);