React JSX on html

Active3 hr before
Viewed126 times

6 Answers


This funny tag syntax is neither a string nor HTML.,Previous articleHello World,Integrating with Other Libraries

const element = <h1>Hello, world!</h1>;
load more v

JSX makes it easier to write and add HTML in React.,JSX allows us to write HTML in React.,JSX stands for JavaScript XML.


const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
load more v

Take a look at the below code:,Now, take a look at the below code:,So React, will convert this JSX to the below code:

 Pretag team - issue, fix, solve, resolve

It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.,Here, we will write JSX syntax in JSX file and see the corresponding JavaScript code which transforms by preprocessor(babel).,Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both. We will learn components in a further section.

This website contains the best CS tutorials.
load more v

 Pretag team - issue, fix, solve, resolve

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.,JSX is a separate thing from React itself. JSX does not attempt to comply with any XML or HTML specifications. JSX is designed as an ECMAScript feature and the similarity to XML/HTML is only at the surface (i.e., it looks like XML/HTML so you can just write something familiar). A JSX specification is currently being drafted to by used by anyone as an a XML-like syntax extension to ECMAScript without any defined semantics.,Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

By using JSX one can write the following JSX/JavaScript code:

var nav = (
<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
load more v

Other "react-undefined" queries related to "React JSX on html"