02 What is JSX and TSX

Details
Category: React

 

JSX is a markup syntax.

Components are a mix of logic and markup.

Components receive data and return a lump of UI.

A component can pass out events through functions - like a parameter.

 

JSX has three rules

1. Multiple elements need to be wrapped in a single parent tag.

2. JSX requires tags to be explicitly closed

3. camelCase most of the things. camelCase for attributes

 

JSX is converted into JavaScript

Pass in strings in quotes

Pass in variables using { }

Uses classname instead of class

 

import React from 'react';
import ReactDOM from 'react-dom/client';

/** A pure component that displays a message */

const Greeting = () => {
  return (
    <div className="hello-world">
      <h1>Hello, world!</h1>
    </div>
  );
};

/** The main app component */
const App = () => {
  return <Greeting />;
};

/** React is rendered to a root element in the HTML page */
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);