Какво е React? Ръководство на прост език за непрограмисти

React е JavaScript библиотека за създаване на потребителски интерфейси — частта от приложението, която хората виждат и на която кликат. Строиш екраните от многократно използваеми части, наречени компоненти, например бутон, карта на продукт или цяла страница, а React държи екрана синхронизиран с данните ти: когато данните се променят, React обновява частите на страницата, които зависят от тях. Създаден е във Facebook (сега Meta), е с отворен код и е един от най-широко използваните начини за създаване на уеб приложения.

Защо има значение, когато строиш с AI

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

Не е нужно да пишеш React, за да строиш с AI. Но да знаеш малко помага, защото:

• Можеш да описваш промените точно. „Направи компонента ProductCard така, че цената да е получер“ е по-ясно от „направи цените да изпъкват някъде“.
• Разбираш грешките. Съобщения като „Cannot read properties of undefined“ или „Too many re-renders“ стават по-смислени.
• Взимаш разумни решения. Обикновените React приложения се рендират в браузъра, което влияе на видимостта в търсачките и на скоростта на първоначалното зареждане. Това помага да решиш кога да поискаш друга настройка.
• По-късно работиш с разработчици. React е често срещан умение, така че разработчик обикновено може бързо да поеме React кодова база.

Ежедневна аналогия

Помисли за LEGO. Вместо да издълбаеш цял модел от един блок, го строиш от стандартни елементи. Няколко елемента правят колело; четири колела и други части правят кола. Ако искаш всички колички да имат червени колела, променяш дизайна на колелото веднъж.

React компонентите са тези елементи. Компонентът Button се използва вътре в ProductCard, който се използва в ProductGrid, който е част от ShopPage. Промениш ли Button веднъж, всеки бутон в приложението се променя.

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

Основните идеи

Компоненти

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

JSX

Компонентите обикновено се пишат в JSX, който изглежда като HTML, смесен с JavaScript:

function Greeting() {
  return <h1>Добре дошъл отново!</h1>;
}

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

Props

Props са входовете, които подаваш на компонент, като настройки на многократно използваема част:

<ProductCard name="Лавандулова свещ" price={24} />

Същият ProductCard може да показва всеки продукт.

State

State е информация, която компонентът помни и която може да се промени, докато приложението работи — дали менюто е отворено, какво е написано в полето за търсене, колко артикула има в количката. Когато state се промени, React рендира компонента отново, така че екранът да съвпада.

Hooks

Hooks са функции, чиито имена започват с use, например useState (запомня стойност) и useEffect (изпълнява код след рендиране, например за зареждане на данни). Ще ги видиш навсякъде в AI генериран React код.

Работен пример: брояч на количка

Да кажем, че онлайн магазинът ти има бутон „Добави в количката“ и икона на количка, която показва броя артикули. В React изглежда приблизително така:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Лавандулова свещ"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Количка ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Добави в количката</button>
    </div>
  );
}

Какво се случва, когато купувач кликне „Добави в количката“:

1. Бутонът извиква onClick, който извиква onAdd, който извиква setCartCount.
2. React обновява state cartCount от 0 на 1.
3. React рендира Shop отново и подава count={1} към CartIcon.
4. Страницата вече показва „Количка (1)“. Никой не е написал код „намери текста на количката и го промени“ — екранът следва данните.

Забележи и ограниченията. Този брояч живее в паметта на браузъра. Презаредиш ли страницата, той отново е 0. За да запазиш количката, трябва да я съхраниш някъде трайно — в бисквитка, в браузърното хранилище или в база данни през бекенда. React управлява екрана; той не съхранява данните ти.

Къде се вписва React в уеб приложението

Приложение „Vite + React“ се рендира в браузъра (единична страница, SPA). Приложение на Next.js може първо да рендира страниците на сървъра, което помага на търсачките и на скоростта на първото зареждане.

Често срещани термини, обяснени

Чести грешки и заблуди

• „React е програмен език.“ Той е библиотека, написана на и използвана от JavaScript (или TypeScript).
• „React съхранява данните ми.“ State живее в браузъра и изчезва при презареждане. Трайните данни изискват бекенд и база данни.
• Поставяне на тайни в React кода. Всичко в React приложение се изпраща до браузъра на посетителя. API ключовете там са публични. Пази ги на сървъра.
• „React приложенията не могат да се класират в търсачките.“ Рендирането само от клиента е по-слабо за търсене, но предрендирането или рендирането на сървъра решава по-голямата част от проблема.
• Огромни компоненти. Компонент с 1000 реда е труден за промяна безопасно — както за хора, така и за AI. Поискай по-малки.
• Предположение, че React уеб приложение е телефонно приложение. То работи в браузъра, включително на телефони, но не е приложение от App Store.

Какво да поискаш от AI builder

• „Раздели тази страница на малки, именувани компоненти и ми кажи в кой файл е всеки от тях.“
• „Направи компонента ProductCard преизползваем, с name, price и image като props.“
• „Запази количката в базата данни, така че да оцелее при презареждане.“
• „Пази всички API ключове на сървъра; React кодът трябва да вика нашия собствен API.“
• „Добави състояния за зареждане и грешка за данните, които идват от сървъра.“
• „Ако видимостта в търсачките е важна за тези страници, предрендирай ги или използвай настройка с рендиране на сървъра.“
• „Обясни с прости думи какво значи тази грешка и от кой компонент идва.“

За по-голямата картина вижте фронтенд срещу бекенд, а за преглед на написаното от AI — как да преглеждаш AI генериран код.

React в Mythex

Ако не поискаш друго, Mythex стартира нови проекти с Vite + React + TypeScript + Tailwind, с работещ live preview, докато чатиш. В първия си промпт можеш да посочиш друга настройка — например „Използвай Next.js“ или „обикновена статична HTML целева страница“ — и Mythex я избира от написаното; няма екран с настройки за това. Страницата в документацията за как се избира технологията обяснява опциите. Редакторът на кода е само за четене в Free; в Pro можеш да редактираш React кода директно и да експортираш проекта, за да продължиш работата му другаде.

Въпроси