面接のために知っておくべき eact.js コーディングの主要な課題 !

1. React フックを使用してカウンターを構築します

チャレンジ: ボタンがクリックされた回数を追跡する単純な React コンポーネントを作成します。ボタンを押すたびに数値が増加します。

タスク: useState フックを使用してこれを実装します。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

これが重要な理由: これは、React における状態管理の最も基本的な例の 1 つです。フックを使用して動的値を簡単に保存、更新、表示する方法を示します。

プロのヒント: カウントを 0 に戻すには、「リセット」ボタンを追加するにはどうすればよいでしょうか?試してみてください!

---

2. ユーザー入力を取得するフォームを作成する

チャレンジ: 名前と電子メールの 2 つの入力フィールドを持つフォームを実装します。値はユーザーが入力すると動的に更新され、フォームが送信されると、入力されたデータが画面に表示される必要があります。

import React, { useState } from 'react';

const UserForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UserForm;

これが重要な理由: React でのフォーム入力の処理は、特にログイン フォームや検索フィールドなどのユーザー インタラクションを必要とするアプリケーションにとって重要なスキルです。

プロのヒント: フォームの送信を許可する前に、電子メールの形式が正しいことを確認するための検証をどのように処理できますか?

---

3. 追加機能と削除機能を備えた To Do リストを作成します

チャレンジ: ユーザーが入力フィールドに入力して [追加] を押すことでタスクを追加できる To Do リストを作成します。各タスクには、タスクを削除するための「削除」ボタンが必要です。

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim()) {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add a new task"
      />
      <button onClick={addTodo}>Add</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

これが重要な理由: リストと状態の更新の管理は、React アプリケーション、特に動的ユーザー インターフェイスの構築における一般的なタスクです。

プロのヒント: 空の To Do 項目を追加しようとするとどうなりますか?どうすればそれを防ぐことができますか?

---

4. 検索入力にデバウンスを実装する

チャレンジ: ユーザーが入力を停止してから 500 ミリ秒待ってから検索を実行する検索入力を構築します (状態を更新することでシミュレートされます)。これには useEffect を使用します。

import React, { useState, useEffect } from 'react';

const Search = () => {
  const [query, setQuery] = useState('');
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setSearchTerm(query);
    }, 500);

    return () => clearTimeout(timeoutId);
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <p>Results for: {searchTerm}</p>
    </div>
  );
};

export default Search;

これが重要な理由: デバウンスは、不要な API 呼び出しを防ぎ、パフォーマンスとユーザー エクスペリエンスを向上させるために、検索フィールドでは不可欠です。

プロのヒント: ユーザーの入力中に読み込みインジケーターを追加して、この問題をどのように改善できますか?

---

5. 「こんにちは」メッセージと「さようなら」メッセージを切り替えます

チャレンジ: ボタンの切り替えに基づいて「こんにちは」または「さようなら」を表示するコンポーネントを作成します。ボタンをクリックするたびにメッセージが切り替わります。

import React, { useState } from 'react';

const ToggleMessage = () => {
  const [showHello, setShowHello] = useState(true);

  return (
    <div>
      <p>{showHello ? 'Hello' : 'Goodbye'}</p>
      <button onClick={() => setShowHello(!showHello)}>
        Toggle Message
      </button>
    </div>
  );
};

export default ToggleMessage;

これが重要な理由: 条件付きレンダリングは React の機能の中核部分であり、この課題は状態に基づいて表示内容を変更する方法を確立するのに役立ちます。

プロのヒント: 「こんにちは」を青で表示し、「さようなら」を赤で表示するには、これをどのように変更しますか?

---

好奇心旺盛な人のためのボーナスチャレンジ:
これらのコンポーネントごとに、ロジックをどのようにリファクタリングして懸念事項を分離し、コードをより再利用しやすくしますか?必要に応じてカスタム フックの作成を検討してください!

---

以上が面接のために知っておくべき eact.js コーディングの主要な課題 !の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。