jsx, tsx コワクナイ #JavaScript

ワタシ、 jQuery ツカッテキタ

ワタシ、 Vue 2 ツカッテキタ

jsx? tsx?

アタラシイ拡張子、ナニソレ、コワイ

vue 拡張子、シラナイ、でも vue センヨウ拡張子ナンデショ。

index.vue

<template>
  <h1>Hello {{ userName }}!</h1>
</template>

<script>
export default {
  data: () => {
    return {
      userName: 'il-m-yamagishi',
    };
  },
};
</script>

シングルファイルコンポーネント、カンタン、ワカル

React ワカラナイ、コワイ

デモツカッテミル。エンジニア、チョウセン、スル

index.jsx

import React from 'react';

const Index = ({ userName }) => {
  return <h1>Hello {userName}!</h1>;
};

export default Index;

ナニコレ、コワイ。 JavaScript ノナカニ HTML ノッテル！！

...

アレ、デモ、コッチノホウガカンタンカモ？

関心ノ分離、デキテル。

タダノ関数ダカラ、状態ガナクテワカリヤスイ。

ソレニコレ、糖衣構文ラシイ。

これは JSX と呼ばれる JavaScript の構文の拡張です。UI がどのような見た目かを記述するために、React とともに JSX を使用することを私たちはお勧めしています。JSX はテンプレート言語を連想させるでしょうが、JavaScript の機能を全て備えたものです。
https://ja.reactjs.org/docs/introducing-jsx.html

index.js

import React from 'react';

const Index = ({ userName }) => {
  return React.createElement(
    'h1',
    {},
    'Hello ' + userName + '!'
  );
};

export default Index;

コレヲワカリヤスクカキクダスノガ jsx ナンダネ。ワカッテキタ。

index.tsx

import React from 'react';

type IndexProps = {
  userName: string,
};

const Index: React.FC<IndexProps> = ({ userName }) => {
  return <h1>Hello {userName}!</h1>;
};

export default Index;

TypeScript モキレイニ型ガウメコメル。キモチイイ。

jsx, tsx ワカッタ。 vue ヨリキモチイイカモ。

ミンナモクワズキライセズ tsx ツカッテミテ。