These docs are old and won’t be updated. Go to react.dev for the new React docs.
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.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.
For example, this code written with JSX:
class Hello extends React.Component { render() { return <div>Hello {this.props.toWhat}</div>; }}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<Hello toWhat="World" />);
can be compiled to this code that does not use JSX:
class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); }}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(React.createElement(Hello, {toWhat: 'World'}, null));
If you’re curious to see more examples of how JSX is converted to JavaScript, you can try out the online Babel compiler.
The component can either be provided as a string, as a subclass of React.Component, or a plain function.
If you get tired of typing React.createElement so much, one common pattern is to assign a shorthand:
const e = React.createElement;const root = ReactDOM.createRoot(document.getElementById('root'));root.render(e('div', null, 'Hello World'));
If you use this shorthand form for React.createElement, it can be almost as convenient to use React without JSX.
Alternatively, you can refer to community projects such as react-hyperscript and hyperscript-helpers which offer a terser syntax.
FAQs
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.
Is it necessary to use JSX in React? ›
React doesn't require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
Can I use JS instead of JSX in React? ›
Both JS and JSX are interchangeable but JSX makes the code easier to understand for users. JSX is popularly used in React, as it makes the job of building an application much easier.
What is the benefit of JSX in React? ›
Advantages of JSX
JSX enhances the readability and maintainability of code by allowing developers to write HTML-like syntax within JavaScript. JSX provides the ability to create reusable components, leading to more modular and organized code.
Is JSX separate from React? ›
Note. JSX and React are two separate things.
When not to use ReactJS? ›
When you are making an app like a game or a demanding creative app, React is not the best choice. This problem stems from the fact that it uses a Virtual DOM. Virtual DOMs, or VDOMs, are layers that help make unoptimized DOM manipulations faster.
What is the disadvantage of JSX? ›
JSX Complexity
However, some developers find JSX daunting due to its unfamiliar syntax, which may slow down the learning process. Despite its initial complexity, JSX offers advantages like improved code readability and component-based structure, fostering a more efficient development workflow.
Why is JSX important? ›
It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.
Is React really needed? ›
Not necessarily. Many front-end web developer positions don't require React. If you want to get a job as a front-end web developer, consider concentrating on the following skills in this order, assuming you already know HTML & CSS: Vanilla JavaScript.
Why JSX is better than js? ›
Here are the key differences: 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.
Browser does not understand JSX directly. Because it's not valid JavaScript. So, to make it browser understandable there needs a compiler/transpiler which is called Babel. You can set up your own babel configuration or use vite or create-react-app which internally uses Babel for the JSX to JavaScript conversion.
Should you use JSX or TSX? ›
In general, TSX is a good choice for projects that require additional type safety and maintainability. JSX is a good choice for simpler projects or for developers who are not familiar with TypeScript.
Should I use React without JSX? ›
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. createElement(component, props, ...children) . So, anything you can do with JSX can also be done with just plain JavaScript.
Why do people like JSX? ›
People praise its pet policy. And perhaps most appealing is the fact that you can board a JSX flight without ever stepping foot in a standard airport terminal. And it might not be that much more expensive than a standard flight. Some routes cost as little as $300.
Do I need to import React in JSX? ›
With the new transform, you can use JSX without importing React. Depending on your setup, its compiled output may slightly improve the bundle size. It will enable future improvements that reduce the number of concepts you need to learn React.
Do I need to use JSX extension? ›
Ultimately, the choice of file extension comes down to personal preference and the needs of your project. Regardless of the file extension used, the same React API can be used to build similar UI components.
Can I use React without a framework? ›
You can use React without a framework, however we've found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React.
Can you use React without TypeScript? ›
In React, you can write your code using either TypeScript or JavaScript.
Do you need to import React to use JSX? ›
Upgrading to the new transform is completely optional, but it has a few benefits: With the new transform, you can use JSX without importing React. Depending on your setup, its compiled output may slightly improve the bundle size.
