Введение:

Добро пожаловать в первую статью из этой серии о создании приложений с помощью React. Цель состоит в том, чтобы провести вас через процесс создания небольших приложений, уделяя особое внимание основным концепциям разработки React. Независимо от того, являетесь ли вы опытным разработчиком, стремящимся укрепить свои навыки, или новичком, стремящимся учиться, эта серия предоставит вам прочную основу для создания приложений.

Предпосылки:

Вы должны иметь базовые знания HTML, CSS, JavaScript и React. В этих проектах я буду использовать TypeScript, но, пожалуйста, не стесняйтесь использовать TypeScript или JavaScript, в зависимости от ваших предпочтений. Если вы еще не знакомы с TypeScript, вы все равно сможете понять почти все из этой серии.

Начиная:

В репозиторий GitHub я включил начальный код как для TypeScript, так и для JavaScript. чтобы начать работу над любым из этих проектов, просто клонируйте репозиторий и откройте один из каталогов начального кода в вашей среде IDE.

Стартовый код — TypeScript

Стартовый код — JavaScript

В интегрированном терминале выполните следующие команды:

установить npm

npm run dev

Откройте приложение в браузере по адресу http://localhost:5173/.

Это пустой шаблон, созданный с помощью Vite, с которого мы можем начать.

Проект 1. Приложение Counter

Мы начнем, пожалуй, с самого известного и традиционного примера React-приложения для начинающих — приложения Counter.

Цель:

  • Создайте приложение, которое отображает значение счетчика, начиная с 0.
  • Под счетчиком должны быть две кнопки, одна со знаком минус и одна со знаком плюс.
  • При каждом нажатии кнопки «плюс» счетчик должен увеличиваться на единицу.
  • При каждом нажатии кнопки «минус» счетчик должен уменьшаться на единицу. Однако, если счетчик в настоящее время равен нулю, он не будет уменьшаться.

Видео демо

Примечание:

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

Решение:

Давайте начнем с размещения элементов на странице, чтобы определить структуру приложения. В файл App.tsx добавьте следующий JSX.

Во-первых, я поместил заголовок и подзаголовок в тег заголовка. Ниже, в основном теге, я включил h2 для представления значения счетчика. Я включил div с двумя кнопками. Это дает нам базовую структуру без какой-либо функциональности или стиля.

Затем давайте импортируем хук useState и создадим переменную count, чтобы мы могли сделать значение динамическим.

Замените жестко запрограммированное значение в h2 значением динамического счетчика.

Теперь давайте объявим функции увеличения и уменьшения, чтобы мы могли добавить функциональность кнопкам.

На этом этапе у вас должен быть работающий счетчик! Нажмите на кнопки увеличения и уменьшения, чтобы убедиться, что они работают правильно.

Наконец, мы добавим к элементам несколько имен классов, чтобы мы могли стилизовать приложение с помощью базового CSS.

Вот как я стилизовал свой, но не стесняйтесь добавлять свои собственные.

https://github.com/patricksperanza/react-fundamentals/blob/main/counter/src/index.css

Заключение:

Поздравляю с завершением первого проекта из этой серии. В следующих статьях мы рассмотрим более сложные концепции и постепенно создадим более сложные приложения. Оставайтесь с нами для следующего выпуска серии.

Мой Исходный код