Примечание Приложение - Часть 2: Объект реагирования

PS – это было изначально опубликовано на моем блог . Проверьте это, если хотите узнать больше о React и JavaScript!

TL; DR – клон и запустить Исходный код Отказ

Во второй части этой серии мы собираемся создать сайт с реагированием на использование с нашим узел API для создания и просмотра заметок. В предыдущем пост Мы создали API для приложения.

Узел API из предыдущего пост должен быть вставать и работает
Настройте проект после моего руководство
Основное понимание Реагировать крюки

Сначала нам нужно создать реактивный проект с Bundler. Bundler, который мы собираемся использовать, это Посылка Как требуется очень мало настроек. Следуйте моим Руководство для начала.

После того, как вы закончите настройку реагирования с посылкой, мы будем нуждаться в некоторых дополнительных зависимости.

yarn add axios formik react-icons

yarn add sass -D

Axios используется для выполнения запросов на API
Formik используется для создания новых заметок проще в обращении с формы
React-Icons будет нужен значок для кнопки удаления заметки
Sass будет необходим для компиляции .scsss Файл мы будем использовать для стиля приложения

Давайте создадим экземпляр Axios. Так что нам не нужно вводить базовый URL для всех сетевых запросов. В SRC Папка создать еще одну папку Услуги И в этой папке создать API.JS Файл и добавьте следующий код.

import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:8080"
});

export default api;

Нам также нужно будет изменить шрифт и заголовок приложения. В index.html Добавьте ссылку на Рубик Файлы шрифтов и новое название. Добавьте их между и Отказ



Note App

В конце концов SRC/index.html должен выглядеть так.




  
    
    

    

    Note App

Теперь мы можем начать работать с реагированной частью.

Сначала мы должны выяснить, как мы собираемся сохранить список заметок. Мы могли бы использовать Уместите Чтобы сохранить список, но мы будем использовать Успенсер Чтобы упростить и заблокировать все разные способы обновления списка.

В SRC/App.js изменить импорт реагирования в

import React, { useReducer } from "react";

Тогда давайте объявляем начальное состояние и редуктор

const initialState = {
  notesList: []
};

const reducer = (state, action) => {
  let { notesList } = state;

  switch (action.type) {
    case "refresh":
      notesList = [...action.payload];
      break;
    case "add":
      notesList = [...notesList, action.payload];
      break;
    case "remove":
      notesList = notesList.filter(note => note._id !== action.payload._id);
      break;
  }

  return { notesList };
};

Первоначально мы собираемся удерживать пустой массив в состоянии. Редуктор будет иметь три действия, «Обновить» Чтобы получить список заметок, когда приложение нагрузки, "Добавить" Чтобы добавить новую записку в список, и "Удалить" удалить записку. В случае "Добавить" и "Удалить" Мы могли бы просто обновить весь список после их выполнения, но это было бы ненужно и отходы сетевого вызова.

Чтобы добавить состояние в Приложение

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

Далее нам нужно загрузить список заметок при нагрузках приложений. Мы можем сделать с Useffect крюк. Нам нужно импортировать Useffect и Axios. Экземпляр мы создали ранее.

import React, { useReducer, useEffect } from "react";
import api from "./services/api";

Добавьте следующий код перед вернуть в Приложение Отказ

const getAllNotes = async () => {
  try {
    const response = await api.request({ url: "/note" });

    dispatch({ type: "refresh", payload: response.data });
  } catch (error) {
    console.error("Error fetching notes", error);
  }
};

useEffect(() => {
  getAllNotes();
}, []);

Все, что мы делаем здесь, выбирает список заметок, как только компонент устанавливает и обновляет состояние, используя редуктор с «Обновить» Отказ Второй параметр [] в Useffect Предотвращает этот эффект от работы несколько раз.

Теперь, когда мы загружаем заметки, которые нам нужно отображать их. В вернуть добавьте следующее


  Notes App

  {state.notesList.map(note => (
    
      
        {note.title}
        {note.content}
      
    
  ))}

У нас нет заметок для загрузки на нагрузку в данный момент, поэтому давайте добавим нижний колонтитул на страницу, где мы можем создавать новые ноты.

Сначала нам нужно импортировать Formik который собирается сделать обработку формы гораздо проще.

import { Formik } from "formik";

Затем давайте добавим пользовательскую интернет-интерфейс и логику создать новую ноту. Добавьте это только после <Главная> тег.


   {
      let errors = {};

      if (!values.title) {
        errors.title = "Title is required";
      }

      if (!values.content) {
        errors.content = "Content is required";
      }

      return errors;
    }}
    onSubmit={async (values, { setSubmitting, resetForm }) => {
      try {
        const response = await api.request({
          url: "/note",
          method: "post",
          data: {
            title: values.title,
            content: values.content
          }
        });

        dispatch({ type: "add", payload: response.data });
        resetForm();
      } catch (error) {
        console.error("Error creating note", error);
      } finally {
        setSubmitting(false);
      }
    }}
  >
    {({
      values,
      errors,
      touched,
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting
    }) => (
      
        Title
        
        {errors.title && touched.title && errors.title}

        


        Content
        
        {errors.content && touched.content && errors.content}

        


        
      
    )}

Formik будет обрабатывать все значения в форме, включая проверку и отправку для создания примечания.

Также нам понадобится отделение от Главная и нижний колонтин Так что добавьте это между ними.

Наконец, нам нужно быть в состоянии удалить созданные заметки, поэтому мы добавим кнопку удаления к каждой примечании. Сначала нам нужно добавить функцию удаления перед вернуть Отказ

const removeNote = async id => {
  try {
    const response = await api.request({
      url: `/note/${id}`,
      method: "delete"
    });

    dispatch({ type: "remove", payload: response.data });
  } catch (error) {
    console.error("Error deleting note", error);
  }
};

Нам понадобится значок для удаления заметки, поэтому мы импортируем один из React-Icons Отказ

import { FaTrash } from "react-icons/fa";

Затем измените компонент Note.


  
    {note.title}
    {note.content}

Поскольку последняя часть приложения давайте добавим немного стиля. Создать App.scss. в SRC со следующим кодом.

body {
  font-family: "Rubik", sans-serif;
  max-width: 800px;
  margin: auto;
}

main {
  .note {
    display: flex;
    flex-direction: row;
    align-items: center;

    .container {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    button {
      font-size: 1.5em;
      border: 0;
      background: none;
      box-shadow: none;
      border-radius: 0px;
    }

    button:hover {
      color: red;
    }
  }
}

hr {
  height: 1px;
  width: 100%;
  color: grey;
  background-color: grey;
  border-color: grey;
}

footer > form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;

  input,
  button,
  textarea {
    margin: 10px 0px 10px 0px;
    font-family: "Rubik", sans-serif;
  }

  textarea {
    resize: none;
  }
}

Затем импортируйте это в App.js Отказ

import "./App.scss";

Наконец ваш App.js должен выглядеть так.

// src/App.js
import React, { useReducer, useEffect } from "react";
import api from "./services/api";
import { Formik } from "formik";
import { FaTrash } from "react-icons/fa";
import "./App.scss";

const initialState = {
  notesList: []
};

const reducer = (state, action) => {
  let { notesList } = state;

  switch (action.type) {
    case "refresh":
      notesList = [...action.payload];
      break;
    case "add":
      notesList = [...notesList, action.payload];
      break;
    case "remove":
      notesList = notesList.filter(note => note._id !== action.payload._id);
      break;
  }

  return { notesList };
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const getAllNotes = async () => {
    try {
      const response = await api.request({ url: "/note" });

      dispatch({ type: "refresh", payload: response.data });
    } catch (error) {
      console.error("Error fetching notes", error);
    }
  };

  const removeNote = async id => {
    try {
      const response = await api.request({
        url: `/note/${id}`,
        method: "delete"
      });

      dispatch({ type: "remove", payload: response.data });
    } catch (error) {
      console.error("Error deleting note", error);
    }
  };

  useEffect(() => {
    getAllNotes();
  }, []);

  return (
    
      
        Notes App

        {state.notesList.map(note => (
          
            
              {note.title}
              {note.content}
            

            
          
        ))}
      

      

      
         {
            let errors = {};

            if (!values.title) {
              errors.title = "Title is required";
            }

            if (!values.content) {
              errors.content = "Content is required";
            }

            return errors;
          }}
          onSubmit={async (values, { setSubmitting, resetForm }) => {
            try {
              const response = await api.request({
                url: "/note",
                method: "post",
                data: {
                  title: values.title,
                  content: values.content
                }
              });

              dispatch({ type: "add", payload: response.data });
              resetForm();
            } catch (error) {
              console.error("Error creating note", error);
            } finally {
              setSubmitting(false);
            }
          }}
        >
          {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit,
            isSubmitting
          }) => (
            
              Title
              
              {errors.title && touched.title && errors.title}

              


              Content
              
              {errors.content && touched.content && errors.content}

              


              
            
          )}
        
      
    
  );
};

export default App;

Давайте начнем приложение, запустив команду

yarn dev

Когда вы посетите http://localhost: 1234/ Тебе следует увидеть

После того, как вы создаете записку, это должно выглядеть так

Оригинал: “https://dev.to/akhilaariyachandra/note-app-part-2-the-react-site-29mn”

Notes App

{note.title}

{note.title}

Notes App

{note.title}

Читайте ещё по теме: