If you have ever seen a code in React, at first glance, you may find some familiar-looking code blocks in the render method. The code blocks look like HTML, but they are JSX or JavaScript XML.
const element = <h1>Hello, world</h1>
const element => JavaScript
<h1>Hello, world</h1> => HTML
JSX is popularly used in React to make the job of building an application much more effortless. JSX produces React elements which are then rendered to the DOM.
This blog will teach you how to use React without JSX in detail.
React with JSX
Before moving forward to using React without JSX, let's take a look at what happens when you write a React component and render it to the browser using JSX
Example of React class-based component that uses JSX
We can understand the above code, because we know JSX, However the browser does not understand the JSX as it is not valid Javascript code. Tools like Babel which is a JavaScript transcompiler converts it to browser-understandable JavaScript code. The JSXComponent will be converted to the following code when babel executes it.
As you can see that each JSX element are used for making React easier by calling React.createElement(component, props, ...children) with a lesser amount of work.. the purpose of using React with JSX is that a combination of a programming language and a markup language makes the application robust and boosts its performance. Anything that is done with JSX can also be done without JSX, using plain JavaScript as well. The following sections will teach you how to do so.
You might be wondering that using JSX seems quite a lot simpler than using plain JavaScript. Then why use React without JSX? The answer is simple for smaller React projects where you don't want to build a complex workflow using React without JSX. However, for larger projects, it is advisable to stick to using JSX.
React Without JSX
Example 1: Using React without JSX using CDN.
Using React inside an HTML file is something we all have done when starting to learn React as Both React and ReactDM are available over a CDN. So we can easily use React inside an HTML file without handling the complexities of JSX. The following example prints ‘Learning to use React without JSX’.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!--CDN of React and ReactDOM-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<!--This code can be written inside a separate JS file as well-->
<script type="text/javascript">
var e = React.createElement;
ReactDOM.render(
e("h1", null, "Learning to use React without JSX"),
document.getElementById("root")
);
</script>
</body>
</html>
Output:
Aint writing React inside an HTML file quite simple?
(Source: Giphy)
Let's do something more interesting, let's create a react application and use React without JSX in that application.
(Source: Giphy)
Example 2: Using React without JSX in an Application
Step 1) Create a new React application. You may check out the blog Getting Started with React to know more about creating a react application.
(Directory structure of the React Application)
Step 2) As we know, Each JSX element is a syntactic sugar for calling React.createElement(component, props, ...children). The three parameters of createElement are as follows:
The first parameter is the type of HTML element we want to create.
The second parameter is the props which stand for properties. They are HTML attributes or arbitrary inputs within a component function that are passed as parameters. A prop object argument is passed with data, and it would return the modified React element in the DOM.
The third parameter is the child element.
So we can easily convert a code written in JSX to code without JSX using createElement, the following example demonstrates the same. The code is written inside the index.js file of the src folder of the project directory.
import React from 'react';
import ReactDOM from 'react-dom;
class MyComponent extends React.Component {
render() {
// div is the type of HTML element we want to create
// the last argument is the children of that component.
return React.createElement("h1", null, `Hello ${this.props.toWhom}`);
}
}
ReactDOM.render(
React.createElement(MyComponent, { toWhom: "World" }, null),
document.getElementById("root")
);
Run the application using the following command from the root directory of the project
npm start
Output:
The above code when written using JSX will be
import React from 'react'
import ReactDOM from 'react-dom'
class MyComponent extends React.Component {
render() {
return <div>Hello {this.props.toWhom}</div>;
}
}
ReactDOM.render(
<MyComponent toWhom="World" />,
document.getElementById('root')
);
In a nutshell, instead of using <div>Hello {this.props.toWhom}</div>; use React.createElement("h1", null, `Hello ${this.props.toWhom}`);
Lets try out some more examples
React functional component with JSX
import React from 'react'
function MyComponent() {
return (
<div>
<h1>I am a component</h1>
</div>
)
}
export default MyComponent
The same code, when written without JSX, will be
import React from 'react';
function MyComponent() {
return React.createElement("div", null, React.createElement("h1", null, "I am a component"));
}
export default MyComponent;
If you’re curious to see more examples of how JSX is converted to JavaScript, you can try out the online Babel compiler.
Frequently Asked Questions
Q1) What is JSX? Ans 1) JSX(JavaScript XML) is simply a syntax extension of JavaScript. In React, JSX allows us to use JavaScript and its rich functionality coupled with HTML directly. JSX produces React elements which are rendered into rich user interfaces.JSX is used to write HTML-like code in the same file as you write JavaScript code. Here, unlike the traditional way of putting JavaScript into HTML, HTML is put into JavaScript.
Q2) Can we use React without JSX? Ans 2) Yes, it is possible to use React without JSX. JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React. ... So, anything you can do with JSX can also be done with just plain JavaScript.
Q3) Should React files be JSX? Ans 3) It is not a compulsion to use JSX inside React files. However, it is convenient to use JSX when working with UI inside the JavaScript code.
Key Takeaways
This blog discussed how to use React without JSX. However, there is a lot more than you can do with React and web development; you may now refer to our structured blogs on Web development to equip you with the necessary knowledge of web development.
Are you planning to ace the interviews of reputed product-based companies like Amazon, Google, Microsoft, and more? Attempt our Online Mock Test Series now! You can also consider our React Js Course to give your career an edge over others.
305+ registered