Практикувайте своите React умения с това класическо, лесно за разбиране примерно приложение.

Изучаването на нова технология като React може да бъде объркващо без практически опит. Като разработчик, изграждането на проекти от реалния свят е един от най-ефективните начини за разбиране на концепции и функции.

Следвайте процеса на създаване на прост списък със задачи с React и подобрете разбирането си за основите на React.

Предпоставки за създаване на списък със задачи

Преди да започнете този проект, има няколко изисквания. Трябва да имате основни познания по следното, HTML, CSS, JavaScript, ES6и React. Трябва да имате Node.js и npm, мениджърът на пакети на JavaScript. Имате нужда и от редактор на код, като Visual Studio Code.

Ето CSS, който ще използва този проект:

/* styles.css */
.App {
шрифтово семейство: безсерифен;
дисплей: flex;
justify-content: център;
подравняване на елементи: център;
височина: 100vh;
}
.Да направя {
Цвят на фона: пшеница;
подравняване на текст: център;
ширина: 50%;
подплата: 20px;
кутия-сянка: rgba(0, 0, 0, 0.24) 0px 3px 8px;
марж: Автоматичен;
}







instagram viewer



ул {
списък-стил-тип: нито един;
подплата: 10px;
марж: 0;
}


бутон {
ширина: 70px;
височина: 35px;
Цвят на фона: пясъчнокафяво;
граница: нито един;
размер на шрифта: 15px;
тегло на шрифта: 800;
граница-радиус: 4px;
кутия-сянка: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.вход {
граница: нито един;
ширина: 340px;
височина: 35px;
граница-радиус: 9px;
подравняване на текст: център;
кутия-сянка: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.Връх {
дисплей: flex;
justify-content: център;
празнина: 12px;
}


ли {
дисплей: flex;
justify-content: пространство-равномерно;
подравняване на елементи: център;
подплата: 10px;
}
ли:преди {
съдържание: "*";
margin-right: 5px;
}

1. Настройте среда на проекта

Този етап включва всички команди и файлове, необходими за настройка на проекта. За да започнете, създайте нов React проект. Отворете терминал и изпълнете тази команда:

npx create-react-app списък със задачи

Това отнема няколко минути, за да инсталирате всички необходими файлове и пакети. Той създава ново React приложение, наречено todo-list. След като видите нещо подобно, вие сте на прав път:

Придвижете се до директорията на вашия новосъздаден проект, като използвате тази команда:

cd списък със задачи

Стартирайте проекта си локално с тази команда:

npm стартиране

И след това прегледайте проекта във вашия браузър на адрес http://localhost: 3000/.

В папката src на вашия проект има няколко файла, които не ви трябват. Изтрийте тези файлове: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Уверете се, че търсите инструкции за импортиране в наличните файлове и премахнете всички препратки към изтритите файлове.

2. Създайте компонент TodoList

Това е компонентът, който ще внедрим всички кодове, необходими за списъка със задачи. Създайте файл с име „TodoList.js“ във вашата папка src. След това, за да проверите дали всичко работи както трябва, добавете следния код:

импортиране Реагирайте от"реагира";
конст TodoList = () => {
връщане (




Здравей свят </h2>
 </div>
 );
};


износпо подразбиране TodoList;

Отворете своя файл App.js, импортирайте компонента TodoList и го изобразете вътре в компонента App. Ще изглежда нещо подобно:

импортиране Реагирайте от"реагира";
импортиране'./styles.css'
импортиране TodoList от'./TodoList';
конст Приложение = () => {
връщане (





 </div>
 );
};
износпо подразбиране Приложение;

Отидете до вашия локален браузър, който има работещ localhost: 3000 и проверете дали виждате „Hello World“ изписано смело. Всичко е наред? Към следващата стъпка.

3. Управление на въвеждане и промяна на входа

Тази стъпка ви позволява да задействате събитие, когато въведете задача в полето за въвеждане. Импортирайте куката useState от вашия React пакет. useState е кука на React, която ви позволява да управлявате състоянието ефективно.

импортиране Реагирайте, {useState} от"реагира";

Използвайте куката useState, за да създадете променлива на състоянието с име „inputTask“ с начална стойност на празен низ. В допълнение, задайте функцията „setInputTask“, за да актуализирате стойността на „inputTask“ въз основа на въвеждане от потребителя.

конст [inputTask, setInputTask] = useState("");

Създайте функция, наречена „handleInputChange“, като вземете параметър за събитие. Трябва да актуализира състоянието на inputTask с помощта на функцията setInputTask. Достъп до стойността на целта на събитието с event.target.value. Това ще се изпълнява всеки път, когато стойността на полето за въвеждане се промени.

конст handleInputChange = (събитие) => {
 setInputTask (event.target.value);
};

Върнете няколко JSX елемента. Първото е заглавието, което гласи „Моят списък със задачи“, можете да изберете каквото заглавие искате. Включете няколко атрибута към вашите входни елементи. тип=“текст”: Това определя вашия тип въвеждане като текст, стойност={inputTask}: Това свързва стойността на полето за въвеждане към променливата на състоянието inputTask, като гарантира, че тя отразява текущата стойност.onChange={handleInputChange}: Това извиква функцията handleInputChange, когато стойността на полето за въвеждане се промени, актуализирайки състоянието на inputTask.

"Да направя">
Моят списък със задачи</h1>
"Връх">
"вход" тип="текст" стойност={inputTask}
 onChange={handleInputChange} placeholder=„Въведете задача“ />

Продължавайки, създайте бутон, който ще добави въведената задача към списъка.

На този етап ето как ще изглежда резултатът от вашия браузър.

4. Добавете функционалност към бутона „ДОБАВИ“.

Използвай useState кука за създаване на променлива на състоянието с име „списък“ с начална стойност на празен масив. Променливата „setList“ съхранява масива от задачи въз основа на въвеждане от потребителя.

конст [списък, setList] = useState([]);

Създайте функция handleAddTodo, която ще се изпълнява, когато потребителят щракне върху бутона „ДОБАВИ“, за да добави нова задача. Той приема параметъра todo, който представлява новата задача, въведена от потребителя. След това създайте обект newTask с уникален идентификатор, генериран с помощта на Math.random(), и свойството todo, което съдържа входния текст.

Продължавайки, актуализирайте състоянието на списъка, като използвате оператора за разпространение […списък], за да създадете нов масив със съществуващите задачи в списъка. Добавете новата задача в края на масива. Това гарантира, че няма да променим оригиналния масив от състояния. Накрая, нулирайте състоянието на inputTask до празен низ, изчиствайки полето за въвеждане, когато потребителят щракне върху бутона.

конст handleAddTodo = (да направя) => {
конст нова задача = {
 документ за самоличност: математика.random(),
 задача: задача
 };
 setList([...списък, новазадача]);
 setInputTask('');
};

Включете onClick атрибут към елемента бутон с текст "ДОБАВИ". При щракване се задейства handleAddTodo функция, която добавя нова задача към състоянието на списъка

На този етап изходът от вашия браузър ще изглежда по същия начин, но ако щракнете върху бутона „ДОБАВИ“ след въвеждане на задача, полето за въвеждане ще се изпразни. Ако това работи добре, преминете към следващата стъпка.

5. Добавяне на бутон за изтриване

Това е последната стъпка, която позволява на потребителите да изтрият задачата си, ако са направили грешка или са я изпълнили. Създайте функция handleDeleteTodo, която действа като манипулатор на събития, когато потребителят щракне върху бутона „Изтриване“ за конкретна задача. Той приема идентификатора на задачата като параметър.

Вътре във функцията използвайте филтърния метод в масива от списъци, за да създадете нов масив newList, който изключва задачата със съвпадащия идентификатор. Методът на филтъра преминава през всеки елемент в масива от списък и връща нов масив, съдържащ само елементите, които отговарят на даденото условие. В този случай проверете дали идентификаторът на всяка задача е равен на идентификатора, предаден като параметър. Актуализирайте състоянието на списъка, като извикате setList (newList), което задава състоянието на новия филтриран масив, ефективно премахвайки задачата със съвпадащия идентификатор от списъка.

конст handleDeleteTodo = (документ за самоличност) => {
конст newList = list.filter((да направя) =>
 todo.id !== id
 );
 setList (нов списък); 
};

Използвайте метода map, за да преминете през всеки елемент в масива от списък и да върнете нов масив. След това създайте

  • елемент за представяне на задача за всеки обект със задачи в масива от списък. Уверете се, че сте добавили атрибута key, когато изобразявате списък с елементи в React. Той помага на React да идентифицира уникално всеки елемент от списъка и ефективно да актуализира потребителския интерфейс, когато се промени. В този случай задайте ключа на id на всеки обект със задачи, за да осигурите уникалност.

    • Достъп до свойството todo на всеки обект todo. накрая създайте бутон, който при натискане задейства функцията handleDeleteTodo с идентификатора на съответната задача като параметър, което ни позволява да изтрием задачата от списъка.

    <ул>
    { list.map((да направя) => (
    <лиclassName="задача"ключ={todo.id}>
     {todo.todo}
    <бутонonClick={() => handleDeleteTodo (todo.id)}>Изтриванебутон>
    ли>
    ))}
    ул>

    Ето как трябва да изглежда вашият окончателен код:

    импортиране Реагирайте, {useState} от"реагира";
    конст TodoList = () => {
    конст [inputTask, setInputTask] = useState('');
    конст [списък, setList] = useState([]);
    

    конст handleAddTodo = () => {
    конст нова задача = {
     документ за самоличност: математика.random(),
     todo: inputTask
     };
    

     setList([...списък, нова задача]);
     setInputTask('');
     };
    

    конст handleDeleteTodo = (документ за самоличност) => {
    конст newList = list.filter((да направя) => todo.id !== id);
     setList (нов списък);
     };
    

    конст handleInputChange = (събитие) => {
    setInputTask(събитие.мишена.стойност);
     };
    

    връщане (
    <дивclassName="Да направя">
    

    моят до-Направисписък

    

    <дивclassName="Връх">
    <входclassName="вход"Тип="текст"стойност={inputTask}
     onChange={handleInputChange} placeholder=„Въведете задача“ />
    

    <бутонclassName="btn"onClick={handleAddTodo}>ДОБАВЯНЕбутон>
    див>
    

    <ул>
     { list.map((да направя) => (
    <лиclassName="задача"ключ={todo.id}>
     {todo.todo}
    <бутонonClick={() => handleDeleteTodo (todo.id)}>
    Изтрий
    бутон>
    ли>
     ))}
    ул>
    див>
     );
    };
    износпо подразбиране TodoList;

    Ето как ще бъде окончателният ви резултат, като бутоните за добавяне и изтриване функционират според очакванията.

    Поздравления, създадохте списък със задачи, който добавя и изтрива задачи. Можете да отидете по-далеч, като добавите стил и повече функционалности.

    Използвайте проекти от реалния свят, за да се научите да реагирате

    Практиката може да бъде ефективен начин за учене. Позволява ви да прилагате концепции и най-добри практики на React по практически начин, засилвайки вашето разбиране на рамката. Има много проекти, трябва да намерите правилните.