Quick Contact
React Tutorial
- React JS Introduction
- How to install react?
- React Features
- React vs React Native
- React JS VUE Application
- State V/S Props
- React Props
- REACT STATE
- React JSX?
- Conditional Rendering
- React Constructor
- Props Validation
- React Component API
- React Forms
- React Event
- Flux v/s MVC
- React Flux Concept
- React Fragment
- React Lists and Keys
- Error Boundaries
- React Portals
- React Animation
- React Redux
- React CSS
- React Refs
- React Router
Questions & Answers
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”)));
|