React - ユーザインターフェース構築のための JavaScript ライブラリ

React.jsの特徴

• ユーザインターフェース構築のためのJavaScript ライブラリ
• 宣言的なView
  • 通常のJavaScriptのDOM操作は手続き的
• コンポーネントベース
• 一度学習すれば、どこでも使える（サーバーサイド、React Nativeなど）

環境構築

前提条件

• Node.js 10.13 or later
  • 最新のLTSをインストールしておくのがオススメ
    • https://nodejs.org/ja/

CLI（Create React App）からアプリの雛形を構築

新しい React アプリを作る - React

$ npx create-react-app my-app
$ cd my-app
$ npm start

Reactの基本

• コンポーネント
• props
• useState（ステートフック）
• useEffect（副作用フック）

コンポーネント

UIを再利用可能な部品として定義する

import React from 'react';

// classコンポーネント
class HelloMessageClass extends React.Component {
  render() {
    return <div>Hello redimpulz</div>;
  }
}

// 関数コンポーネント
const HelloMessageFunction = () => <div>Hello redimpulz</div>;

export default function App() {
  return (
    <div>
      <HelloMessageClass />
      <HelloMessageFunction />
    </div>
  );
}