ReactJS JSX

ReactJS JSX

Instead of regular JavaScript React uses JSX to template. Nonetheless, it does not need to be used, following are some pros that come with it.

1. It is quicker because when compiling code to JavaScript it performs optimisation.
2. It is also type-safe and can caught most of the errors during compilation.
3. It makes writing templates simpler and quicker, if you're familiar with HTML.

Using JSX

In most instances, the JSX looks like a standard HTML. We have already used it in the chapter on setup of the environment. Look at the App.jsx file, where we return div.

import React from 'react';

class App extends React.Component 
{
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Although it's close to HTML, there are a few things that we need to keep in mind while working with JSX.

Nested Elements

If we want to return more elements, we need to surround the element with one container. Note how we use div as wrapper for the elements h1 , h2 and p.

import React from 'react';

class App extends React.Component 
{
   render() {
      return (
         <div>
            <h1>Hello World</h1>
            <h2>Welcome to phptpoint</h2>
            <p>This is the a paragraph!!!</p>
         </div>
      );
   }
}
export default App;	

Attributes

In addition to standard HTML properties and attributes, we can use our own custom attributes. When adding custom attributes, we need to use data- prefix. We've added data-myattribute as an attribute of p element in the following example.

import React from 'react';

class App extends React.Component 
{
   render() {
      return (
         <div>
            <h2>This is heading 1</h2>
            <h3>This is heading 2</h3>
            <p data-myattribute = "firstattr">This is a Paragraph!!!</p>
         </div>
      );
   }
}
export default App;

JavaScript Expressions

Within JSX, JavaScript expressions can be used. We just wrap it in curly brackets{}. The following example gives rendering 2.

import React from 'react';

class App extends React.Component 
{
   render() {
      return (
         <div>
            <h2>{7+6}</h2>
         </div>
      );
   }
}
export default App;

We can't use conditional (ternary) expressions if other statements are within JSX, instead. In the following example, variable I is equal to 1 so the browser will render true, it will render false if we change it to any other value.

import React from 'react';

class App extends React.Component 
{
   render() {
      var i = 5;
      return (
         <div>
            <h2>{i == 3 ? 'True!' : 'False'}</h2>
         </div>
      );
   }
}
export default App;

Styling

React suggests using the styles inline. We need to use the camelCase syntax when we want to configure inline types. React will also automatically append px on specific elements after the number value. The example below shows how to add myStyle inline to element h1.

import React from 'react';

class App extends React.Component {
   render() {
      var heading = {
        fontSize: 80,
         color: '#f2c41d'
      }
      return (
         <div>
            <h2 style = {heading}>Phptpoint</h2>
         </div>
      );
   }
}
export default App;

Comments

When writing comments, we need to put curly brackets{} if we want to write comment inside the section of a tag for children. To always use{} when writing comments is a good practice, as we want to be consistent when writing the app.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h2>Phptpoint</h2>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Naming Convention

HTML tags also use lowercase tag names, while Uppercase begins with the React components.

Note − You can use className and htmlFor as names for the XML attributes rather than class and for.