Quick Contact


    React JSX?

    JSX is javascript XML which allows you to write HTML looking syntax that get transformed into light weight JavaScript objects. JSX is a extension of React JS which is not required but it is recommended. It is easy to write. For this transpiler is used like Babel to transform JSX to javascript because browser donot understand JSX. There are some rules with JSX AS-:

    -“Class” attribute is written as “classname”, properties become camelCase, onClick and tabIndex is used as it is written here in which C and I is capital, In JSX tags must be closed: < h1>< /h1>, < img/>

    To understand JSX more clearly look at the code difference below written both in JSX and JS

    JSX JavaScript
    < div classname=”App”>
    < header classname=”App-Header”>
    < img src={logo} classname=”App-logo” alt=”logo”/>
    < p>
    < a 
    Classname=”App-link”
    href=”https://reactjs.org”
    target=”_blank”
    rel=”noopener noreferrer”
    >
       Learn React
    < /a>
    < /header>
    < /div>
    
    “use strict”;
    React.createElement(“div”, {
      Classname:”App”
    }, React.createElement(“header” , {
    Classname: “App-header”
    }, React.createElement(“img”, {
    Src: logo,
    Classname: “App-logo”,
    Alt: “logo”
    }), React.createElement(“p”, null, “Edit “, 
    React.createElement(“code”,  null,”src/App.js”),
     “ and  save to reload.”), React.createElement(“a”, { 
    className: “App-link”,
    href: “https://reactjs.org”,
    target: “_blank”,
    rel: “noopener noreferrrer”
    }, “Learn React”)));
    

    Copyright 1999- Ducat Creative, All rights reserved.