We are going to discuss Js vs jsx in this article. New front-end developers or react developers normally get confused on topics like js vs jsx. After going through this article I am sure doubts will be cleared.

So let’s start…

What is JS?

Js is shorthand for JavaScript. JavaScript is a programming language used to create software applications. JavaScript can be used to create the front end as well as the back end for application development.

JavaScript is easy to learn and is currently one of the most popular programming languages in the market. It is an evergreen language and has increased in popularity with time.

Features of JS

• Basically, JavaScript is a Scripting language
• It is an interpreter based language
• JavaScript is case sensitive language
• This is a single-threaded programming language
• It is a prototype or object-based programming language.
• JavaScript is a lightweight programming language
• This has so many new and popular frameworks

What is React JS?

React is a JavaScript framework that is used to create front-end software applications.

It is one of the most popular front-end frameworks available. It uses Virtual DOM which makes it the fastest framework.

React Js uses on way data binding which makes it easier to work with. If you are a new JavaScript developer then it will be easy for you to learn React js.

Features of React Js

• It uses Virtual DOM which makes it way faster than other frameworks
• React uses on way data binding
• This provides developer tools that make it easy to work with react-redux
• It uses component-based architecture. 
• Functional components make it much easier to work with if you do not have knowledge of how classes work

If you want to learn more about reacting js here is one youtube playlist that has a full react js tutorial.

https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

What is JSX?

JSX is short form of JavaScript XML. It is basically a syntax extension for React JS. You can combine HTML and JavaScript together in JSX. Sometimes it may be confusing for beginners.

You can work in react without writing JSX but it is recommended because it provides more simple syntax and makes writing code easy.

But behind the hood, JSX is transpired into javaScript with babel because browsers can not directly read JSX so it should be transpiled into JavaScript objects.

Features of JSX

• It lets you write HTML with JavaScript
• JSX makes it easy to work with React Js
• Creating components with JSX is more easy and reliable
• It uses the camelCase convention for the HTML attributes.
• Conditional rendering with JSX is much easier 

JS vs JSX in React 

To understand which is better, let’s create one component with JS and one with JSX so that you will get clear about which is more simple and elegant.

First, create a react project with any name you like but I will be choosing js vs jsx. So open the terminal in the vs code and run the below command.

npx create-react-app js-vs-jsx

now create a component folder within the src folder

Create a component with JS

In the component folder create a file named Greet.js this is going to be a simple component that will render hello users. We will be writing the code here only using JS

Here to create one h1 element inside the div we have to write react.createElement method and inside that we have to pass another react.createElement method as the third parameter.

So on large components, it’s become a total mess if you are using JS for creating component

import React from “react”;

const Greet = () => {

    return React.createElement(‘div’, {id : ‘hello’} ,

        React.createElement(‘h1’, null , ‘Hello Users’))

}

export default Greet

Create a component with JSX

Let’s create another new component in the same content folder named as GreetJsx and now we will be creating it using JSX. So let’s see how jsx help us to write the same code in a more simple way

So here we did not need to write react.createElement method we just have used plain HTML to create div and h1 tag

<pre>let element =</pre>

<h1>This is JSX</h1>

ReactDOM.render(element, document.getElementById(‘root’)) import React from ‘react’ const GreetJsx = () =&gt; { return (

<div>

&nbsp;

<h1>Hello users</h1>

&nbsp;

</div>

) } export default GreetJsx

Frequently Asked Question

1. Q) Which is easier to use, Js or JSX?

Answer: Syntax wise JSX is much easier because it lets you write HTML code within javaScript so code looks more simple and elegant.

1. Q)  How does the browser read JSX?

Answer: Bowser can read only javascript object so behind the scene react which we import on the component  it transpile JSX into javaScript using Babel

1. Q) What is the full form of JSX?

Answer: JSX is shorthand of JavaScript XML

Conclusion

As we have seen in the coding example above JSX provides a more elegant and simpler way to work with react. It lets you use HTML with javaScript so you don’t have to write the react.createElement method whenever you need to create a node.

It is not a template solution so you don’t need to learn template language if you are using JSX.