JSX in React

 Introduction

JSX is a javascript syntax extension which allows you to write html code and javascript together . JSX is a simple html code that you can assign to a variable in javascript file.
But many people are confused that how we are able to write html in the javascript file.

There is a library name babel which is a javascript compiler that converts the JSX to javascript object and then render the react application . Please check out this link for BABEL that converts your javascript code to html.

You can even create you webhook for the babel and can do the create-react-app which already has the babel compiler installed into it . 

This is the jsx code in the app component which is returned in the root.render() with the create root function.


Now, let's convert this code in the React.createElement() which is the transformation of the jsx code and further transforms into the javascript object to execute in the browser.


This is the code transformation of jsx into React.createElement() that is the older way of writing the code in react which is much tedious , as wee need to call createElement() whenever we write simple html tags that makes application complex and hard to understand.

But every developer should know , how to convert the jsx code to React.createElement() which is also a favorite question of interviewers to ask in the interview.

Complex jsx code

When we write jsx code in the component , if we write two elements without a parent element in  the component , it will throw the syntax error . 

To resolve this error , we can wrap in the array and the error will resolve but if you look into the console it will give the warning that key is necessary , so we have to write the key for each element in the array.


Second method is to wrap all the elements into the parent element which is div , so it will accept all the html elements without any warning or error.


Javascript in curly braces {}

When we write jsx code in javascript file which also allows us to write the javascript in the curly braces where we only write expressions into it and not any statements . The expressions in javascript that evaluates to some value is only allowed to write in the curly braces.

The things that are allowed to write in the curly braces :-

1. Object evaluate value and any variable which is declared earlier in the component
2. Advance array methods like map , filter , reduce
3. Can perform logical operations with && , || , ??  with these operators that evaluate to some value
4. Ternary operations for conditions
5. Short Circuiting 

The things that are not allowed to write in the  curly braces :-

1. Functions
2. If-else conditional statements
3. For loops statements
4. Statement that doesn't evaluate to some value rather is a some instruction which carried forward in the file

Nested Jsx code

This is the one way of writing jsx code in the nested jsx code in the ternary conditions.


So, this is all for JSX ( Javascript syntax error) where we have learned what is jsx , under the hood transformation of the jsx , writing complex jsx and nested jsx in the react.

Thank you for reading :)

Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more