Exploring JSX:

Today we’ll have a closer look at JSX and also see how we can perform different tasks in JSX.

React use something called JSX(that is JavaScript as XML) to define what the UI will look like.

What is Transpilation?

Our browser can’t understand JSX in its native representation, so an intermediate step is performed to convert JSX into JavaScript. The process of converting JSX into JavaScript is known as Transpilation.

How can JSX be converted to JavaScript?

There are two ways to convert JSX to JavaScript:

1. Build your app to generate the transpiled JavaScript output to correspond to the JSX source.
2. Use the Babel library (that we have used in our examples so far) to translate the JSX into JavaScript on the browser itself.

What can we do with JSX?

1. JSX looks like HTML and can be used like HTML
2. As JSX is ultimately translated into JavaScript so it allows to evaluate expressions or programmatically manipulate JSX.

Examples:

Now we’ll see some examples of how we can use JSX in React:

1. Handling static HTML content through JSX

ReactDOM.render(
  <h1>Welcome to Software Testing Trends</h1>,
  document.getElementById('main-container')
)

2. Evaluating Expressions through JSX

<script type="text/babel">

class PIComponent extends React.Component {
  render() {
  return <h1>The value of PI is {Math.PI}</h1>
  }
}

ReactDOM.render(
  <div>
  <PIComponent/>
  </div>,
  document.getElementById('main-container')
);

</script>

3. How to return multiple elements using JSX

There are many ways to return multiple elements using JSX:

3.1 Return multiple elements using Array like Syntax

<script type="text/babel">

class LearningComponent extends React.Component {
render() {
   return (
     [
      <h1>Lets Learn Java</h1>,
      <h1>Lets Learn Selenium</h1>,
      <h1>Lets Learn JavaScript</h1>
     ]
    );
}

}
ReactDOM.render(
  <div>
  <LearningComponent/>
  </div>,
  document.getElementById('main-container')
);

</script>

 3.2 By specifying a key attribute and unique value for each item

<script type="text/babel">

class LearningComponent extends React.Component {
  render() {
   return (
    [
     <h1 key="1">Lets Learn Java</h1>,
     <h1 key="2">Lets Learn Selenium</h1>,
     <h1 key="3">Lets Learn JavaScript</h1>

    ]
   );
 }
}

ReactDOM.render(
 <div>
 <LearningComponent/>
 </div>,
 document.getElementById('main-container')
);

</script>

3.3 By wrapping list of items into React.Fragment Component

Please note that the React.Fragment doesn’t actually generate a DOM element. Also, while using React.Fragment, you don’t need any comma to separate each item.

<script type="text/babel">

class LearningComponent extends React.Component {
  render() {
   return (
   <React.Fragment>
    <h1 key="1">Lets Learn Java</h1>
    <h1 key="2">Lets Learn Selenium</h1>
    <h1 key="3">Lets Learn JavaScript</h1>
   </React.Fragment>
  );
 }
}
ReactDOM.render(
  <div>
  <LearningComponent/>
  </div>,
  document.getElementById('main-container')
);

</script>

4. Specifying Style in JSX

JSX, the style cannot be specified inline like in HTML. Instead, an object is defined that contains styling information and Style attribute refers to that object.

class BannerComponent extends React.Component {
 render() {
  var bannerStyle = {
  height: 200,
  width: 500,
  backgroundColor: "#e6e6ff",
  boxShadow: "0px 0px 5px #666"
};
return(
  <div style={bannerStyle}>
  <BannerHeading/>
  <BannerContent/>
  </div>
  );
 }
}

5. Providing Comments in JSX:

There are different ways of providing comments in JSX:

1. If a comment is specified as a child of a tag, it must be enclosed between angle brackets { and }

return(
 <div style={bannerContentStyle}>
 <p>When debugging, novices insert corrective code; experts remove defective code.</p>
 {/*This is a child comment */}
 </div>

2. If a comment is specified inside a tag, there is no need for angle brackets

ReactDOM.render(
 <div>
 <BannerComponent
 /*This is how you specify
 multiline Comments */
 //This is a single line Comments
 />
 </div>,
 document.getElementById('main-container')
 );