Is JS and JSX the Same? (2024)

The simple answer is, No.

If it was the same thing, then why give it two different names.😅

What is JS?

JavaScript (JS) is a programming language commonly used for developing web applications. It is a versatile and dynamically-typed language that runs on the client-side (in web browsers) and server-side (with the help of platforms like Node.js). JavaScript enables interactive and dynamic functionality on web pages, allowing developers to manipulate and modify content, handle user interactions, and communicate with servers.

What is JSX?

JSX, on the other hand, stands for JavaScript XML. It is an extension to JavaScript syntax that allows you to write HTML-like code within JavaScript. JSX is commonly used in conjunction with React, a popular JavaScript library for building user interfaces. JSX provides a more declarative and intuitive way to define the structure and appearance of components, making it easier to develop and maintain complex UIs. JSX code is transpiled into regular JavaScript code before it can be executed in the browser.

In summary, JavaScript is the programming language itself, while JSX is a syntax extension used primarily in React to write component-based user interfaces in a more expressive and HTML-like manner.

So then what’s all this confusion beginners have?

A student once came to me and told me, “ I pasted the same code in both JSX and JS, same thing happens know ?”

JSX and JS (JavaScript) are not the same, although they share some similarities. Here are the key differences:

1. Syntax: JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It introduces XML-like tags and attributes to create React elements. JS, on the other hand, is plain JavaScript code without any special syntax or extensions.
2. Usage: JSX is primarily used in React applications for defining the structure and behavior of UI components. It is the preferred way to write components in React. JS, on the other hand, can be used for various purposes in JavaScript development, such as defining functions, variables, and logic.
3. Transformation: JSX code needs to be transformed into regular JavaScript code before it can be executed by the browser or JavaScript engine. This transformation is typically done by a build tool like Babel. JS code, on the other hand, can be executed directly by the browser or JavaScript engine without any transformation.
4. Support for HTML-like syntax: JSX allows you to use HTML-like syntax, including tags, attributes, and self-closing tags, making it easier to describe the structure and appearance of UI components. JS does not have built-in support for HTML-like syntax.

In your case, if you pasted the same code in both JSX and JS files, and the same thing happens, it suggests that the code is written in a way that is valid in both JSX and JS. However, keep in mind that JSX code is meant to be used in React components, where it is transformed and rendered as HTML. If you are not using React, JSX code may not have any special meaning and might be treated as regular JavaScript code.

While JSX is the commonly used syntax for writing React components, it is possible to write React components using pure JavaScript without JSX. In such cases, the React elements and component structure are created using JavaScript functions and objects.

Here’s an example to demonstrate the difference between a React component written in JavaScript (JS) and JSX:

• JavaScript (JS) Component:

import React from 'react';
function Greeting(props) {
 return React.createElement('h1', null, 'Hello, ' + props.name);
}
export default Greeting;

• JSX Component:

import React from 'react';
function Greeting(props) {
 return <h1>Hello, {props.name}</h1>;
}
export default Greeting;

Both components achieve the same result of rendering a heading element with a greeting message. However, the JSX version utilizes JSX syntax, which resembles HTML, making it more concise and easier to read.

In the JSX version, the React.createElement function call is abstracted by the JSX syntax, allowing you to write HTML-like code directly within JavaScript.

Note that when using JSX, you’ll need a transpiler like Babel to convert the JSX code into valid JavaScript code that can be understood by the browser. This transpilation step typically occurs during the build process of a React application.

Ultimately, whether you choose to write components in JavaScript or JSX depends on your preference and the setup of your project. JSX has become the de facto standard for writing React components due to its simplicity and readability.

ExtraKnowledge#1

.js files contain JavaScript code, including React components, written in pure JavaScript syntax. They can include JSX code, but it requires configuring the build system or using a transpiler like Babel to transform JSX to JavaScript.

ExtraKnowledge#2 — Can web browsers read JSX directly?

Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object.

For web browsers to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel.