Reactは、コンポーネントベースのUIを構築するためのJavaScriptライブラリです。コンポーネントとは、UIを独立した部品に分割した再利用可能な単位のことです。HTMLとJavaScriptが密に統合されているため、ロジックとUIが一体化しており保守性が高くなります。

環境構築

Reactを使うための開発環境を構築しましょう。ReactのCLIツールであるCreate React Appを利用すると手軽に開発環境を作れます。

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

以上のコマンドで、http://localhost:3000/にReactのデフォルトページが表示されます。

JSX

ReactではJSXという構文を使ってUIを記述します。JSXはHTMLのタグ記法とJavaScriptのコードを混在させた構文です。

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello React!</h1>
      <p>This is a sample app.</p>
    </div>
  );
}

export default App;

JSXの構文は、XMLやHTMLに似ていますが、実際にはJavaScriptの構文糖衣構文です。

コンポーネント

Reactではコンポーネントを作成し、それらを組み合わせてUIを構築していきます。コンポーネントには関数コンポーネントとクラスコンポーネントの2種類があります。

関数コンポーネント

import React from 'react';

const MyComponent = (props) => {
  return <div>Hello, {props.name}</div>;
}

export default function App() {
  return (
    <div>
      <MyComponent name="React" />
    </div>
  );
}

クラスコンポーネント

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <MyComponent name="React" />
      </div>
    );
  }
}

関数コンポーネントはシンプルで書きやすく、パフォーマンス面でも優れています。一方でクラスコンポーネントはライフサイクルメソッドを使えるなどの利点があります。

State and Props

コンポーネントの状態を管理するにはStateとPropsを使います。Propsは親から子へデータを渡すための外部から設定される値です。一方Stateはコンポーネント自身の内部で管理される値で、setStateメソッドを使って更新できます。

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

上記の例では、countというStateを定義し、ボタンクリックでインクリメント/デクリメントする簡単なカウンターアプリを実装しています。

以上がReactの基本的な使い方の解説になります。本記事を通して、Reactの環境構築、JSX、コンポーネント、StateとPropsの基礎を理解できたと思います。次はReactフック、ライフサイクルメソッド、リストのレンダリングなどを学んでいき、より高度なアプリケーション開発に備えましょう。