ホームページ >ウェブフロントエンド >jsチュートリアル >React.js: 最初のプロジェクトから学んだこと

React.js: 最初のプロジェクトから学んだこと

Linda Hamiltonオリジナル: 2025-01-26 06:29:11309ブラウズ

元々は、2023 年 4 月 2 日に、平易な英語で Medium for JavaScript に公開されました

過去数週間にわたって、私は Web 開発の世界で非常に人気のあるもう 1 つのスキル、React.js を学び始めました。 JavaScript の多くのことに少なくともある程度慣れてきたので、何人かの指導者からの指示もあり、これが自分のキャリア目標を達成するために取るべき最も論理的なステップであると考えました。この記事では、新人の私がそれについて学んだことをいくつか共有します。

状況によっては、私は React のクラスコンポーネントのみを使用したことがあり、関数コンポーネントを使用したことはありません。今は関数コンポーネントについては何も知らないので、ここでは違いについては説明しません。いつかこの2つのタイプを対比した記事を書くつもりです。この記事を書いている時点でも、関数型コンポーネントを使用することが誰からも推奨されていますが、古い React プロジェクトではクラスコンポーネントが使用されている可能性があるため、クラスコンポーネントがどのように機能するかを知ることは依然として有益です。

私の最初のプロジェクトでは、ユーザーが借金元本、金利、支払い希望額を入力できる借金計算ツールを構築するという任務を与えられました。これらの入力フィールドにはいくつかの規定がありますが、それらについてはプロジェクトの README.md で読むことができます (GitHub リポジトリへのリンクは記事の最後にあります)。または、自分で試してその動作を確認することもできます。ユーザーが支払いを「送信」すると、支払い履歴項目が表示され、元金、利息、残高に関する詳細が表示されます。ユーザーが最初の支払いで借金を全額返済しない限り、最初の支払いが行われるとき、支払いフィールドを除くすべての入力フィールドは無効になります。借金が全額返済されると、フォーム全体が無効になり、ユーザーは借金がなくなったというメッセージとともに最終支払いの履歴を表示できます。

私が React について学び始めたときに抱いた次の質問に答えます。

React.js とは何ですか?なぜ使用する必要がありますか?

React アプリの構築を開始するにはどうすればよいですか?

典型的なコンポーネントはどのようなものですか?

コンポーネント間で情報を共有するにはどうすればよいですか?

React で条件付きでレンダリングできますか?

React アプリをデプロイするにはどうすればよいですか?

React.js とは何ですか? なぜ使用する必要があるのですか?

React は、大規模なプロジェクトの編成を容易にするフロントエンド JS ライブラリ (フレームワークではない ?) です。これはもともと Facebook で開発され、詳細はこちらに記載されていますが、現在はもちろん Meta によって保守されており、Meta は Instagram でもそれを使用しています。現在、Airbnb、BBC、Imgur、Netflix など、インターネット上の多くのサイトで広く使用されています。

React コードは再利用可能なコンポーネントで構成されており、コンポーネントは src フォルダー内に配置する必要があり、名前は CamelCase 形式にする必要があります。多くのコンポーネントは、HTML と JS を組み合わせたような JSX (JavaScript Syntax Extension) で書かれています。これらのコンポーネントは同じ構造を持ち、異なる情報が渡されてサイトに表示される可能性があるため、私はこれらのコンポーネントを「再利用可能」と呼んでいます。コンポーネントは通常の JS で記述することもできます。ユーザーアカウント情報などのさまざまな情報をこれらのコンポーネントに渡すことができ、それらはすべて同じように表示されます。

React アプリの構築を開始するにはどうすればよいですか?

React アプリを初期化するには、ターミナルに次のコマンドを入力します。

npx create-react-app project-name
cd project-name
npm start

npm start は、デフォルトのブラウザの空のポートでプロジェクトを開きます。
通常、すべての設定が完了するまでに数分かかるため、その間に、ばかばかしいダンスを TikTok にアップロードしたり、どのホグワーツ寮に振り分けられるかを調べるなど、何か生産的なことをしてみるとよいでしょう (はい、そのクイズは私が作りました)。

公式ドキュメントでは、フレームワークを使用して React アプリを初期化することが推奨されています。私はまだ使用していませんが、詳細についてはここで読むことができます。

典型的なコンポーネントはどのようなものですか?

前述したように、私はこれまでクラスコンポーネントのみを扱ってきたため、この記事ではクラスコンポーネントについてのみ説明します。最初のプロジェクトで使用したコンポーネントはここに置くには少し大きいので、記事の最後にリンクされているリポジトリの src フォルダーにある App.js ファイルと PaymentHistory.jsx ファイルを参照して、実際の動作を確認してください。それにもかかわらず、典型的なクラスコンポーネントは次のようになります:

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

各

にキー値を追加したことに注目してください。

内の要素。これらは、アプリが適切に機能するために必ずしも重要ではありませんが、含めることをお勧めします。一意のキー値は、return() 内の親要素の各子に追加する必要があります。

通常の JS クラスと同様に、最初に来るのはconstructor()で、次にsuper()が続きます。たとえば、あるクラスから別のクラスに状態値やメソッドを共有したい場合は、constructor() と super() の両方のパラメーターとして props (「プロパティ」の略) を渡す必要があります。

次に、状態値を初期化する必要があります。私の借金計算プロジェクトでは、支払い、元金、未払い利息、残高に関連するさまざまな金額を追跡するために複数の状態値を使用する必要がありましたが、特定のものをどのように表示するか、または表示するかどうかを決定するいくつかの値も使用しました。 isDebtFree 状態値を使用して、入力フィールドが false の場合に有効にし、true の場合に無効にする方法を次に示します。

npx create-react-app project-name
cd project-name
npm start

ご覧のとおり、setState 関数を使用してクラスコンポーネントの状態値を変更できます。 setState は非同期で実行されるため、更新された状態値を必要とする機能はコールバックに含めることができることに注意してください。ただし、これらのコールバックはできるだけ単純にする必要があります。そうしないと、「コールバック地獄」の混乱した世界に陥ることになるため、コンポーネントでメソッドを作成するときは、できる限り単一責任の原則に従ってください。また、コンポーネント内で状態が変更されるたびに、コンポーネントが再レンダリングされることも知っておく必要があります。
DOM はメソッド内で直接操作しないでください。このようなことを「アンチパターン」と呼びます。次のようにメソッド内に disabled 属性を設定することで、DOM 要素に直接アクセスしていないことに注目してください。

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

代わりに、return() 内の HTML 要素の一部を状態値に設定する必要があります。この段落のすぐ上のコードブロックで示したように、コンポーネント内のメソッドの実行に基づいて状態値が変更される可能性があります。

もう 1 つ注意すべき点は、コンポーネントの return() 式はできる限り短くする必要があるため、ここで定義されている機能だけでなく、あらゆる種類の数式をそこに配置しないようにすることです。最初にこの間違いを犯したのは、支払いフィールドに最小値と最大値を設定しようとしたときでした。この値は状態の値に基づいて変化し、元金と金利のフィールドに数値が入力されたとき、および支払いが行われたときに変化します。

代わりに、これらの値のそれぞれにメソッドを作成し、これらのメソッドが返す値に最小値と最大値を設定しました。以下の最初の方法は機能しましたが、コンポーネントの return() 部分はできる限り短くて読みやすい必要があるため、React でこれを実行するのに必ずしも良い方法とは言えません。

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

以下のメソッドは React の精神により準拠しています:

// DO NOT ACCESS DOM ELEMENTS DIRECTLY INSIDE A METHOD!
updateValues = () => {
  if (newBalance === 0) {
  document.getElementById('payment').disabled = true;
 }
}

コンポーネント間で情報を共有するにはどうすればよいですか?

この記事の最初のコーディングブロックでわかるように、props を使用して、あるコンポーネントから別のコンポーネントにメソッドを渡しました。次に、この 2 番目のコンポーネントが、上記の最初のコードブロックで App から渡したものにどのようにアクセスできるかを見てみましょう。上までスクロールして見るのが面倒な方のために、その部分は次のようになりました。

// You could put math operations directly inside elements in return()...
// ... but this is not the best way
render() {
  return (
    <input
      type="number"
      min={
        this.state.principal / 100 +
            (this.state.principal * Number(this.state.interestRate)) / 100 / 12;
      }
      max = {
        this.state.principal +
            (this.state.principal * Number(this.state.interestRate)) / 100 / 12;
      }
    />
  )
}

次に、ComponentOne で、このメソッドを App からインポートして使用してみましょう:

// A BETTER WAY
// Create 2 methods; one returns the min payment possible, the other the max:
getMinPmt = () => {
  let minPmt =
    this.cleanValue(this.state.principal / 100) +
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  let totalBalance =
    this.state.principal +
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  if (totalBalance <= 100 && totalBalance > 0) {
    minPmt = totalBalance;
  }
  return this.cleanValue(minPmt);
};
getMaxPmt = () => {
  let maxPmt =
    this.state.principal + 
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  return this.cleanValue(maxPmt);
};

// Set the min & max values of the input to what the respective method returns:
render() {
  return (
    <input
      type="number"
      min={this.getMinPmt()}
      max={this.getMaxPmt()}
    />
  )
}

そのため、changeFont メソッドにアクセスした後、レンダリングする h1 がクリックされたときにこのメソッドを呼び出します。

React で条件付きでレンダリングできますか?

はい！ React は条件付きでレンダリングすることがすべてです。それにはいくつかの方法があります。これをメソッドで実行し、return() の要素の値をその値に設定できます。そこで、借金計算の例をもう一度使ってみましょう。「あなたは借金がありません!」というメッセージを表示したいとします。残高の状態値が 0 の場合、残高が 0 を超えている場合にユーザーに別の支払いを促すボタン。これを行う方法はいくつかあります。

まず、条件に基づいて、この要素の値をメソッドが返す値に設定しましょう。

npx create-react-app project-name
cd project-name
npm start

メソッドを使用すると、return() をより簡潔に保つことができるため、有利な場合があります。通常の JS 関数と同様に、より複雑な条件を追加することもできます。

return() 内で三項演算子を使用して同じことを実現することもできます。

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

ロジックが三項演算子で表現できるほど単純で、まだ読みやすい場合は、三項演算子を使用してください。それ以外の場合は、常にメソッドを使用できます。

たとえば、単純な条件があり、条件が満たされない場合は何も表示しない場合は、次のようにすることができます:

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

this.state.totalBalance が厳密に 0 に等しい場合、メッセージが表示されます。そうでない場合は、何も表示されません。

React アプリをデプロイするにはどうすればよいですか？

私は Netlify を通じて最初の React プロジェクトをデプロイし、プロジェクトの GitHub リポジトリへのアクセスを許可しました。デプロイする前に、npm run build を実行して、実稼働用のアプリをビルドフォルダーにビルドする必要があります。 React を本番モードにバンドルし、最高のパフォーマンスが得られるようにビルドを最適化します。通常、別のサイトと同じようにサイトを更新できます。

index.html ファイルので、favicon URL を含むいくつかのパスを変更する必要がある場合があります。「%PUBLIC_URL%」を ./ に置き換えるだけで済みます。で次のような指示を探してください:

Image description

最初の React プロジェクトを構築するときに学んだことがいくつかありました。 React に関する私の知識はまだそれほど深くありません。そのため、私への提案や追加する情報があれば、コメントを追加してください。役に立ったと思われた場合は、素敵なコメントを残すか、何らかの反応を残してください。また、他の誰かがこれを読むことで有益になると思われる場合は、その人に伝えてください。

読んでいただきありがとうございます!

完全な React.js ドキュメント
私の最初のプロジェクトが進行中
プロジェクトの GitHub リポジトリ

以上がReact.js: 最初のプロジェクトから学んだことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html npm if for while include try using class operator Attribute JS function default constructor dom this history display input github kind everything Access

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：node.jsのフィールド検証とユーザーの存在のマスターチェック：開発者のサバイバルガイド次の記事：node.jsのフィールド検証とユーザーの存在のマスターチェック：開発者のサバイバルガイド

続きを見る