Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

React е една от най-популярните предни JavaScript библиотеки. Много компании използват React за разработване на своите потребителски интерфейси и той придоби широка популярност сред разработчиците.

Лесно е да създадете проста програма с React, като това основно приложение за брояч. Започването с директен урок ще ви помогне да разберете някои от основните, но важни концепции на React.

Характеристики на приложението Counter

В този проект вие ще разработите приложение за брояч със следните функции:

  1. Бутон за увеличаване на броя: Това ще увеличи броя с едно.
  2. Бутон за намаляване на броя: Това ще намали броя с едно.
  3. Бутон за рестартиране: Това ще настрои брояча на нула.

Основни понятия на React

Преди да продължите напред, трябва да разберете някои от тези основни концепции в React, които ще използвате в този проект:

  1. Компоненти: Компонентите са основните градивни елементи на React приложенията. Те съдържат независим, многократно използваем код. С помощта на компоненти можете да разделите потребителския интерфейс на отделни части. След това можете да използвате повторно тези части и да работите с тях независимо.
    instagram viewer
  2. състояние: В React можете да използвате обект за съхраняване на данни, представящи състоянието на компонент. Това позволява на компонентите да управляват и актуализират собствените си данни. Състоянието на даден компонент определя как той се изобразява и как се държи.
  3. Функционални компоненти: Функционалният компонент на React е просто JavaScript функция, която приема props като аргумент и връща React елемент (JSX).
  4. Реквизит: Можете да използвате props — съкратено от „свойства“ — за да предавате данни от родителски компонент към дъщерен компонент. Реквизитите са една от неразделните части на React и вие можете използвайте подпори за извършване на няколко операции в React.
  5. Кукички: React Hooks са вградени функции които ви позволяват да управлявате състояние и други функции на React като методи на жизнения цикъл във функционални компоненти. Те също могат да ви помогнат да напишете кратък и ясен код. Скоро ще видите как можете да управлявате състояние с useState() кука.

Кодът, използван в този проект, е наличен в a GitHub хранилище и е безплатен за използване под лиценза на MIT.

Стъпка 1: Настройване на проекта

Отворете своя терминал и изпълнете следната команда, за да започнете:

npx създавам-react-app react-counter-app

Това ще създайте ново приложение за реакция, готови да започнете да изграждате своя проект. Той ще генерира структура на файловата система с няколко файла и папки.

Изпълнете следната команда в терминала, за да стартирате сървъра за разработка:

npm започнете

Тази команда трябва да отвори нов раздел във вашия браузър, сочещ към http://localhost: 3000. Всички промени, които ще направите в проекта, ще бъдат автоматично актуализирани тук.

Стъпка 2: Създаване на скелета на приложението за брояч

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

импортиране Реагирайте, {useState} от"реагира";
функцияПриложение() {
конст [count, setCount] = useState(0);
позволявам incrementCount = () => {
// За добавяне по-късно
 };
позволявам decrementCount = () => {
// За добавяне по-късно
 };
позволявам resetCount = () => {
// За добавяне по-късно
 }


връщане (
<дивclassName="приложение">
<стр>Брой: {count}стр>
<дивclassName="бутони">
див>
див>
);
}
износпо подразбиране Приложение;

Първият израз импортира useState кука от реагират модул. Използвайте го, за да създадете броя състояние и го инициализирайте на 0. Можете да промените стойността на броя използвайки setCount функция.

Ще използвате incrementCount, decrementCount, и resetCount функции по-късно за увеличаване, намаляване и нулиране на стойността на брояча.

Може да забележите фигурните скоби { }, използвани около променливата count в маркирането. Това по същество позволява на анализатора на JSX да знае, че трябва да третира съдържанието в тези скоби като JavaScript.

Стъпка 3: Добавяне на функционалността към приложението за брояч

Трябва да създадете три бутона, за да приложите функционалността на приложението за брояч: бутон за намаляване на броя, бутон за увеличаване на броя и бутон за нулиране. Добавете следния код вътре в бутони div:

<Бутонзаглавие={"Намаляване"} действие={decrementCount} />
<Бутонзаглавие={"Увеличаване"} действие={incrementCount} />
<Бутонзаглавие={"Нулиране"} действие={resetCount} />

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

Актуализирайте тези функции в App.js файл със следния код:

позволявам incrementCount = () => {
 setCount (брой + 1);
};
позволявам decrementCount = () => {
 setCount (брой - 1);
};
позволявам resetCount = () => {
 setCount (0);
}

The setCount функцията ще актуализира състоянието на броя.

Имайте предвид, че все още не сте създали компонента Button. Създайте нов компоненти папка в src директория и след това създайте нов файл с име Button.js. Добра практика е да съхранявате всички компоненти в една и съща папка.

Добавете следния код в компоненти/Button.js файл:

импортиране Реагирайте от"реагира";
функцияБутон(реквизит) {
позволявам { действие, заглавие } = подпорки;
връщане<бутонonClick={действие}>{заглавие}бутон>;
}
износпо подразбиране бутон;

The Бутон компонент получава данни чрез props. След това функцията dструктурира тези подпори в отделни променливи, като ги използва за попълване на маркировката, която връща.

Кодът използва повторно този компонент три пъти, за да създаде бутоните за увеличаване, намаляване и нулиране.

Накрая импортирайте компонента Button в горната част на App.js страница с помощта на следния код:

импортиране Бутон от"./components/Botton";

Ето как ще изглежда крайният код в App.js файл:

импортиране Реагирайте, {useState} от"реагира";
импортиране Бутон от"./components/Button";
функцияПриложение() {
конст [count, setCount] = useState(0);


позволявам incrementCount = () => {
 setCount (брой + 1);
 };


позволявам decrementCount = () => {
 setCount (брой - 1);
 };


позволявам resetCount = () => {
 setCount (0);
 }


връщане (
<дивclassName="приложение">
<стр>Брой: {count}стр>
<дивclassName="бутони">
<Бутонзаглавие={"Намаляване"} действие={decrementCount} />
<Бутонзаглавие={"Увеличаване"} действие={incrementCount} />
<Бутонзаглавие={"Нулиране"} действие={resetCount} />
див>
див>
 );
}
износпо подразбиране Приложение;

Следвайте най-добрите практики на React

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

Можете да следвате няколко практики на React, препоръчани от общността на React, като избягване на повтарящ се код, писане на тестове за всеки компонент на React, използване на деструктуриране на обекти за подпори и последващо именуване конвенции.