Cabaran Pengekodan eact.js Teratas Anda Mesti Tahu untuk Temuduga !

1. Bina Kaunter dengan Cangkuk Reaksi

Cabaran: Tulis komponen React ringkas yang menjejaki berapa kali butang diklik. Setiap kali butang ditekan, bilangannya akan bertambah.

Tugas: Laksanakan ini menggunakan cangkuk 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;

Mengapa Ini Penting: Ini adalah salah satu contoh paling asas pengurusan negeri dalam React. Ia menunjukkan cara menyimpan, mengemas kini dan memaparkan nilai dinamik dengan mudah menggunakan cangkuk.

Petua Pro: Bagaimanakah anda menambah butang "Tetapkan Semula" untuk menetapkan kiraan kembali kepada 0? Cubalah!

---

2. Buat Borang untuk Menangkap Input Pengguna

Cabaran: Laksanakan borang dengan dua medan input—nama dan e-mel. Nilai harus dikemas kini secara dinamik semasa pengguna menaip dan apabila borang diserahkan, data yang dimasukkan akan muncul pada skrin.

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;

Mengapa Ini Penting: Mengendalikan input borang dalam React ialah kemahiran kritikal, terutamanya untuk aplikasi yang memerlukan interaksi pengguna, seperti borang log masuk atau medan carian.

Petua Pro: Bagaimanakah anda boleh mengendalikan pengesahan untuk memastikan format e-mel adalah betul sebelum membenarkan borang diserahkan?

---

3. Bina Senarai Tugasan dengan Fungsi Tambah dan Alih Keluar

Cabaran: Buat senarai tugasan di mana pengguna boleh menambah tugasan dengan menaip ke dalam medan input dan menekan "Tambah." Setiap tugasan harus mempunyai butang "Alih Keluar" untuk memadamkan tugasan.

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;

Mengapa Ini Penting: Mengurus senarai dan kemas kini keadaan ialah tugas biasa dalam aplikasi React, terutamanya untuk membina antara muka pengguna dinamik.

Petua Pro: Apa yang berlaku jika anda cuba menambah item tugasan yang kosong? Bagaimanakah anda menghalangnya?

---

4. Laksanakan Nyahlantun dalam Input Carian

Cabaran: Bina input carian yang menunggu 500ms selepas pengguna berhenti menaip sebelum melakukan carian (disimulasikan dengan mengemas kini keadaan). Gunakan useEffect untuk ini.

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;

Mengapa Ini Penting: Nyahlantun adalah penting dalam medan carian untuk mengelakkan panggilan API yang tidak perlu, meningkatkan prestasi dan pengalaman pengguna.

Petua Pro: Bagaimanakah anda boleh memperbaiki perkara ini dengan menambahkan penunjuk pemuatan semasa pengguna menaip?

---

5. Togol Antara Mesej "Hello" dan "Selamat Tinggal"

Cabaran: Buat komponen yang memaparkan "Hello" atau "Selamat tinggal" berdasarkan togol butang. Setiap kali butang diklik, mesej harus bertukar.

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;

Mengapa Ini Penting: Paparan bersyarat ialah bahagian teras kuasa React, dan cabaran ini membantu mengukuhkan cara menukar perkara yang dipaparkan berdasarkan keadaan.

Petua Pro: Bagaimanakah anda boleh mengubah suai ini supaya ia memaparkan "Hello" dalam warna biru dan "Selamat tinggal" dalam warna merah?

---

Cabaran Bonus untuk Yang Ingin Tahu:
Bagi setiap komponen ini, bagaimanakah anda memfaktorkan semula logik untuk memisahkan kebimbangan dan menjadikan kod lebih boleh digunakan semula? Pertimbangkan untuk membuat cangkuk tersuai jika sesuai!

---

Atas ialah kandungan terperinci Cabaran Pengekodan eact.js Teratas Anda Mesti Tahu untuk Temuduga !. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!