React は長い間頼りになる JavaScript ライブラリであり、間違いなく世界で最も人気のあるライブラリの 1 つです。また、Next.js や Remix などの人気のフレームワークが React 上に構築されており、React-Native でモバイル開発を行う機能があるため、このライブラリがすぐになくなることはありません。ただし、これの問題は、ほとんどの初心者が React に群がり、その仕組みをよく理解せずに学習を始めることです。それでは、詳しく見ていきましょう。

JSX の仕組み

React では、JSX (JavaScript XML) は HTML に似ていますが、JavaScript 内で動作する構文です。それ自体は有効な JavaScript ではないため、React はトランスパイラー (通常は Babel) を使用して JSX を標準 JavaScript に変換します。この JavaScript コードは、ブラウザが最終的に解釈するものです。

JSX を記述すると、JSX は React.createElement() 関数呼び出しに変換されます。これらの関数呼び出しにより、React アプリケーションの構成要素である React 要素が生成されます。各要素は UI の一部を表します。

これは次のような例です:

React コンポーネント内の JSX

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

JavaScript に変換された JSX:

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

React は、これらのネストされた React.createElement() 呼び出しを受け取り、ブラウザーの DOM 内の対応する HTML 要素に変換します。

結論

JSX を使用すると、HTML に似た構文を記述できるため、React コンポーネントの作成が容易になりますが、これは JavaScript を使用してアプリの構造を作成する React.createElement() 呼び出しの糖衣構文にすぎません。これにより、React は仮想 DOM メカニズムを通じて UI を効率的に管理できるようになります。

この記事が気に入っていただけたなら、私が毎週お送りしている無料のニュースレターもお楽しみいただけると思います。ここから登録できます。