✡️React

React は Meta が開発している JavaScript ライブラリです。

JSX

特徴は JSX という JavaScript ファイル内に HTML のようなマークアップを記述することです。

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>
  );
}

上記のコードの出力は次のようになります。

Invent new traffic lights
Rehearse a movie scene
Improve the spectrum technology

hooks

React には組み込みの hooks が存在します。

よく使われるものとして useEffect や useState があります。

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

JSX と hooks を使いこなせれば、こどもテックキャラバンHPの 70% は理解出来ます。

また、React のドキュメントは日本語に翻訳されています。だから、React に不慣れな方は公式ドキュメントの一読をお勧めします。

JSX​

hooks​

JSX

hooks