JSX Master course
Learn about JSX also known as JavaScript XML in this tutorial. JavaScript XML or commonly known as JSX is an extension of JavaScript language which is used to write HTML in React applications. JSX makes it easy for developers to create elements since it allows writing JavaScript and HTML together. Once JSX is compiled using a compiler similar to Babel and bundled with a module bundler similar to webpack, the output will be valid JavaScript and HTML elements. These outputs altogether build up a Virtual Document Object Model (VDOM) which will be later synced with the actual DOM.
Full React JSX Article with Examples: https://tutjunction.com/react/jsx
Full React Tutorial with Examples: https://tutjunction.com/react/start
Pinterest: / ampathumbandara
Author LinkedIn: / pathum-bandara-tutjunction
About Author: https://tutjunction.com/about/author
Facebook: / 313221204477980
TikTok: https://www.tiktok.com/@tutjunction?i...
Twitter: / tutjunctiondev
Instagram: / tutjunctiondev
LIKE and SUBSCRIBE !!!!
Music: Seasons - Telecasted
timestamps -
00:00 - Intro
01:45 - How to write JSX?
03:04 - How React render JSX?
03:16 - How to handle open tags in JSX?
04:02 - JSX expressions
04:36 - Defining components using JSX
05:33 - How babel compiler compiles JSX?
06:38 - JSX attributes
07:16 - data attributes and aria attributes in JSX
07:54 - htmlFor and className JSX attribute
08:29 - JSX as variables
08:55 - Conditional rendering with JSX variables example toggleable tab
13:18 - Looping in JSX using map method
14:34 - JSX map looping with object keys
15:37 - JSX event handlers onClick and onChange
16:40 - JSX event handler event parameter
17:14 - JSX onSubmit event handler
18:16 - JSX fragments
19:07 - Styling JSX CSS className
19:36 - Styling JSX style object
20:27 - Passing props from parent to child
20:57 - Prop object
21:19 - Destructured props
21:37 - Passing data from child to parent using props
22:57 - Nested elements and children prop
24:47 - Outro