Home
Basics
Introduction Setting up environment First Component JSX Component lifecycle Class Based Components Function Based Components Props State Hooks useState hook useEffect hook Events Server requests CSS in React Router third party JavaScriptAdvanced
useContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and ReduxMiscellaneous
React Third Party Components Html templates in React React Interview QnAJSX in react
JSX stands for JavaScript Syntax Extension or JavaScript XML. With JSX, you can write html inside JavaScript code.
const Comp = () => {
return (
<div>
<p>This is a normal html inside JS</p>
</div>
);
}
There are certain rules that you need to follow when writing JSX- Elements must be wrapped inside parent div or fragment
- Attributes of elements need to be adjusted e.g. instead of class, we need to use className. Instead of max-width, we need to write maxWidth....
- JavaScript expressions can be written inside JSX using curly brackets
- if..else can not be used but conditional operator is allowed
export default function Main() {
const cities = ["Brisbane", "Mumbai"];
return (
<div>
{cities.map((city, key) => (
<div key={key}>
City - {city}
{city === "Mumbai" && <span> is an Asian City</span>}
</div>
))}
</div>
);
}
Web development and Automation testing
solutions delivered!!