How to write react code without using JSX ?

Question

As a fresher , I face an interview question - How can we write React code without JSX?

Raghunath Bhukan · Answer

In React, JSX just simplifies the way you write or read code (Readable syntax) for React.createElement . You can write React code without JSX by using React.createElement directly. 1. Basic example with JSX Normally, with JSX, you might write: function App() { return ( Hello, React! This is a paragraph. ); } This JSX gets compiled to React.createElement calls behind the scenes. 2. Equivalent code without JSX Without JSX, you can write it like this: import React from 'react'; import ReactDOM from 'react-dom/client'; function App() { return React.createElement( 'div', // Type of element null, // Props (null = no props) React.createElement('h1', null, 'Hello, React!'), React.createElement('p', null, 'This is a paragraph.') ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(React.createElement(App)); Explanation: React.createElement(type, props, ...children) type ? HTML tag name or a React component props ? an object containing properties/attributes children ? the inner content or nested elements Nesting is done by passing other React.createElement calls as children. 3. With props and events For example, a button with a click handler: function App() { function handleClick() { alert('Button clicked!'); } return React.createElement( 'button', { onClick: handleClick, style: { fontSize: '20px' } }, 'Click Me' ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(React.createElement(App)); Notice how you pass props as an object , including event handlers and styles. JSX is optional. React works fine with plain JS using React.createElement . Each JSX tag is just a shorthand for React.createElement . Nesting elements requires calling React.createElement recursively for each child.

How to write react code without using JSX ?

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)