【React入門】Reactとは

初めに

フロントエンド開発初心者がReactの案件に参画することになったため、チュートリアル等で勉強し得た知識をまとめてみました。

Reactとは

Reactはユーザーインターフェース(UI)を構築するためのJavaScriptライブラリです。
UIを「コンポーネント」という小さく独立した部品を組み合わせて構築することができます。

Reactの使用例

実際にReactを使ったサンプルアプリを見てみましょう。
以下は押されたボタンによって値を増減させる簡単なカウンターアプリです。

See the Pen Counter by Amsel (@amsel1676) on CodePen.

サンプルアプリ

class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      count: 0,
    };
  }
  
  render(){
    return (
     <div>
       <div className="title">Counter</div>
       <button 
         className="minusButton"
         onClick={() => this.setState({count: this.state.count-1})}
       >
         -
       </button>
       <div className="counter">{this.state.count}</div>
       <button 
         className="plusButton"
         onClick={() => this.setState({count: this.state.count+1})}
        >
         +
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

Counterコンポーネント

Counterコンポーネント

class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      count: 0,
    };
  }

  render(){
    return (
     <div>
       <div className="title">Counter</div>
       <button 
         className="minusButton"
         onClick={() => this.setState({count: this.state.count-1})}
       >
         -
       </button>
       <div className="counter">{this.state.count}</div>
       <button 
         className="plusButton"
         onClick={() => this.setState({count: this.state.count+1})}
        >
         +
        </button>
      </div>
    );
  }
}

上のコードのCounterがReactコンポーネントです。
Counterコンポーネントはpropsというパラメータを受け取り、constructorメソッドで値を初期化させ、renderメソッドで表示するビューの説明書である仮想DOMを返却します。

Counterコンポーネントはstateというオブジェクトでアプリケーションの状態を保持して、状態が変わるごとにその差分を再レンダリングする仕組みになっています。

この状態管理の仕組みにより、上のサンプルアプリではボタンを押した結果がすぐに画面に描画されるようになっています。

コンポーネント呼び出し

コンポーネント呼び出し

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

上記がコンポーネントの呼び出し部分となります。
ReactDOM.renderメソッドはCounterコンポーネントが返却した仮想DOMを指定したDOMにレンダリングします。

JSX

上のコードはJavaScriptとHTMLタグが入り混じったような特徴的な見た目をしていますが、これはJSXを用いて書かれているためです。

JSXとは「JavaScript XML」の略で、XML風に作られたJavaScriptの拡張シンタックスです。

JSXのメリット

JSXはあくまで拡張シンタックスであり、JSXで書かれたコードはBabelを通じてJavaScriptの関数呼び出しへと置き換えられます。

つまりReactはJSXを使用せずに書くことが可能です。
JSXを使用せずに書くと以下のようになります。

JSXなし

function Welcome(props){
  return React.createElement(
    'h1',
    null,
    `Welcome ${props.name}`,
  );
}

ReactDOM.render(
  <Welcome name="Tom" />,
  document.getElementById('app')
);

同様のコードをJSXを使用して書くと以下のようになります。

JSXあり

function Welcome(props) {
  return <h1>Welcome, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="Tom" />,
  document.getElementById('app')
);

このようにJSXを使用することでHTML風に構造が可視化され、可読性が向上します。

参考

Reactチュートリアル