Die größten eact.js-Codierungsherausforderungen, die Sie für Vorstellungsgespräche kennen müssen!

1. Bauen Sie einen Zähler mit React Hooks

Herausforderung: Schreiben Sie eine einfache React-Komponente, die verfolgt, wie oft auf eine Schaltfläche geklickt wird. Mit jedem Tastendruck sollte sich die Zahl erhöhen.

Aufgabe: Implementieren Sie dies mit dem useState-Hook.

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;

Warum das wichtig ist: Dies ist eines der grundlegendsten Beispiele für die Zustandsverwaltung in React. Es zeigt, wie dynamische Werte mithilfe von Hooks einfach gespeichert, aktualisiert und angezeigt werden.

Profi-Tipp: Wie würden Sie eine Schaltfläche „Zurücksetzen“ hinzufügen, um den Zähler auf 0 zurückzusetzen? Probieren Sie es aus!

2. Erstellen Sie ein Formular zur Erfassung von Benutzereingaben

Herausforderung: Implementieren Sie ein Formular mit zwei Eingabefeldern – Name und E-Mail. Die Werte sollten sich dynamisch aktualisieren, während der Benutzer etwas eingibt, und wenn das Formular gesendet wird, sollten die eingegebenen Daten auf dem Bildschirm erscheinen.

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;

Warum das wichtig ist: Der Umgang mit Formulareingaben in React ist eine entscheidende Fähigkeit, insbesondere für Anwendungen, die Benutzerinteraktionen erfordern, wie Anmeldeformulare oder Suchfelder.

Profi-Tipp: Wie können Sie mit der Validierung sicherstellen, dass das E-Mail-Format korrekt ist, bevor das Formular gesendet werden kann?

3. Erstellen Sie eine To-Do-Liste mit Funktionen zum Hinzufügen und Entfernen

Herausforderung: Erstellen Sie eine Aufgabenliste, in der Benutzer Aufgaben hinzufügen können, indem sie etwas in ein Eingabefeld eingeben und auf „Hinzufügen“ klicken. Jede Aufgabe sollte über eine Schaltfläche „Entfernen“ verfügen, um die Aufgabe zu löschen.

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;

Warum das wichtig ist: Das Verwalten von Listen und Statusaktualisierungen ist eine häufige Aufgabe in React-Anwendungen, insbesondere beim Erstellen dynamischer Benutzeroberflächen.

Profi-Tipp: Was passiert, wenn Sie versuchen, einen leeren Aufgabeneintrag hinzuzufügen? Wie würden Sie das verhindern?

4. Entprellen in einer Sucheingabe implementieren

Herausforderung: Erstellen Sie eine Sucheingabe, die 500 ms wartet, nachdem der Benutzer mit der Eingabe aufgehört hat, bevor sie eine Suche durchführt (simuliert durch Aktualisierung des Status). Verwenden Sie dazu 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;

Warum das wichtig ist: Entprellen ist in Suchfeldern unerlässlich, um unnötige API-Aufrufe zu verhindern und die Leistung und Benutzererfahrung zu verbessern.

Profi-Tipp: Wie könnten Sie dies verbessern, indem Sie eine Ladeanzeige hinzufügen, während der Benutzer tippt?

5. Zwischen „Hallo“- und „Auf Wiedersehen“-Nachrichten umschalten

Herausforderung: Erstellen Sie eine Komponente, die „Hallo“ oder „Auf Wiedersehen“ basierend auf einer Schaltflächenumschaltung anzeigt. Jedes Mal, wenn auf die Schaltfläche geklickt wird, sollte sich die Meldung ändern.

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;

Warum das wichtig ist: Bedingtes Rendern ist ein zentraler Teil der Leistungsfähigkeit von React, und diese Herausforderung hilft dabei, zu festigen, wie sich die Anzeige basierend auf dem Status ändern lässt.

Profi-Tipp: Wie würden Sie dies ändern, sodass „Hallo“ in Blau und „Auf Wiedersehen“ in Rot angezeigt wird?

Bonus-Herausforderung für Neugierige:
Wie würden Sie die Logik für jede dieser Komponenten umgestalten, um Bedenken zu trennen und den Code wiederverwendbar zu machen? Erwägen Sie gegebenenfalls die Erstellung benutzerdefinierter Hooks!

Das obige ist der detaillierte Inhalt vonDie größten eact.js-Codierungsherausforderungen, die Sie für Vorstellungsgespräche kennen müssen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!