Bygg en Enkel Todo-Applikasjon med React

I denne veiledningen skal vi bygge en enkel todo-applikasjon med React. Vi vil gå gjennom de grunnleggende konseptene i React, inkludert komponenter, state, og props. Dette er en flott måte å lære React på hvis du er nybegynner, eller for å friske opp ferdighetene dine.

Steg 1: Opprett et nytt React-prosjekt

Først må vi opprette et nytt React-prosjekt ved hjelp av Create React App:

npx create-react-app todo-app
cd todo-app
npm start

Dette vil opprette et nytt React-prosjekt og starte en utviklingsserver på http://localhost:3000.

Steg 2: Lag Todo-komponenten

Opprett en ny fil kalt Todo.js i src-mappen og legg til følgende kode:

// src/Todo.js
import React, { useState } from 'react';

function Todo({ todo, index, completeTodo, removeTodo }) {
  return (
    <div
      style={{ textDecoration: todo.isCompleted ? 'line-through' : '' }}
      className="todo"
    >
      {todo.text}
      <div>
        <button onClick={() => completeTodo(index)}>Complete</button>
        <button onClick={() => removeTodo(index)}>Delete</button>
      </div>
    </div>
  );
}

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </form>
  );
}

export default function App() {
  const [todos, setTodos] = useState([
    {
      text: 'Learn about React',
      isCompleted: false,
    },
    {
      text: 'Meet friend for lunch',
      isCompleted: false,
    },
    {
      text: 'Build really cool todo app',
      isCompleted: false,
    },
  ]);

  const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  };

  const completeTodo = index => {
    const newTodos = [...todos];
    newTodos[index].isCompleted = true;
    setTodos(newTodos);
  };

  const removeTodo = index => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <Todo
            key={index}
            index={index}
            todo={todo}
            completeTodo={completeTodo}
            removeTodo={removeTodo}
          />
        ))}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}

Steg 3: Legg til CSS for Todo-applikasjonen

Opprett en ny fil kalt App.css i src-mappen og legg til følgende CSS for å style todo-applikasjonen:

/* src/App.css */
.app {
  text-align: center;
}

.todo-list {
  max-width: 300px;
  margin: 0 auto;
}

.todo {
  background: #eee;
  margin: 10px;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo button {
  margin-left: 5px;
}

.input {
  padding: 10px;
  margin: 20px 0;
  border: none;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

Steg 4: Importer CSS i index.js

Sørg for å importere CSS-filen i index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './App.css';
import App from './Todo';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Steg 5: Kjør applikasjonen

Nå kan du kjøre applikasjonen ved å kjøre følgende kommando:

npm start

Dette vil starte utviklingsserveren og åpne nettleseren din på http://localhost:3000, hvor du vil se todo-applikasjonen i aksjon.

Konklusjon

Vi har nå bygget en enkel todo-applikasjon med React. Denne applikasjonen dekker grunnleggende konsepter som komponenter, state, og props, og gir en god introduksjon til React for nybegynnere. Prøv å legge til flere funksjoner, som redigering av todoer eller lagring av todoer i lokal lagring, for å forbedre ferdighetene dine ytterligere.