Reactの機能コンポーネント、小道具、JSX –初心者向けのReact.jsチュートリアル

Reactは、ユーザーインターフェイスを構築するための最も人気のあるJavaScriptライブラリの1つです。

フロントエンド開発者になりたい場合、またはWeb開発の仕事を見つけたい場合は、Reactを深く学ぶことでおそらく恩恵を受けるでしょう。

この投稿では、コンポーネントの作成、JSX構文、小道具など、Reactの基本のいくつかを学びます。Reactの経験がまったくないか、ほとんどない場合は、この投稿が最適です。

手始めに、Reactをインストールする方法は次のとおりです。

JSXとは何ですか?

最初のReactプロジェクトをインストールした後に最初に気付くのは、JavaScript関数がいくつかのHTMLコードを返すことです。

function App() { return ( 

Edit src/App.js and save to reload.

); }

これは、JSX(JavaScript XML)と呼ばれるReactの特別で有効な構文拡張です。通常、フロントエンド関連のプロジェクトでは、HTML、CSS、およびJavaScriptコードを別々のファイルに保存します。ただし、Reactでは、これは少し異なる動作をします。

上記の例のように、JSXではHTMLとJavaScriptを組み合わせて同じファイルに書き込むことができるため、Reactプロジェクトでは個別のHTMLファイルを作成しません。ただし、CSSを別のファイルに分割することはできます。

最初は、JSXは少し奇妙に見えるかもしれません。しかし、心配しないでください、あなたはそれに慣れるでしょう。

JSXは非常に実用的です。これは、次のように中括弧{}を使用して、HTML内でJavaScriptコード(ロジック、関数、変数など)を直接実行することもできるためです。

function App() { const text = 'Hello World'; return ( 

{text}

); }

また、JavaScript変数にHTMLタグを割り当てることができます。

const message = 

React is cool!

;

または、JavaScriptロジック内でHTMLを返すことができます(if-elseの場合など)。

render() { if(true) { return 

YES

; } else { return

NO

; } }

JSXの詳細については説明しませんが、JSXを作成する際は、次のルールを考慮してください。

  • HTMLおよびコンポーネントタグは常に閉じる必要があります
  • 以下のようないくつかの属性「クラス」になる「クラス名は」(クラスはJavaScriptのクラスを参照するため)、「tabindex属性は、」となり「のtabIndex」とキャメルケースを記述する必要があります
  • 一度に複数のHTML要素を返すことはできないため、必ず親タグで囲んでください。
return ( 

Hello

World

);
  • または、別の方法として、空のタグでそれらをラップすることもできます。
return (  

Hello

World

);

詳細については、私のReact forBeginnersチュートリアルもご覧ください。

機能コンポーネントとクラスコンポーネントとは何ですか?

JSX構文に慣れたら、次に理解するのはReactのコンポーネントベースの構造です。

この投稿の上部にあるサンプルコードに再度アクセスすると、JSXコードが関数によって返されていることがわかります。ただし、App()関数は通常の関数ではなく、実際にはコンポーネントです。では、コンポーネントとは何ですか?

コンポーネントとは何ですか?

コンポーネントは、UIを小さな部分に分割する、独立した再利用可能なコードブロックです。たとえば、Reactを使用してTwitterのUIを構築している場合:

UI全体を1つのファイルの下に構築するのではなく、すべてのセクション(赤でマークされている)を小さな独立した部分に分割することができます。言い換えれば、これらはコンポーネントです。

Reactには2種類のコンポーネントがあります:機能的とクラス。それぞれをさらに詳しく見ていきましょう。

機能コンポーネント

Reactで最初に推奨されるコンポーネントタイプは機能コンポーネントです。機能コンポーネントは基本的に、React要素(JSX)を返すJavaScript / ES6関数です。Reactの公式ドキュメントによると、以下の関数は有効な機能コンポーネントです。

function Welcome(props) { return 

Hello, {props.name}

; }

または、矢印関数定義を使用して機能コンポーネントを作成することもできます。

const Welcome = (props) => { return 

Hello, {props.name}

; }
この関数は、データを含む単一の「props」(プロパティを表す)オブジェクト引数を受け入れ、React要素を返すため、有効なReactコンポーネントです。— reactjs.org

後でコンポーネントを使用できるようにするには、最初にコンポーネントをエクスポートして、別の場所にインポートできるようにする必要があります。

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

インポートした後、次の例のようにコンポーネントを呼び出すことができます。

import Welcome from './Welcome'; function App() { return ( ); }

したがって、Reactの機能コンポーネント:

  • JavaScript / ES6関数です
  • React要素(JSX)を返す必要があります
  • 常に大文字で始まります(命名規則)
  • 必要に応じて小道具をパラメータとして受け取ります

クラスコンポーネントとは何ですか?

2番目のタイプのコンポーネントはクラスコンポーネントです。クラスコンポーネントは、JSXを返すES6クラスです。以下に、同じWelcome関数を、今回はクラスコンポーネントとして示します。

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

機能コンポーネントとは異なり、クラスコンポーネントには、JSXを返すための追加のrender()メソッドが必要です。

クラスコンポーネントを使用する理由

以前は「状態」のためにクラスコンポーネントを使用していました。古いバージョンのReact(バージョン<16.8)では、機能コンポーネント内で状態を使用することはできませんでした。

したがって、UIのみをレンダリングするための機能コンポーネントが必要でしたが、データ管理といくつかの追加操作(ライフサイクルメソッドなど)にはクラスコンポーネントを使用していました。

これはReactHooksの導入によって変更され、機能コンポーネントでも状態を使用できるようになりました。(次の投稿で状態とフックについて説明しますので、今は気にしないでください)。

クラスコンポーネント:

  • はES6クラスであり、Reactコンポーネントを「拡張」するとコンポーネントになります。
  • 必要に応じて(コンストラクターで)小道具を取ります
  • render()が必要ですJSXを返すためのメソッド

Reactの小道具とは何ですか?

コンポーネントのもう1つの重要な概念は、コンポーネントの通信方法です。Reactには、あるコンポーネントから別のコンポーネントにデータを転送するために使用するprop(プロパティの略)と呼ばれる特別なオブジェクトがあります。

ただし、注意してください。小道具は、一方向のフローでのみデータを転送します(親コンポーネントから子コンポーネントへのみ)。小道具では、子から親に、または同じレベルのコンポーネントにデータを渡すことはできません。

上記のApp()関数に戻って、小道具を使用してデータを渡す方法を確認しましょう。

まず、ウェルカムコンポーネントで小道具を定義し、それに値を割り当てる必要があります。

import Welcome from './Welcome'; function App() { return ( ); }

小道具はカスタム値であり、コンポーネントをより動的にします。ここではWelcomeコンポーネントが子であるため、親(App)で小道具を定義する必要があります。これにより、小道具の「名前」にアクセスするだけで値を渡して結果を取得できます。

function Welcome(props) { return 

Hello, {props.name}

; }

Reactの小道具は本当に便利です

そのため、React開発者は小道具を使用してデータを渡し、この仕事に役立ちます。しかし、データの管理についてはどうでしょうか?小道具は、データを操作するためではなく、データを渡すために使用されます。ここfreeCodeCampの今後の投稿で、Reactを使用したデータの管理について説明します。

それまでの間、ReactとWeb開発について詳しく知りたい場合は、私のYouTubeチャンネルに登録してください。

読んでくれてありがとう!