Introduction to JSX in React

October 21, 2019
  • JSX stands for JavaScript XML
  • React uses JSX for templating instead of JavaScript
  • JSX produces React “elements”
  • JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() or appendChild() methods
  • JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime.

JSX

JSX allows us to write HTML directly within the JavaScript code. 

const myelement = <h1>Welcome to JSX</h1>;

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

Without JSX

const myelement = React.createElement('h1', {}, 'Without JSX!');

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

JSX Expressions

const myelement = <h1> Addition of  {"Two Numbers"} {25} and {35} is:  {25 + 30}  </h1>;

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

Specifying Children with JSX

const myelement = (
  <div>
    <h1>Start of Days List</h1>
    <ol>
    <li>Sunday</li>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li></ol>
    <h1>End of Days List</h1>
  </div>
);

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

Embeding the result of calling a JavaScript function 

function displayName(user) {
  if (user) {
  return user.firstName + ' ' + user.lastName;
  }  
  return <h1>Hello, Stranger.</h1>;

}
const user = {
  firstName: 'Girish',
  lastName: 'Chandra'
};

const element = (
  <h1>
    Hello, {displayName(user)}!
  </h1>
);

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

Specifying Attributes with JSX

const imageurl = "https://www.xyzzz.com/images/logo-wide.png";
const elementimg = <img src={imageurl}></img>;

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

Styling

var myStyle = {
  fontSize: 50,
  fontFamily:'Courier New',
  color: 'red'
}
const myelement = (
      <div>
          <h1 style = {myStyle}>Hello My Style</h1>
      </div>
);
ReactDOM.render(myelement, document.getElementById('root'));

Write all above examples in index.js file and use the below index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

References

  • https://reactjs.org/docs/introducing-jsx.html

Learn more about Components and Props in the next blog article series.

Happy Learning!

Post Views: 1,070