Што е React? Едноставен водич за непрограмери

React е JavaScript библиотека за градење кориснички интерфејси — делот од апликацијата што луѓето го гледаат и кликнуваат. Екраните ги градите од повторно употребливи делови наречени компоненти, како копче, картичка со производ или цела страница, а React ги држи екранот и податоците усогласени: кога податокот ќе се промени, React ги ажурира деловите од страницата што зависат од него. Создаден е во Facebook (сега Meta), е со отворен код и е еден од најшироко користените начини за градење веб апликации.

Зошто е важен кога градите со AI

Ако градите веб апликација со AI алатка, има голема шанса да е напишана во React. Многу AI градители на апликации го користат 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 (изврши код по рендерирањето, на пример за да вчита податоци). Ќе ги видите насекаде во React код генериран од AI.

Практичен пример: бројач на кошничка

Да речеме дека вашата онлајн продавница има копче „Додај во кошничка“ и икона на кошничка што го прикажува бројот на производи. Во 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. За да се зачува кошничката, би морале да ја зачувате некаде трајно — колаче, складиште на прелистувачот или база на податоци преку вашиот backend. React го држи екранот; не ги складира вашите податоци.

Каде се вклопува React во веб апликацијата

Апликација „Vite + React“ се рендерира во прелистувачот (single-page app). Next.js апликација може прво да ги рендерира страниците на серверот, што им помага на пребарувачите и на брзината на првото вчитување.

Чести поими објаснети

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

• „React е програмски јазик.“ Тоа е библиотека напишана и користена од JavaScript (или TypeScript).
• „React ги складира моите податоци.“ State живее во прелистувачот и исчезнува при освежување. Трајните податоци бараат backend и база.
• Ставање тајни во React кодот. Сè во React апликацијата се испраќа до прелистувачот на посетителот. API клучевите таму се јавни. Чувајте ги на серверот.
• „React апликациите не можат да се рангираат во пребарувачите.“ Рендерирањето само на клиентот е послабо за пребарување, но prerendering или рендерирање на серверот го поправа најголемиот дел.
• Огромни компоненти. Една компонента од 1.000 линии е тешка за менување безбедно и за луѓе и за AI. Побарајте помали.
• Претпоставка дека React веб апликацијата е телефонска апликација. Работи во прелистувач, вклучително и на телефони, но не е апликација од App Store.

Што да побарате од вашиот AI градител

• „Раздели ја оваа страница на мали, именувани компоненти и кажи ми во која датотека е секоја.“
• „Направи ја компонентата ProductCard повторно употреблива, со name, price и image како props.“
• „Зачувај ја кошничката во базата на податоци за да преживее освежување.“
• „Чувај ги сите API клучеви на серверот; React кодот треба да ја повикува нашата сопствена API.“
• „Додај состојби за вчитување и грешка за податоци што доаѓаат од серверот.“
• „Ако видливоста во пребарувачите е важна за овие страници, prerender-ирај ги или користи поставка со рендерирање на серверот.“
• „Објасни едноставно што значи оваа грешка и од која компонента доаѓа.“

За поголемата слика, видете frontend наспроти backend, а за прегледување на кодот што AI го напишал, како да прегледате код генериран од AI.

React во Mythex

Освен ако не побарате нешто друго, Mythex ги започнува новите проекти на Vite + React + TypeScript + Tailwind, со жива прегледна верзија додека разговарате. Во првиот промпт можете да наведете друга поставка — на пример „Користи Next.js“ или „едноставна статична HTML страница“ — и Mythex ја избира од она што ќе го напишете; за тоа нема екран со поставки. Страницата во документацијата за како се избира технологијата ги објаснува опциите. Уредникот на кодот е само за читање на Free; на Pro можете директно да го уредувате React кодот и да го извезете проектот за да продолжите да работите на друго место.

Прашања