Привет! Я в миссии сделать 100 проектов React.js. Пожалуйста, следуйте за моим профилем Dev.to или мой твиттер Для обновлений и не стесняйтесь обращаться, если у вас есть вопросы. Спасибо за вашу поддержку!
Ссылка на сегодняшнее развернутое приложение: Ссылка Ссылка на репо: гадость
День 80 был забавным маленьким проектом, который я получил от FreeCodecamp видео Там, где Джон Смилга из кодирующего наркомана YouTube Channel допускает 15 коротких реагирования и трансляции, как оно построено.
Я думаю, что если бы произошел смертельный факт о том, как прошел мои 100 дней проектов (вероятно, ближе к 200-днему на данный момент) заключается в том, что беседы неадгированные кодирование требует большинства времени, особенно, конечно, CSS, но если вы Поделитесь уродливыми проектами, люди не хотят смотреть на это. Таким образом, хорошая вещь о руководствах John’s Tutorials состоит в том, что стартерские файлы поставляются с написанными CSS, поэтому вы просто можете сосредоточиться на реагированных проектах. Я настоятельно рекомендую дать своим видео часы.
Этот учебник подчеркнул силу Уместите Крюк которого я использовал довольно долго, но иногда легко забыть, насколько это эффективно с таким небольшим количеством кода. В предыдущем проекте мне пришлось вернуться к компонентам классов и добавление состояния в конструкторе, и все упражнения просто чувствовали жестоко неуклюже. Крючки – это боканье.
Наша простая App.js Файл просто приносит данные из локального файла JSON, который имеет информацию о составленных людях и их дни рождения, а затем итерации по массиву:
import React, { useState } from 'react';
import data from './data';
import List from './List';
function App() {
const [people, setPeople] = useState(data)
return (
{people.length} birthdays today
)
}
export default App;
Как видите, большая часть тяжелой подъема с точки зрения пользовательского интерфейса происходит в Список Компонент, который мы строим в другом месте, но данные манипулируют все здесь, и мы просто передаем данные до Список через реквизит.
В Список Компонент, мы создаем и экспортируем простой список, который итерации с помощью данных людей, пройденных через реквизиты:
const List = ({people}) => {
return (
<>
{people.map((person) => {
const {id,name,age,image} = person;
return
{name}
{age} years
})}
);
};
Это была простая демонстрация силы Уместите Крючок в реакции и насколько легко он также для манипулирования состоянием с функцией настройки для этого крюка (выполнена в компоненте кнопки onClick). Вы можете представить, что это будет отличный инструмент, если подключен к реальной базе данных.
Если вам нравятся такие проекты, и хотите оставаться в курсе большего количества, проверьте мой твиттер @ jwhubert91. , Я следую назад! Увидимся завтра для другого проекта.
Оригинал: “https://dev.to/jwhubert91/project-80-of-100-birthday-reminders-application-in-react-4be6”