React KEYS izmantošana ar LIST komponentiem

Šajā rakstā sniegšu uzskatāmu piemēru ar React Keys izmantošanu praksē. Esmu izveidojis mazu un visnotaļ elementāru aplikāciju, kura renderē vienkāršu “To Do” veicamo darbu sarakstu ar divām pozīcijām. Šajā sarakstā iespējams pievienot veicamo darbu un tam pievienota arī poga ar pārkārtošanas iespēju “Pārkārtot”

1. Mēs importējam nepieciešamās bibliotēkas un failus: index.css failu ar stilu definīcijām un useState funkciju no react bibliotēkas.
2. Mēs definējam ToDo komponentu, kas atbild par viena uzdevuma attēlošanu. Tas saņem props ar uzdevuma informāciju un atgriež <tr> elementu ar trīs <td> elementiem – vienu ar uzdevuma ID, otru ar ievades lauku un trešo ar uzdevuma izveidošanas laiku.
3. Mēs definējam App komponentu, kas ir galvenais komponents mūsu lietotnē. Tas satur lietotnes stāvokli un loģiku.
4. Mēs izmantojam useState funkciju, lai definētu todos mainīgo un setTodos funkciju. todos satur sarakstu ar uzdevumiem un setTodos ļauj mums atjaunināt šo sarakstu.
5. Mēs definējam reverseOrder funkciju, kas tiek izsaukta, kad lietotājs noklikšķina uz “Pārkārtot” pogas. Šī funkcija pārkārto uzdevumu sarakstu apgrieztā secībā un atjaunina stāvokli ar jauno sarakstu.
6. Mūsu App komponents atgriež JSX elementu ar pogu un tabulu. Poga izsauc reverseOrder funkciju, kad lietotājs to noklikšķina. Tabula attēlo katru uzdevumu no todos saraksta, izmantojot map metodi un iepriekš definēto ToDo komponentu.
7. Beidzot mēs eksportējam mūsu App komponentu kā noklusējuma aplikācijas komponentu.

Pilns aplikācijas kods ar iekļautiem komentāriem:

// Mēs importējam nepieciešamās bibliotēkas un failus: App.css failu ar stilu definīcijām un useState funkciju no react bibliotēkas.
import "./App.css";
import { useState } from "react";


// Mēs definējam ToDo komponentu, kas atbild par viena uzdevuma attēlošanu. Tas saņem props ar uzdevuma informāciju un atgriež <tr> elementu ar trīs <td> elementiem - vienu ar uzdevuma ID, otru ar ievades lauku un trešo ar uzdevuma izveidošanas laiku.
const ToDo = (props) => (
  <tr>
    <td>
      <label>{props.id}</label>
    </td>
    <td>
      <input />
    </td>
    <td>
      <label>{props.createdAt}</label>
    </td>
  </tr>
);


// Mēs definējam App komponentu, kas ir galvenais komponents mūsu lietotnē. Tas satur lietotnes stāvokli un loģiku.
function App() {
  // Mēs izmantojam useState funkciju, lai definētu todos mainīgo un setTodos funkciju. todos satur sarakstu ar uzdevumiem un setTodos ļauj mums atjaunināt šo sarakstu.
  const [todos, setTodos] = useState([
    {
      id: "todo1",
      createdAt: "18:00",
    },
    {
      id: "todo2",
      createdAt: "20:30",
    },
  ]);


  // Mēs definējam reverseOrder funkciju, kas tiek izsaukta, kad lietotājs noklikšķina uz “Pārkārtot” pogas. Šī funkcija pārkārto uzdevumu sarakstu apgrieztā secībā un atjaunina stāvokli ar jauno sarakstu.
  const reverseOrder = () => {
    // Reverse ir mutējošā operācija, tāpēc mums vajag izveidot jaunu arry vispirms
    const newTodos = [...todos].reverse();
    setTodos(newTodos);
  };


  // Mūsu App komponents atgriež JSX elementu ar pogu un tabulu. Poga izsauc reverseOrder funkciju, kad lietotājs to noklikšķina. Tabula attēlo katru uzdevumu no todos saraksta, izmantojot map metodi un iepriekš definēto ToDo komponentu.
  return (
    <div>
      <button onClick={reverseOrder}>Pārkārtot</button>
      <table>
        <tbody>
          {todos.map((todo, index) => (
            <ToDo key={index} {...todo} />
          ))}
        </tbody>
      </table>
    </div>
  );
}


// Beidzot mēs eksportējam mūsu App komponentu kā noklusējuma eksportu no šī faila.
export default App;

Šai aplikācijai, lai tā izskatītos nedaudz glītāk esmu pievienojis arī CSS kodu, kurš taja importēts no App.css faila:

body {
  font-family: Arial, sans-serif;
}


button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}


table {
  border-collapse: collapse;
}


td,
th {
  border: 1px solid #ddd;
  padding: 8px;
}


tr:nth-child(even) {
  background-color: #f2f2f2;
}


tr:hover {
  background-color: #ddd;
}


th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
}

Vienkāršas ToDo aplikācijas galarezultāts

Šeit būs vēl viens, nedaudz savādāks šīs pašas aplikācijas variants, kas piedāvā pabeigtos uzdevumus atzīmēt ar klikšķi nosvītrojot uzdevuma izpildes laiku:

Aplikācijas App.js kods:

import "./App.css";
import { useState } from "react";


const ToDo = (props) => {
  const [completed, setCompleted] = useState(false);
  const [important, setImportant] = useState(false);


  return (
    <tr>
      <td>
        <label>{props.id}</label>
      </td>
      <td>
        <input
          type="checkbox"
          onChange={() => setCompleted(!completed)}
        />
      </td>
      <td onClick={() => setImportant(!important)}>
        {important ? "⭐️" : ""}
      </td>
      <td className={completed ? "completed" : ""}>
        <label>{props.createdAt}</label>
      </td>
    </tr>
  );
};


function App() {
  const [todos, setTodos] = useState([
    {
      id: "todo1",
      createdAt: "18:00",
    },
    {
      id: "todo2",
      createdAt: "20:30",
    },
  ]);


  const reverseOrder = () => {
    const newTodos = [...todos].reverse();
    setTodos(newTodos);
  };


  return (
    <div>
      <button onClick={reverseOrder}>Pārkārtot</button>
      <table>
        <tbody>
          {todos.map((todo, index) => (
            <ToDo key={index} {...todo} />
          ))}
        </tbody>
      </table>
    </div>
  );
}


export default App;

CSS stilu šai aplikācijas versijai var izmantot iepriekšējo, vien pievienojot “completed” pārsvītrojuma parametru:

App.css kods:

body {
  font-family: Arial, sans-serif;
}


button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}


table {
  border-collapse: collapse;
}


td,
th {
  border: 1px solid #ddd;
  padding: 8px;
}


tr:nth-child(even) {
  background-color: #f2f2f2;
}


tr:hover {
  background-color: #ddd;
}


th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
}


.completed {
  text-decoration: line-through;
}

Protams, šie ir tikai aplikāciju paraugi izpratnei un darbības skaidrojumam, strādājoši bet pagaidām bez funkcionāla pielietojuma. Protams šo kodu droši var izmantot kā pamatu funkcionālas un izmantojamas aplikācijas izveidošanai, vai kā labu komponentu piešķirot tam papildus funkcijas un nepieciešamo dizainu.

Turpinājumā piedāvāju vēl vienu šīs aplikācijas uzlabotu versiju ar papildinātām iespējām un nedaudz vairāk praktisku funkcionalitāti.

https://github.com/QvarcY/React-ToDo-App.git

Aplikāciju var iegūt un lejupielādēt no mana GIT repozitorija: https://github.com/QvarcY/React-ToDo-App.git augšupielādēju to repozitorijā, jo ir doma to arī kādreiz papildināt un varbūt pat izstrādāt līdz galam mācību procesā. Ja vēlies piedalīties, tad droši izmanto GIT sniegtās iespējas un papildini kodu kopā ar mani.

• Pašlaik pēdējais atjauninājums aplikācijai: V3 update – 23.03.2023 – 23:23

Nedaudz pielabots dizains, pievienotas iespējas labot un saglabāt uzdevumu – pievienota arī angļu valoda, lai vieglāk uztvert domu GitHub apmeklētājiem…tagad redzama arī zvaigznīte… vēl jāstrādā pie “finished” attēlošanas un checkbox varētu piešķirt kādu spēju izpildītos uzdevumus deaktivizēt, vai aizkrāsot – bet pašlaik es pats tam nevēlos laiku tērēt – šis raksts laikam sevī ir iesūcis par daudz mana laika 🙂 Droši veicat savas izmaiņas GitHub, taisat fork un commitojat ar mani ja vēlaties 😉