Senarai tugasan dalam react js

Ikuti saya di LinkedIn
Ikuti saya di Github.com

Klik & Baca

Apl Todo List yang ringkas ini merupakan titik permulaan yang bagus untuk pemula membiasakan diri dengan asas React, termasuk pengurusan negeri, pengendalian acara dan senarai rendering.

Panduan Langkah demi Langkah untuk Mencipta Apl Senarai Todo dalam React

Langkah 1: Sediakan Persekitaran React Anda

Sebelum anda bermula, pastikan anda memasang Node.js dan npm (atau yarn) pada mesin anda. Anda boleh membuat projek React baharu menggunakan Apl Buat React.

Buka terminal atau command prompt anda dan jalankan arahan berikut untuk mencipta projek React baharu:

npx create-react-app todo-list

Navigasi ke direktori projek:

cd todo-list

Langkah 2: Ubah suai src/App.js

Ganti kandungan src/App.js dengan kod berikut:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleAddTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { text: input, completed: false }]);
      setInput('');
    }
  };

  const handleToggleComplete = (index) => {
    const newTodos = todos.map((todo, i) => {
      if (i === index) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    });
    setTodos(newTodos);
  };

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

  return (
    <div className="App">
      <header className="App-header">
        <h1>Todo List</h1>
        <div>
          <input
            type="text"
            value={input}
            onChange={handleInputChange}
            placeholder="Add a new todo"
          />
          <button onClick={handleAddTodo}>Add</button>
        </div>
        <ul>
          {todos.map((todo, index) => (
            <li key={index}>
              <span
                style={{
                  textDecoration: todo.completed ? 'line-through' : 'none',
                }}
                onClick={() => handleToggleComplete(index)}
              >
                {todo.text}
              </span>
              <button onClick={() => handleDeleteTodo(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </header>
    </div>
  );
}

export default App;

Langkah 3: Tambah Beberapa Penggayaan Asas

Ubah suai fail src/App.css untuk menambah beberapa gaya asas:

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

input {
  padding: 10px;
  margin-right: 10px;
  font-size: 16px;
}

button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin: 10px 0;
  background-color: #444;
  border-radius: 5px;
}

li span {
  cursor: pointer;
}

Langkah 4: Jalankan Apl

Kini, anda boleh menjalankan apl Todo List anda dengan arahan berikut:

npm start

Arahan ini memulakan pelayan pembangunan dan membuka aplikasi React baharu anda dalam pelayar web lalai anda.

Selamat Pengekodan !

Atas ialah kandungan terperinci Senarai tugasan dalam react js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!