Author -  Sai gowtham

What is JSX in react detailed

Beginners to the react probably get confused about why we write HTML inside the JavaScript.At the end of this tutorial, you will get a better understanding of jsx.

React without JSX

Let’s write some react code without using jsx so that we can know better , why we use jsx in react.

let h1 = React.createElement('h1',{style:{color:"green"}}," h1 element");
let p = React.createElement('p',{style:{color:"red"}},"p element");
let div = React.createElement('div',{className:"container"},h1,p)


ReactDOM.render(div,document.querySelector('#app'))

react without using jsx

React.createElement(type,props,children) method takes the three arguments.

type: It means the type of HTML element we need. (example: h1,h2,p,div..etc.)

props: Any properties required for this element/not.

children: The data we need to add inside the html element.(example: plain text or child elements)

React with JSX

Now we are replacing the above code by using jsx.


let  green  = {color:"green"},
     red =    {color:"red"}
let h1 = <h1 style ={green}>h1 element</h1>;
let p =  <p style={red}>p element</p>;
let div = <div className="container">{h1}{p}</div>

ReactDOM.render(div,document.querySelector('#app'))

The jsx we write inside the react is often converted into JavaScript by using the babel transpiler.

What is JSX?

Jsx allows us to write HTML like syntax inside the JavaScript these is not a react specific thing. By using jsx we can make our code more readable so that react team recommends us to use jsx.

Jsx is not only used in react there are also some other frameworks like preactjs, Infernojs uses jsx.


Expressions in jsx

In jsx, we can embed JavaScript expressions by wrapping with the curly braces {}.

let h1 = <h1> Odd number {2+3}</h1>

let users = ['user1','user2','user3']

let ul = <ul>

{users.map((user,i)=>(
    <li>{user}</li>
))}

</ul>

In the above code, we used map method to iterate over the user’s array and created three li elements.

Expressions in jsx


Attributes in jsx

Inline styles


//object
let greenColor = {color:"green"}

let h1 = <h1 style={greenColor}>This is heading</h1>

For inline styling we need to pass style properties as an object inside the curly braces because object is a JavaScript expression.

We can also pass style object directly inside the curly braces instead of using extra variable.


let h1 = <h1 style={{color:"green"}}>This is heading</h1>

External styles using classNames

We need to use className instead of the normal class attribute we use in HTML because there is already a class keyword present inside the JavaScript.

let h1 = <h1 className="header-h1">This is heading</h1>

React Components

The component is a reusable piece of code in react which returns a react element.


function Button(props){
    return <button>{props.name}</button>
}

Conditionals in JSX

function ShowHide(props){

  if(props.show){
    return <button>Show</button>
  }else{
     return <button>Hide</button>
  }

}

ReactDOM.render(<ShowHide show="true" />,document.querySelector('#app'))

We can make above component code more simpler by using the ternary operator.


function ShowHide(props){

  return <button>{props.show ? "Show": "Hide"}</button>

}

Spread operator in jsx

Suppose we need to pass a data to the User component by using props.

function  User(props){
  return (
    <div>
      <h1>{props.name}</h1>
      <ul>
        <li>{props.email}</li>
       <li>{props.mobile }</li>
      </ul>
     </div>
  )
}

<User name= "gowtham" email= "user@example.com" mobile= {11233}/>

Let’s pass the same props data by using the spread operator.

let user = {
  name:"gowtham",
  email:"user@gmail.com",
  mobile:2134578
}

<User {...user} />

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY