2. React 18 with TypeScript - JSX Syntax

Показать описание

@MissXing
In this video, we covered the details about JSX syntax inside React.

Don’t use quote when define JSX.
JavaScript Expressions: To insert dynamic data, variables, or expressions into the rendered content, curly braces {} inside JSX elements. You cannot use statements.
Class Name: Use the className attribute to set the CSS class of an element.
Inline Style: Use the style attribute to set inline style with syntax {{key:value}}.
Only One Top-Level Element: all elements within a JSX expression must be wrapped in a single parent element.
Must have closing tag. Be aware of Self-Closing Tags.
The first letter of a tag
If it’s lower case, it’ll be translated to HTML element with the same tag name. If couldn’t find in HTML, throw error.
If it’s upper case, react will render the component, if no component, throw error.
Comments: use syntax below. HTML comment not supported.
{/* THis is a comment*/}

Source code:

Рекомендации по теме