Facebook の人気の JavaScript フレームワークである React について聞いたことがあるでしょう。 Facebook自体やInstagramなど、多くの人気のあるWebサイトで使用されています.この記事では、React で構築された 5 つの実用的な例を紹介します。これにより、フレームワークを有利に開始できます。 React の何が特別なのですか? React は、コンポーネントの概念に基づいて構築されています。これは、双方向のデータ バインディングを使用してページの HTML を更新する Angular や Ember などのフレームワークとは対照的です。私の意見では、

React は最近人気が高まっており、大規模で活発なコミュニティを引き付けています。これにより、再利用可能なコンポーネントが豊富になり、コーディングの時間を節約できます。ライブラリ自体は、モジュール化され構成可能な疎結合コードの作成を促進します。 このチュートリアルでは、小さなアプリケーションを作成する方法と、それを互いに通信する個別のコンポーネントに分割する方法を示します。基本として、先月の npm 駆動の Web サイトの例を取り上げますが、React の方法で行います。結果を比較するのは興味深いことです。React バージョンは jQuery バージョンよりも数行コードが多くなっていま

私の新しい本 React Quickly (Manning、2016 年) の各章には、ビデオ スクリーンキャストによって補足されるプロジェクトがあります。ここまたは YouTube でビデオをご覧ください。コードは GitHub にあります。 迅速な対応 また、Manning で最初の章全体を無料でダウンロードできます。この書籍は 2016 年の第 1 四半期にリリースされる予定ですが、早期アクセス (電子コピー) は現在入手可能です。コード「ma​​rdandz」を使用 」とマニングで 39% オフ。 第 1 章プロジェクト:React を使用したメニュー: 第 2 章

これは React Quickly からの抜粋です （マニング、2016）。 Manning で最初の章全体を無料でダウンロードできます .この書籍は 2016 年の第 1 四半期にリリースされる予定ですが、MEAP は現在入手可能です。コード「mardandz」を使用 」で 39% オフ 各章には、YouTube でホストされているビデオ スクリーンキャストによって補足されるプロジェクトがあります。 . 迅速に対応するスクリーンキャスト プロジェクト:React.js を使用したメニュー この記事のプロジェクトは最小限です。アイデアは、 タグで構成される動的に生成されたメニューを持つ

この投稿は Scott Hasbrouck によって書かれました。 Twitter または彼のウェブサイトで彼を見つけることができます。 StackOverflow のデータによると、ここ数年で JavaScript が Web テクノロジで真に火をつけ、最終的に 2016 年に最も使用される言語になったのは素晴らしいことです。私の JavaScript の歴史は約 15 年前に始まりました。1996 年に Netscape Navigator 2 の一部として最初にリリースされてからそれほど長くはありません。私が最もよく使用した学習リソースは DynamicDrive で、「Dynamic

Next.js アプリで React を使用して全選択リスト コンポーネントを作成する方法。 はじめに このチュートリアルでは、CheatCode Next.js ボイラープレートを使用して作業の開始点を提供します。まず、ボイラープレートのクローンを作成します: ターミナル git clone https://github.com/cheatcode/nextjs-boilerplate.git 次に、cd プロジェクトに追加し、その依存関係をインストールします: ターミナル cd nextjs-boilerplate && npm install 次に、依存関

Stripe.js と Stripe Elements を使用してクレジット カード フォームを作成する方法と、そのクレジット カード フォームの値を取得して Stripe ソース トークンを生成する方法。 はじめに このチュートリアルでは、作業の開始点として、CheatCode Next.js ボイラープレートを使用します。今すぐ Github からコピーを複製しましょう: ターミナル git clone https://github.com/cheatcode/nextjs-boilerplate.git 次に、cd プロジェクトに追加し、その依存関係をインストールします: タ

JavaScript を学び始めた頃から React のことはよく耳にしていましたが、一度見ただけで恐ろしくなりました。 JavaScript が混ざった HTML のように見えるものを見て、これは私たちが避けようとしてきたことではないか?と考えました。 React の重要な点は何ですか? 代わりに、バニラの JavaScript を学び、プロフェッショナルな環境で jQuery を操作することに集中しました。 React を使い始めようとして何度か挫折し、失敗しましたが、ようやく理解できるようになり、バニラの JS や jQuery の代わりに React を使用する理由がわかり始めまし

React で新しい概念が導入されました - フック。フックはクラスに代わるものです。以前に React を使用したことがある場合は、単純な (機能する) コンポーネントに慣れているでしょう。 とクラス コンポーネント . シンプルなコンポーネント } クラス コンポーネント } } ライフサイクル メソッドなど、クラスで利用できる多くの機能 と状態 - 今まで、単純なコンポーネントでは利用できませんでした。新しい Hooks 提案は、そのすべての機能とそれ以上を追加します。 Hooks を試して、クラスなしでアプリがどのように見えるかを確認したかったのですが、まだ例が見られなかったの

contenteditable を追加することで、任意の要素を編集可能にすることができます 属性。この属性は、Google スプレッドシートなど、ウェブ全体で使用されています。 contenteditable を使うか使わないかを言うつもりはありません アプリの要素。 contenteditable を使用する場合 、この記事が役に立つかもしれません。 contenteditable を使用してわかったことをいくつか共有します。 、他の誰かがすべてを 1 か所で見つけることができるようにします。 前提条件 contenteditable を使用して何らかの JavaScript 作業を行っ

React にはルーターが組み込まれていませんが、react-router-dom を使用してルーティングを簡単に実現できます。 図書館。 ルーティング Web アプリケーションがトラフィックを転送する方法です。 (ルーティングとは何かを知っている場合は、このセクションをスキップしてかまいません。) 例:taniarascia.com にアクセスすると、私のホームページに行き着きます。 taniarascia.com/me にアクセスすると、私の自己紹介ページにリダイレクトされます。 taniarascia.com/categories/javascript または taniarascia.

React Context API は、基本的に React アプリで受け渡しできるグローバル変数を作成する方法です。これは、「プロップ ドリル」、または祖父母から親、子へのプロップの受け渡しなどに代わるものです。コンテキストは、状態管理に Redux を使用するためのよりシンプルで軽量なソリューションとして宣伝されることがよくあります。私自身はまだ Redux を使用したことがありませんが、React の Context API を使用するたびに、よくわからないので調べる必要があります。 ここでは、Context を使い始めるための簡単で簡潔な手順をいくつか残しておきます。 前提条件 R

少し前に、React での Context API の使用に関する記事を書きました。ただし、そのページの私の例のほとんどは、クラス コンポーネント static contextType を使用していました。 、および Consumer 、これはコンテキストを処理する従来の方法であり、TYOOL 2021 では、きれいで機能的なコンポーネントが必要です。最近、久しぶりに Context を使用する必要があり、最新の構文のみを使用してより簡潔な説明が必要でした。 Context を現実的に使用するために、ここで少しフォローアップを書くことにしました。 Context を使用すると、ネストに関係な

React アプリケーションを編成する正しい方法については、コンセンサスがありません。 React は多くの自由を与えてくれますが、その自由には、独自のアーキテクチャを決定する責任が伴います。多くの場合、最初にアプリケーションをセットアップした人は、ほとんどすべてを 01 にスローします。 フォルダー、またはおそらく 15 と 28 彼らがReduxを使用した場合、しかし私はより良い方法があることを提案します.使いやすく、理解しやすく、拡張しやすいように、アプリケーションをどのように編成するかを慎重に検討したいと思っています。 大規模な本番環境の React アプリケーション向けの直感的でス

はじめに 読み込みに時間がかかる外部ソースからコンテンツを取得する React アプリケーションを作成する場合、ユーザーを惹きつけてローダーに注意を向けさせることで、快適なユーザー エクスペリエンスを提供することを常にお勧めします。推測に任せるよりも. そのために - 見積もりを取得する小さなアプリケーションを作成します。見積もりが取得されている間はロード画面が表示されます: サンプル React アプリの作成 React マークアップから始めましょう。基本的に、2 つの <div> があります。 親の要素 <div> (簡単にするために) - 1 つは loa

はじめに ロードに時間がかかる外部ソースからコンテンツをフェッチする React アプリケーションを作成する場合、ユーザーを惹きつけてローダーに注意を向けさせることで、快適なユーザー エクスペリエンスを提供することを常にお勧めします。推測に任せるよりも. そのために - 見積もりを取得する小さなアプリケーションを作成します。見積もりが取得されている間はロード画面が表示されます: サンプル React アプリの作成 React マークアップから始めましょう。基本的に、2 つの <div> があります。 親の要素 <div> (簡単にするために) - 1 つは lo

はじめに 開発者がアプリケーションを作成したら、次のステップは、それを友人や一般の人々と共有して、誰もがアクセスできるようにすることです。開発環境からエンド ユーザーに提供されるホスティング プラットフォームにコードを転送するプロセスは、デプロイと呼ばれます。 . Heroku のようなクラウド ホスティング プラットフォームが登場する前は、ホスティングはかなり非効率的でした。これは主に、すべての静的アセット (npm run build を実行して生成されたビルド ファイル) をアップロードする必要があるホスティング プロバイダーによって行われました。 ) 変更を行うたびに。ある種の F

はじめに 導入 コードをソース管理システムからホスティング プラットフォームに移動して格納し、アプリケーションとしてエンド ユーザーに提供できるようにするプロセスです。通常、これはクラウドまたはローカル サーバーで行われます。 Netlify などのクラウド プラットフォームが登場する前は、ホスティングは ホスティング プロバイダー によってのみ行われていました。 すべての静的アセット (npm run build の実行後に生成されたビルド ファイル) の再アップロードが必要な人 ) 変更するたびに。このアップロードは、FTP ソフトウェアまたは cPanel のようなウェブ ホスティン

はじめに 通常、イベントは、ユーザーとアプリの間のある種の対話を表します。ユーザーがオブジェクトをクリックしたとき、入力フィールドに入力したとき、要素をドラッグ アンド ドロップしたときなどです。したがって、各イベントには通常、何らかの反応が必要です。 アプリから。重要なイベントが発生するたびに、発生したイベントに応答するために使用される関数をプログラマーとして定義できます。これらの関数はイベント ハンドラと呼ばれます 、そしてそれらはどのプログラミング言語でもイベント管理の中核です。 イベント管理 処理に使用される一連のテクニックです。 イベント。 DOM と React イベント処理の違

はじめに コンポーネント は、React で理解するのにおそらく最も重要な概念です。 コア ビルディング ブロックの 1 つです。 これにより、UI を独立した再利用可能な部分に分割できるようになり、UI の構築作業がはるかに簡単になります。これらの独立したコンポーネントはすべて、最終的なユーザー インターフェースとして機能する親コンポーネントに結合されます。 コンポーネントとは? コンポーネント 自己完結型の再利用可能なコード ブロックであり、UI 全体を 1 つのファイルに構築するのではなく、ユーザー インターフェイスを小さな部分に分割します。ボタン、フォーム、ダイアログなどはすべてコ