React.js 初心者村チュートリアル_html/css_WEB-ITnose

元のリンク: HOMEBLOG React JS: 初心者向けチュートリアル
原著者: Elise Cicognani
翻訳元: Nuggets Translation Project
翻訳者: markzhai
校正者: JasinY ip ,ミュウ

as As youタイトルから推測できるように、この記事はプログラミング経験がほとんどない読者を対象としています。たとえば、私のような人は、これまでプログラミングの世界を探索してきたのはわずか 6 か月だからです。

ということで、初心者村のチュートリアルになります！ この記事を理解するには、HTML と CSS、および JavaScript (JS) の基本的な知識のみが必要です。

注: 次の例では、ES6 が提供する新機能を使用して、JS コードの作成プロセスを簡素化します。ただし、ES5 を使用して React を完全に作成することもできます。

推定読了時間 9 分

React とは何ですか?

React は Facebook と Instagram ( https://facebook.github.io/react/ ) によって作成された JS ライブラリです。これにより、アプリケーションをいくつかの動的で再利用可能な

コンポーネント に分割することで、シングル ページ アプリケーション (SPA) を作成できます。

React コンポーネントは、React が提供する

Component を拡張する JS クラスです。コンポーネントは、HTML コードのブロックと、このコードのブロックに関連付けられた動作 (クリック イベントなど) を表し、定義します。コンポーネントは、必要な複雑なアプリケーションを構築するために使用できるレゴ ブロックのようなものです。完全に JS コードで構成されるコンポーネントは分離して再利用できます。基本的なメソッドは render() で、単に HTML コードを返します。

React コンポーネントを定義するためのこの構文は

JSX と呼ばれます。この構文は、JS-HTML コードとのコンポーネント内対話を簡素化するために、React の作成者によって開発されました。この構文を使用して記述されたコードは、実際の JS コードに変換される前にコンパイルする必要があります。

コンポーネントを作成する

コンポーネントを作成して HTML ページにレンダリングするには、まず HTML ファイル内で一意の ID を持つ div を定義する必要があります。次に、以下の例に示すように、ID を使用して React コンポーネントを div に接続するコードを JSX ファイルに記述します。これを行うと、関連する DOM タグが配置されているページ上でコンポーネントをレンダリングするようにブラウザーに指示されます。

JSX の HTML タグの属性は通常の HTML の属性とほぼ同じですが、唯一の違いは「class」であり、JSX では「className」になります。 HTML に似た構文は括弧で閉じられますが、JS を含むブロックは山括弧で閉じられます。ご覧のとおりです。 render() は常に div を返します。開発者はその中に、必要なだけタグや要素を自由に導入できます。

例: 海賊の絶滅

React を使用してこの画像を作成することを選択した場合、画面上でさまざまな日付を視覚化し、それらの日付をクリックしたときに対応する気温と海賊の数のみを表示できます。

これには 2 つのコンポーネントが必要です。最初のコンポーネントは日付をレンダリングし、各日付を指定された海賊の数と気温にリンクするために使用されます。2 つ目のコンポーネントは、日付のクリック イベントに対応する情報を受け取るために使用する必要があります。 , 海賊の数や現在の気温など、これらのデータに基づいて選択した要素をレンダリングします。

前者は「父親」の役割に相当し、後続の複数の「子」コンポーネントへのリンクが含まれていますが、後者は「父親」に密接に依存しています。

仮想 DOM と呼ばれる React 構造を使用すると、コンポーネントのコンテンツが変更されたときにページ全体を更新せずに、対応するコンポーネントのみを更新できます。これを行うには、コンポーネントには、変更される要素に割り当てられる変数データと HTML 属性を保持する内部メソッドが必要です。これらのプロパティは、変更への応答を担当するコンポーネント内で定義したメソッドにそれ自身をリンクします。

状態とプロパティ

この例では、独立変数データは日付で構成されています。これらは、クリック イベントによって収集された DOM 内の連鎖反応に基づいて、さらに対応する海賊版と温度の情報に基づいて変更されます。したがって、各「DATA」オブジェクトの対応する日付に基づいて情報を保存します。また、親コンポーネントで React の this.state={} 属性を使用して、変数データをキーと値のコピーの形式で保存します。

この形式でプログラムを編成すると、React が提供するメソッドを使用して「状態」の形式でデータを操作し、それに変更を加えることができます。

HTML で日付をレンダリングするために DATA オブジェクトのキーを使用したいことを考慮すると、キーに対して JS map() メソッド (Array.prototype.map()) を使用する方法を見つけることが最善です。 render() によって返された HTML を直接表示することもできます。実はそれを行う方法があります！ JS コードを二重中括弧で囲み、コード出力を表示するコンポーネントを管理する DOM ブロック内に配置するだけで準備完了です。

この特定の例では、コンポーネント内のメソッドで map() コールバックを定義します。これは、同じコンポーネントの render() 内で HTML コードの一部を返します。

クリック イベントを各日付に割り当てるために、onClick 属性をそれらに割り当てます。

この属性では、コンポーネントのメソッドを呼び出します。これにより、onClick イベントの後にトリガーする状態の変更やその他の変更が定義されます。

この例では、関数を handleClick() として定義します。 handleClick() では、React メソッド setState() を呼び出します。これにより、クリック イベントごとに状態データを変更できるようになります。変更したい状態キーを含むオブジェクトを挿入し、後者の括弧内に新しい関連値を割り当てるだけです。

一般に、日付がクリックされるたびに、選択された div の onClick 属性が HandClick() メソッドを呼び出し、このメソッドが setState() メソッドを呼び出してコンポーネントの状態を変更します。

状態が変化するたびに、React はコンポーネントの render() 関数の戻りを自動的にチェックし、新しい状態に基づいて更新する必要があるものを見つけます。データが利用可能になると、React は自動的に新しい render() をトリガーして、変更された HTML フラグメントを更新します。

(申し訳ありませんが、次の例では、状態の変更に基づいた CSS 管理のための小さなツールであるクラス名を利用するコードを 3 行挿入しました。これは、プレビューに少し色を付けるためだけに行ったものです。また、最後の例では、これを使用していくつかの海賊版変数をプレビューに設定します。GitHub の Classnames リポジトリへのリンクと簡単な使用ガイドが見つかります)

これで、親コンポーネントの状態がベースに設定されました。選択したデータに対してサブコンポーネントを作成します (海賊の数と対応する温度を記述します)。

前に親コンポーネントで行ったのと同じように、JSX ファイル内に子コンポーネントのインスタンスを作成します。子コンポーネントをその親にリンクするには、同じ構文と HTML タグを使用して、後者の render() 関数で関係を定義するだけです。これを「Child」と呼ぶと、 を挿入した HTML ブロック内に表示されます。

子コンポーネントは、現在選択されているデータに関連付けられている海賊行為と温度に基づいて、データを親に渡す必要もあります。これを行うには、Child タグに割り当てられたプロパティを利用します。このプロパティには任意の名前を付けることができ、その情報は親コンポーネントのみに表示されます。

このようにして、子コンポーネントは、親コンポーネントに属するデータに明示的にアクセスすることによって、つまり、これらの「属性ブリッジ」または props を使用することによって、自身の内部情報にアクセスできるようになります。

したがって、親コンポーネントの状態が変化するたびに、その子コンポーネントの属性内容が自動的に更新されます。ただし、子コンポーネントの render() メソッドがプロパティのコンテンツを表示するのと同じように、一方向の線形データ フローに基づいて受信した新しい情報に基づいて更新も行います。

完了!コンポーネントは相互に対話し、ページを 1 回更新することなく、クリックに基づいて DOM 内にさまざまなデータをレンダリングします。この基盤に基づいて、必要に応じて対話の複雑さとコンポーネントの数を増やすことができ、複雑で効率的なアプリケーションを作成できるようになります。

このライブラリの可能性にインスピレーションを受けた場合は、react.rocks Web サイトをチェックしてください。そこには、始めるための興味深いアイデアがたくさんあります。 (: