Class vs Function vs Hooks on TSX

Ever wonder why Typescript is increasing on popularity lately ?

What is behind that ? and Why those are very similar like JSX ?

Let’s get into the topic

img : telerik

So what is TSX ?

TSX standfor Typescript React .

It means it support embeded React element on it .

Yea , as long as you include

import React from 'react';

What is the advantage for Typescript ?

  • Typescript provided a static typing , it means enable type checking at compile time , code completion for JSX.
  • Code with intellisense for VS Code making code more effective , clean and readability.
  • Many library or dependencies that written in Typescript
  • A growth community .

Why it’s similiar to Javascript , but somehow it’s different ?

  • According to official website : TypeScript is a typed superset of JavaScript that compiles to plain JavaScript . So it’s the same likely as Javascript.

Let’s Start by Code

CLASS

type MyProps = {
message: string;
};
type MyState = {
count: number;
};

class App extends React.Component<MyProps, MyState> {
state: MyState = {
count: 0,
};
render() {
return (
<div>
{this.props.message} {this.state.count}
</div>
);
}
}

Function

type MyProps = {
message: string;
};

or

const MyApp = ({ message }: MyProps) => <div>{message}</div>;

Function with Hooks

export function MyApp() {

const [isLoading, setState] = React.useState(false);
const load = (aPromise: Promise<any>) => {
setState(true);
return aPromise.finally(() => setState(false));
};

return [isLoading, load] as const;
}

The Basic Comparison

function.tsx

function App() {
return (
<div className ="Wrapper">
<Impress hint={false} progress ={true} rootData={{ width: 512 }}>
{/* React */}
<Step>
<div className="center" >
<p style={{marginBottom: -50}}>Apa itu </p>
<h1><b><span className="blue">React</span><span className="yellow">JS ?</span></b></h1>
</div>
</Step>
<Impress>
</div>
export default App

class.tsx

class App extends React.Component<any> {constructor(props: any) {
super(props);
}
public render() {
return (
<div>
<Impress hint={false} progress ={true} rootData={{ width: 512 }}>
{/* React */}
<Step>
<div className="center" >
<p style={{marginBottom: -50}}>Apa itu </p>
<h1><b><span className="blue">React</span><span className="yellow">JS ?</span></b></h1>
</div>
</Step>
<Impress>
</div>
export default App;

So why Typescript is very similar like JS is now solved , now the very first thing is to get dive into a practice and feel the comparison .^_^!

--

--

--

Trying mybest to self-love , learn and share through resonance of technologies.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Learn react native render test with Jest & Renderer

#ELI5: Array.reduce();

Creating and Animating Pixel Art in JavaScript + Phaser

React: Know about react components — ZappyTalks

Is React the new jQuery?

Build a Simple Customized Dropdown Menu in React

Run Java Applications Using Windows Task Scheduler

Simple checklist to publish a Chrome Extension

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rizki F

Rizki F

Trying mybest to self-love , learn and share through resonance of technologies.

More from Medium

let vs var : An underestimated difference in JS world

All About Promises

Basic things to know about “Application Framework”

Understanding Binary Search