EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript JSX
Secondary Sidebar
TypeScript Tutorial
  • TypeScript Basic and Advanced
    • What is TypeScript?
    • Typescript Examples
    • TypeScript Versions
    • TypeScript Operators
    • JavaScript dump object
    • JavaScript get Method
    • Webpack ReactJS
    • Code Generator JavaScript
    • JavaScript Projects
    • Call Stack JavaScript
    • JavaScript Projects GitHub
    • JavaScript Filter Function
    • JavaScript nan
    • JavaScripttimestamp
    • TypeScript loop
    • CoffeeScript
    • TypeScript Webpack
    • setTimeout TypeScript
    • DHTMLX
    • CoffeeScript for loop
    • TypeScript number
    • JavaScript export module
    • TypeScript string contains
    • TypeScript Inheritance
    • TypeScript get
    • TypeScript undefined
    • TypeScript Global Variable
    • TypeScript Dictionary
    • TypeScript Generic
    • TypeScript Cast Object
    • TypeScript Optional Parameters
    • TypeScript? switch
    • TypeScript promise
    • TypeScript tuple
    • TypeScript Hashmap
    • TypeScript let
    • TypeScript Getter
    • TypeScript Pattern Matching
    • TypeScript number to string
    • TypeScript substring
    • TypeScript?lambda
    • TypeScript UUID
    • TypeScript JSDoc
    • TypeScript Decorators
    • Typescript for loop
    • TypeScript HTTP Request
    • TypeScript Abstract Class
    • TypeScript Question Mark
    • TypeScript Nullable
    • TypeScript reduce
    • TypeScript Mixins
    • TypeScript keyof
    • TypeScript string to number
    • TypeScript JSON parse
    • TypeScript const
    • TypeScript declare module
    • TypeScript String
    • TypeScript filter
    • TypeScript Multiple Constructors
    • TypeScript? Set
    • TypeScript string interpolation
    • TypeScript instanceof
    • TypeScript JSON
    • TypeScript Arrow Function
    • TypeScript generator
    • TypeScript namespace
    • TypeScript default parameter
    • TypeScript cast
    • TypeScript babel
    • Typescript Key-Value Pair
    • TypeScript if
    • TypeScript keyof Enum
    • TypeScript wait
    • TypeScript Optional Chaining
    • TypeScript JSX
    • TypeScript Version Check
    • TypeScript Unit Testing
    • TypeScript Handbook
    • TypeScript module
    • TypeScript Extend Interface
    • TypeScript npm
    • TypeScript pick
    • TypeScript Interface Default Value
    • JavaScript import module
    • Obfuscate Javascript
    • TypeScript basics
    • setInterval TypeScript
  • Type of Union
    • TypeScript Object Type
    • TypeScript type check
    • TypeScript promise type
    • TypeScript JSON type
    • TypeScript Union Types
    • TypeScript typeof
    • TypeScript Types
  • TypeScript Array
    • TypeScript Array of Objects
    • Methods TypeScript Array
    • TypeScript remove item from array
    • TypeScript add to array
    • TypeScript Array Contains
  • Function Of Array
    • TypeScript Function Interface
    • TypeScript Functions
    • TypeScript Export Function
    • TypeScript function return type

TypeScript JSX

TypeScript JSX

Introduction to TypeScript JSX

The following article provides an outline for TypeScript JSX. TypeScript works on JavaScript and is an open source language. Static type definitions are added in JavaScript to make it TypeScript. Ways of describing the shape of an object and to provide enhanced documentation is provided by Types. It allows TypeScript to validate if the code is working without any incorrections. Writing different types are optional in TypeScript as type inference provides the developer great power without the effort of additional codes.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

1. Preserve Mode

<div />

2. React Mode

<div className="App"/>

3. React Native Mode

<div />

Working of JSX in TypeScript

JSX can be embedded just like XML. JSX can be transformed in JavaScript even though the transformation is majorly based on the kind of implementation. JSX is majorly used with React framework and now TypeScript also supports the compilation of JSX into JavaScript.

For using JSX, there are two most important things which should be done:

  • .tsx should be the file extension of the files used.
  • The jsx option should be enabled

TypeScript works in three JSX modes. The modes are react native, react and preserve. The emit stage is affected by these modes. JSX is kept as the output’s part by preserve mode. In the react mode, React.create element is emitted and JSX transformation is not necessary. React native mode is somewhat same as the preserve mode.

Examples

Given below are the examples mentioned:

Example #1

The files used for the proper execution of the code are:

TypeScript JSX 1

a. App.tsx

import "./styles.css";
export default function App() {
return (
<div className="App">
<div>
<h1>EDUCBA</h1>
<h2>****WE ARE HAPPY TO HELP****</h2>
<div style={{
backgroundImage: `url("https://cdn.educba.com/academy/wp-content/uploads/2020/05/cropped-website_logo_transparent_background_white.png")`
, height:'240px'
, width: '250px'
, alignItems: 'center'
, alignContent: 'center'
}}>
</div>
</div>
</div>
);
}

b. index.tsx

import { render } from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
render(<App />, rootElement);

c. styles.css

.App {
font-family: 'Times New Roman'
, Times
, serif;
text-align: center;
background-image: url('https://images.pexels.com/photos/1619690/pexels-photo-1619690.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
height: 450px;
width: 490px;
color: #94041f;
border-image: url('https://images.pexels.com/photos/1485637/pexels-photo-1485637.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
border-radius: 500px;
background-color: #f57ff3;
border-right-width: 100px;
border-right-color: #f58c58;
border-left-width: 100px;
border-left-color: #f50c18;
border-top-width: 100px;
border-top-color: #140ddb;
border-bottom-color: #ba1658;
}

Output:

TypeScript JSX 2

Example #2

The files used for the proper execution of the code are:

TypeScript JSX 3

a. index.tsx

import * as React from "react";
import { render } from "react-dom";
interface IState {
count: number;
}
class EDUCBA extends React.Component<
{}
, IState> {
public readonly state = {
count: 0
};
private handleClick = (
event:
React.MouseEvent<
HTMLButtonElement
>) => {
const type:
string =
event.currentTarget.title;
this.setState(
(
{ count
}
) => ({
count: type === "decrement" ?
count - 10 : count + 10
}));
};
public render() {
return (
<div>
<div style={{
backgroundImage: `url("https://images.pexels.com/photos/3475679/pexels-photo-3475679.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")`
, height:'470px'
, width: '490px'
}}>
<div>
<button
title="decrement"
onClick={
this.handleClick
}
style={{
color: '#991450'
, height: '50px'
, width: '150px'
, backgroundColor: '#8ef73e'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#b30b1b'
, borderLeftWidth: '5px'
, borderLeftColor: '#0b0ebd'
, borderTopWidth: '10px'
, borderTopColor: '#e3431b'
, borderBottomColor: '#22c0f5'
, fontSize: '15px'
}}
>
Decreasiow
</button>
{
this.state.count
}
<button
title="increment"
onClick=
{
this.handleClick
}
style={{
color: '#e30b1d'
, height: '50px'
, width: '150px'
, backgroundColor: '#f5ee67'
, borderRadius: '50px'
, borderRightWidth: '5px'
, borderRightColor: '#31cc43'
, borderLeftWidth: '5px'
, borderLeftColor: '#0c0c70'
, borderBottomWidth: '10px'
, borderTopColor: '#ad1599'
, borderBottomColor: '#3e700c'
, fontSize: '15px'
}}
>
Increasiow
</button>
<div style={{
backgroundImage: `url("https://cdn.educba.com/academy/wp-content/uploads/2020/05/cropped-website_logo_transparent_background_white.png")`
, height:'240px'
, width: '250px'
, alignItems: 'center'
, alignContent: 'center'
}}>
</div>
</div>
</div>
</div>
);
}
}
render(<EDUCBA />
, document.getElementById("root"));

Output:

On code execution:

TypeScript JSX 4

On clicking “Decreasiow” button:

On clicking “Decreasiow” button

On clicking “Increasiow” button:

On clicking “Increasiow” button

Example #3

Files used for the proper execution of the code are:

TypeScript JSX 7

a. index.tsx

import ReactDOM from "react-dom";
import React from "react";
import {
makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
root: {
backgroundColor: (
{
color }) => color
}
});
const EDUCBA = () => {
const classes = useStyles(
{
color: "#53f5cf"
});
return <div style={{
backgroundImage: `url("https://images.pexels.com/photos/800330/pexels-photo-800330.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")`
, height:'470px'
, width: '490px'
}}>
<div>
<div
className={
classes.root
}>EDUCBA
</div>
</div>
</div>
};
ReactDOM.render(
<EDUCBA />
, document.getElementById(
"root"
));

Output:

TypeScript JSX 8

Example #4

The files used for the proper execution of the code are:

TypeScript JSX 9

a. index.tsx

import * as React from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";
import Select from "./select";
const { Option } = Select;
function handleChange(value: string) {
console.log(`selected ${value}`);
}
class Application extends React.Component<{}, {}> {
public render() {
return (
<div>
<div style={{
backgroundImage: `url("https://images.pexels.com/photos/3361746/pexels-photo-3361746.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")`
, height:'470px'
, width: '490px'
}}>
<div>
<Select
defaultValue="PROGRAMMING LANGUAGE"
style={
{
width: 220,
backgroundColor: "#6cf5d3"
}
}
onChange={handleChange}
>
<Option
value="REACT NATIVE"
style={
{
backgroundColor: "#a922c7"
}
}>
REACT NATIVE
</Option>
<Option
value="TYPESCRIPT"
style={
{
backgroundColor: "#655bfc"
}
}>
TYPESCRIPT
</Option>
<Option
value="disabled"
disabled
style={
{
backgroundColor: "#9ff263"
}
}>
NO CHOICE
</Option>
<Option
value="JAVASCRIPT"
style={
{
backgroundColor: "#e6f55f"
}
}>
JAVASCRIPT
</Option>
</Select>
<Select
defaultValue="COURSE CHOICE"
style={
{
width: 510
}
}
onChange={handleChange}
>
<Option
value="DATA SCIENCE"
style={
{
backgroundColor: "#f54c5d"
}
}>
DATA SCIENCE
</Option>
<Option
value="FINANCE"
style={
{
backgroundColor: "#63f76f"
}
}
>
FINANCE
</Option>
<Option
value="disabled"
disabled
style={
{
backgroundColor: "#f2ca63"
}
}>
NO CHOICE
</Option>
<Option
value="EXCEL"
style={
{
backgroundColor: "#72dcfc"
}
}
>
EXCEL
</Option>
</Select>
<Select
defaultValue="EDUCBA"
style={
{
width: 120,
backgroundColor: "#a864f5"
}
} loading>
<Option
value="EDUCBA"
style={
{
backgroundColor: "#a864f5"
}
}
>EDUCBA
</Option>
</Select>
</div>
</div>
</div>
);
}
}
render(<Application />
, document.getElementById(
"root"));

b. select.tsx

import * as React from "react";
import Select
, { SelectProps } from "antd/es/select";
import "antd/es/input/style/css";
class MySelect<T>
extends React.Component<
SelectProps<
T>
, {}> {
static Option: typeof Select.Option = Select.Option;
render() {
return <
Select<
SelectProps<
T>> {
...this.props
} />;
}
}
export default MySelect;

Output:

On code execution:

TypeScript JSX 10

On clicking “PROGRAMMING LANGUAGE” dropdown:

On clicking “PROGRAMMING LANGUAGE” dropdown

On clicking “COURSE CHOICE” dropdown:

On clicking “COURSE CHOICE” dropdown

On clicking “EDUCBA”:

On clicking “EDUCBA”

Conclusion

We saw how TypeScript uses the three JSX modes, preserve, react and react native. The examples represent all of the three modes.

Recommended Articles

This is a guide to TypeScript JSX. Here we discuss the introduction, working of JSX in TypeScript along with examples respectively. You may also have a look at the following articles to learn more –

  1. TypeScript Functions
  2. TypeScript Operators
  3. TypeScript Versions
  4. What is TypeScript?
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more