Toggle Меню Затваряне

�� Умно обобщение

ReactJS захранва потребителските интерфейси на безброй съвременни уебсайтове и мобилни приложения. Тази страница обяснява какво представлява библиотеката, как да я настроите и как компонентите, JSX, състоянията, свойствата и събитията работят заедно.

⚛️ Foundation: ReactJS е компонентно-базирана платформа с отворен код. JavaБиблиотека със скриптове, създадена във Facebook (сега Meta), за изграждане на бързи, интерактивни потребителски интерфейси.
🧩 Компоненти: Многократно използваемите градивни елементи, написани като функции или класове, разделят логиката на потребителския интерфейс на независими, поддържаеми части.
📝 JSX: A JavaРазширението за синтаксис на скриптове ви позволява да пишете HTML-подобни кодове и изрази в един и същ файл.
🔄 Състояние и реквизит: Състоянието съхранява частни, променящи се данни вътре в компонент, докато свойствата (props) предават данни само за четене в него.
️ Пътища за настройка: CDN скриптовите тагове са подходящи за бързи експерименти; npm пакетите или Vite са подходящи за реални проекти.
???? Съвременна практика: Функционалните компоненти с Hooks и React 18+ createRoot API вече са препоръчителният стандарт.
💼 Влияние на кариерата: Уменията, свързани с React, остават сред най-търсените в обявите за работа като front-end разработчици в световен мащаб.

Прочетете повече

Какво е ReactJS?

ReactJS е преден интерфейс с отворен код JavaБиблиотека със скриптове за изграждане на потребителски интерфейси. ReactJS се поддържа от Meta (бивш Facebook) и общност от отделни разработчици и компании. Използва се широко като основа за изграждане на едностранични приложения и мобилни приложения. Много е лесен за използване и позволява на потребителите да създават компоненти на потребителския интерфейс за многократна употреба.

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

Характеристики на ReactJS

JSX: JSX е разширение на JavaСкрипт. Въпреки че не е задължително да се използва JSX в React, това е една от добрите функции и е лесен за използване.

КомпонентиКомпонентите са като чисти JavaСкриптови функции, които улесняват писането на кода, като разделят логиката на независим код за многократна употреба. Можем да използваме компоненти като функции и компоненти като класове. Компонентите също имат състояние и свойства, което улеснява работата. Вътре в компонента на класа, състоянието и свойствата се поддържат.

Виртуален DOM: React създава виртуален DOM, т.е. кеш на структура от данни в паметта. Само последните промени се актуализират по-късно в DOM на браузъра, което поддържа рендерирането бързо.

JavaИзрази в скрипта: JS изрази могат да се използват в JSX файловете с помощта на къдрави скоби, например {}.

Предимства на ReactJS

Ето важните предимства/предимства от използването на ReactJS:

ReactJS използва виртуален DOM, който използва кеш за структури от данни в паметта, и само последните промени се актуализират в DOM на браузъра. Това прави приложението по-бързо.
Можете да създавате компоненти по ваш избор, като използвате функцията за компоненти на React. Компонентите могат да бъдат използвани повторно и са полезни и при поддръжката на кода.
ReactJS е с отворен код JavaБиблиотека със скриптове, така че е лесно да се започне с нея.
ReactJS стана много популярен за кратък период от време и захранва продукти като Facebook и... InstagramИзползва се от много известни компании като Apple, NetflixИ др
Meta поддържа библиотеката ReactJS, така че тя е добре поддържана и актуализирана.
ReactJS може да се използва за разработване на богат потребителски интерфейс както за десктоп, така и за мобилни приложения.
Лесен за отстраняване на грешки и тестване, тъй като по-голямата част от кодирането се извършва в JavaСценарий а не в HTML.

Недостатъци на ReactJS

Ето недостатъците/противопоставянията на използването на ReactJS:

По-голямата част от кода е написан на JSX, т.е. HTML и CSS са част от JavaСкрипт. Може да бъде доста объркващо, тъй като повечето други рамки предпочитат keeping HTML отделно от JavaКод на скрипта.
Размерът на файла на ReactJS е сравнително голям.

Знаейки компромисите, сте готови да настроите React. Най-бързият начин да го изпробвате е директно от CDN, която ще разгледаме първо; настройките, базирани на npm, за реални проекти следват след това.

Използване на ReactJS от CDN

За да започнем да работим с React, първо трябва да добавим ReactJS към нашата страница. Можете лесно да започнете да използвате ReactJS с CDN. JavaСкрипт файлове, както е показано по-долу.

Отидете на сайта с документация за React, за да получите CDN връзки, т.е. https://legacy.reactjs.org/docs/cdn-links.htmlи ще получите обяснение на необходимите файлове на следващото изображение.

За разработчици

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

За произв

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Сменете версия с желаната от вас версия на React както за react.development.js, така и за react-dom.development.js. На тази страница използваме версия 16, така че примерите по-долу се изпълняват непроменени.

💡 Забележка: Тези UMD/CDN компилации са legacy подход, който работи до React 18 и все още е подходящ за обучение. React 19 вече не предлага UMD компилации, а React 18+ е заменен. ReactDOM.render с createRoot — вижте раздела за версиите на React близо до края на тази страница.

В случай че планирате да използвате CDN файловете, не забравяйте да запазите атрибута crossorigin, за да избегнете проблеми с междудомейните. Кодът на ReactJS не може да се изпълнява директно в браузъра и трябва да се транспилира с помощта на Babel в plain. JavaСкрипт преди изпълнение в браузъра.

Ето скрипта BabelJS, който може да се използва:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Ето работещ пример на ReactJS, използващ CDN файлове и скрипта BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Изход:

Ще разгледаме подробностите за кода в следващата глава; нека видим как работи CDN файловете. Директното използване на Babel скрипта не е добра практика и начинаещите трябва да го използват само за да научат ReactJS засега. В производствената среда ще трябва да инсталирате React, използвайки npm пакета.

Използване на NPM пакети

Уверете се, че имате инсталиран Node.js. Ако не е инсталиран, прегледайте това ръководство за Node.js (https://www.guru99.com/node-js-tutorial.html) инсталация.

След като инсталирате Node.js, създайте папка реагирам/.

За да започнете с настройката на проекта, изпълнете командата npm инициал.

Ето как ще из��лежда структурата на папките:

reactproj\
package.json

Сега ще инсталираме пакетите, от които се нуждаем.

Ето списъка с пакети за ReactJS. Ние сме прикрепили React към версия 16, така че ReactDOM.render примерите на тази страница работят точно както е показано:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Отворете командния ред и изпълнете горните команди в папката reactproj/.

Създайте папка src / където ще се съхранява целият JS код. Целият код за проекта ReactJS ще бъде наличен в папката src/. Създайте файл index.js и импортирайте react и react-dom, както е показано по-долу.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Написахме основния код за ReactJS. Ще обясним подробностите за него в следващата глава. Искаме да покажем Здравейте, от Guru99 урока, и същото се дава на DOM елемента с идентификатор „root“. Взема се от файла index.html, който е началният файл, както е показано по-долу.

Създайте папка public/ и добавете index.html в нея, както е показано по-долу.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Пакетът react-scripts ще се погрижи за компилирането на кода и стартирането на сървъра, за да покаже HTML файла, т.е. index.html. Трябва да добавите командата в package.json, която ще се погрижи за използването на react-scripts за компилиране на кода и стартиране на сървъра, както е показано по-долу:

 "scripts": {
    "start": "react-scripts start"
  }

След инсталиране на всички пакети и добавяне на горната команда, окончателният package.json е както следва:

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

За да започнете да тествате ReactJS, изпълнете командата:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Ще се отвори браузърът с URL http://localhost:3000/ както е показано по-долу:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Ще използваме същия процес, за да изпълним JavaСкрипт файловете също в следващите глави. Добавете всички ваши .js и .jsx файлове в папката src/. Файловата структура ще бъде следната:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Как да създадете първата си настройка на React проект

Ето стъпка по стъпка ръководство в този урок за ReactJS, за да започнете с първото React приложение.

Стъпка 1) Импортирайте пакетите за реакция.
1. За да започнем с ReactJS, първо трябва да импортираме пакетите react, както следва.

import React from 'react';
import ReactDOM from 'react-dom';

2. Запазете файла като index.js в папката src/.

Стъпка 2) Пишете просто Code.
Ще напишем прост код в този урок React JS, в който ще покажем съобщението „Здравейте, от Guru99 урока!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render ще добави таг към елемента с идентификатор root. Ето HTML файла, който и��аме:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Стъпка 3) Компилирайте Code.

След това в този урок за React.js трябва да компилираме кода, за да получим изхода в браузъра.

Ето структурата на папките:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Добавихме командите за компилиране на крайния файл в package.json, както следва:

"scripts": {
    "start": "react-scripts start"
  },

За да компилирате крайния файл, изпълнете следната команда:

npm run start

Когато изпълните горната команда, тя ще компилира файловете и ще ви уведоми, ако има някаква грешка. Ако всичко изглежда наред, браузърът ще отвори и ще стартира страницата на http://localhost:3000/

Команда: npm стартиране стартиране:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Стъпка 4) Проверете изхода.
- URL http://localhost:3000 ще се отвори в браузъра, след като кодът бъде компилиран, както е показано по-долу:

Как да настроите React с Vite (съвременен подход)

Горната настройка на react-scripts идва от Create React App (CRA), който беше стандартният стартов инструмент в продължение на години. Екипът на React официално отхвърли Create React App през февруари 2025 г., така че новите проекти трябва да използват модерен инструмент за изграждане. Най-популярният избор днес е бързо, което стартира по-бързо и създава по-малки компилации.

Ето как да създадете нов React проект с Vite:

Стъпка 1) Изпълнете командата за скеле във вашия терминал:

npm create vite@latest my-react-app -- --template react

Стъпка 2) Преместете се в папката и инсталирайте зависимости:

cd my-react-app
npm install

Стъпка 3) Стартирайте сървъра за разработка:

npm run dev

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

Основни разлики от по-старата настройка на тази страница:

Входният файл е src/main.jsx вместо src/index.js.
Инсталира най-новия React, който използва createRoot вместо ReactDOM.render.
index.html се намира в корена на проекта, а не в public/.
Конструкциите се произвеждат с npm run build в папка dist/.

За full-stack нужди, като например маршрутизация и сървърно рендериране, екипът на React препоръчва и рамки като Next.jsВсичко, което ще научите в главите по-долу – JSX, компоненти, състояние и props – се прилага непроменено в проект на Vite или Next.js.

Какво е JSX?

JSX е разширение на JavaСкрипт. Това е шаблонен скрипт, където ще имате възможността да използвате HTML и JavaНапишете сценарий заедно.

Ето прост пример за JSX код.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Защо имаме нужда от JSX в React?

За потребителски интерфейс се нуждаем от HTML и всеки елемент в DOM ще има събития, които да бъдат обработвани, промени в състоянието и т.н.

В случая с React, това ни позволява да използваме HTML и JavaСкрипт в един и същ файл и се погрижете за промените в състоянието в DOM по ефективен начин.

Изрази в JSX

Ето един прост пример за това как да използвате изрази в JSX.

В по-ранни примери на ReactJS бяхме написали н��що подобно:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Сега ще променим горния код, за да добавим изрази. Изразите се използват в къдрави скоби {} и се разгръщат по време на изпълнение. Изразите в React са същите като JavaСкриптови изрази.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Нека сега тестваме същото в браузъра.

Можете да видите на екранната снимка по-горе, че изразът {display} не е заменен. React не знае какво да прави, когато израз се използва във .js файл.

Нека сега добавим промени и създадем .jsx файл, както е показано по-долу:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Добавихме необходимия код и ще използваме файла test.jsx в index.js. Искаме h1tag променлива, която да се използва вътре в index.js, така че същата да се експортира, както е показано по-горе в test.jsx.

Ето е промененият код в index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

За да използваме test.jsx в index.js, първо трябва да го импортираме, както е показано по-долу:

import h1tag from './test.jsx';

Можем да използваме h1tag сега в ReactDOM.render, както е показано по-долу:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Ето изхода, когато проверим същото в браузъра:

Какво представляват компонентите в ReactJS?

Компонентите са като чисти JavaСкриптови функции, които улесняват писането на кода, като разделят логиката на независим код за многократна употреба.

Компонентите като функции

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Създадохме функция, наречена Здравейте който връща таг h1, както е показано по-горе. Името на функцията действа като елемент, както е показано по-долу:

const Hello_comp = <Hello />;
export default Hello_comp;

Компонентът Здравейте се използва като HTML таг, т.е. , възложен на Hello_comp променлива и същата се експортира с помощта на export.

Нека сега използваме този компонент във файла index.js, както е показано по-долу:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ето изхода в браузъра:

Клас като компонент

Ето пример за ReactJS, който използва клас като компонент.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Можем да използваме компонента Hello във файла index.js, както следва:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Компонентът Hello се използва като HTML таг, т.е. .

Ето резултата от същото.

Компоненти на класа срещу функционални компоненти и куки

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

Аспект	Компонент на класа	Функционален компонент с кукички
Област	this.state и this.setState()	useState() Кука
Жизнен цикъл	componentDidMount, componentDidUpdate, componentWillUnmount	useEffect() Hook обхваща и трите
Синтаксис	Още шаблонни елементи (конструктор, bind, this)	По-кратко, няма тази ключова дума
Статус	Поддържан, стар стил	Препоръчва се за нов код

Ето примера за състояние от тази страница, пренаписан с куката useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

И двете версии рендират един и същ изход. Научете синтаксиса на класа, използван в главите по-долу, след което практикувайте конвертирането на всеки пример в Hooks.

Какво е състояние в ReactJS?

Държавата е JavaОбект на скрипт, подобен на props, който съдържа данни, които да се използват с рендерирането на ReactJS. Данните за състоянието са частен обект и се използват в компоненти в клас.

Пример за държава

Ето един работещ пример за това как да се използва състоянието вътре в клас.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Ето какво получаваме, когато го тестваме в браузъра:

Какво представляват Props в ReactJS?

Props са свойства, които се използват вътре в компонент. Те действат като глобални обекти или променливи, които могат да се използват вътре в компонента.

Реквизити за функционален компонент

Ето пример за предаване на props към функционален компонент.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

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

Компонентът се използва в index.js, както следва:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ето изхода в браузъра:

Реквизити към компонента на класа

За да получим достъп до props-ите в даден клас, можем да го направим по следния начин:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

- MSG атрибут се предава на компонента в index.js, както следва:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Това е резултатът в браузъра:

Също така проверете: - Урок за AngularJS за начинаещи: Научете AngularJS стъпка по стъпка

Жизнен цикъл на компонент

След като разгледахме компонентите, състоянието и свойствата, следващата стъпка е да разберем кога React извиква методите на вашия компонент. Жизненият цикъл на компонента е разделен на етапи Инициализация, Монтиране, Актуализиране и Отмонтиране.

Ето подробно обяснение на всеки етап.

��омпонентът в ReactJS има следните етапи:

Инициализация: Това е първият етап от жизнения цикъл на компонента.

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

монтиранеВ тази фаза компонентът се рендира вътре в DOM. В състояние на монтиране имаме достъп до следните методи:

render(): Този метод е предназначен за всички създадени компоненти. Той връща HTML възела.
componentDidMount(): Това се извиква веднага след добавянето на компонента към DOM.

Актуализация: В това състояние потребителят взаимодейства с DOM и той се актуализира. Например, въвеждате нещо в текстовото поле, така че свойствата на състоянието се актуализират.

Следните методи са налични в състояние на актуализация:

shouldComponentUpdate(): извиква се преди повторно рендиране; позволява ви да решите дали компонентът трябва да се актуализира. Връщането на true рендира компонента.
componentDidUpdate(): извиква се след актуализиране на компонента.

Демонтиране: Това състояние се проявява, когато компонентът не е необходим или е премахнат.

Следният метод е наличен в състояние на демонтиране:

componentWillUnmount(): извиква се точно преди компонентът да бъде премахнат или унищожен.

Работен пример за методи на жизнения цикъл

Ето един работещ пример, който показва методите, извикани на всеки етап.

Пример: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Когато проверявате изхода в браузъра:

В конзолата на браузъра получавате:

Когато потребителят въведе в текстовото поле:

В конзолата се показват следните съобщения:

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

Работа с формуляри

В ReactJS, HTML входни елементи като , , и <select /> имат собствено състояние и трябва да се актуализират, когато потребителят взаимодейства, използвайки метода setState().

В тази глава ще видим как да работим с формуляри в ReactJS.

Ето един работещ пример:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

За полетата за въвеждане трябва да поддържаме състоянието, така че за тази цел React предоставя специален метод, наречен setState, което помага за поддържане на състоянието при всяка промяна. В реално приложение, извикайте също event.preventDefault() вътре във formSubmit, за да се спре презареждането на страницата при изпращане на браузъра.

Използвахме събитията onChange и onClick върху текстовото поле и бутона за изпращане. Когато потребителят въведе текст в текстовото поле, се извиква събитието onChange и полето за име в обекта state се актуализира, както е показано по-долу:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Изходът в браузъра е следният:

Стъпка 1) Въведете името си в текстовото поле:

Стъпка 2) Кликнете върху бутона за изпращане:

Работа със събития в ReactJS

Формулярите са само един от източниците за взаимодействие с потребителя. Работата със събития в ReactJS е същата, както бихте я направили в JavaСкрипт. Можете да използвате всички обработчици на събития, които се използват в JavaСкрипт. Методът setState() се използва за актуализиране на състоянието, когато потребителят взаимодейства с произволен HTML елемент.

Ето един работещ пример за това как да се използват събития в ReactJS.

събития.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

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

Използвахме събитията onChange намлява onClick върху текстовото поле и бутона. Когато потребителят въвежда текст в текстовото поле, onChange събитието се извиква и полето за име в обекта на състоянието се актуализира, както е показано по-долу:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Ето изхода в браузъра:

Когато потребителят въведе името:

Когато потребителят щракне върху бутона Щракнете тук:

Работа с Inline CSS в ReactJS

След като компонентите ви обработят данни и събития, последната стъпка е стилизирането им. Ще разгледаме работещ пример, за да разберем вградения CSS в ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Добавих стила color: 'red' към тага h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Изходът в браузъра е следният:

Можете да създадете обект със стила, който искате за елемента, и да използвате израз, за да добавите стила, както е показано в примера по-горе.

Работа с външен CSS в ReactJS

Нека създадем външен CSS файл. За целта създайте папка css/ и добавете style.css в нея.

style.css

.h1tag {
color:red;
}

Добавете style.css към вашия файл index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Сега нека добавим класа към тага h1 във файла .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Атрибутът className получава подробности за класа. Обърнете внимание, че JSX използва име на класа вместо атрибута class в HTML, тъй като class е запазена ключова дума в JavaСкрипт. Сега нека го тестваме в браузъра.

Ето какво виждате, когато проверите тага h1 в браузъра:

Можете да видите, че class=”h1tag” е добавен успешно към тага h1.

Защо ReactDOM.render беше заменен от createRoot

Всеки пример на тази страница монтира приложението с ReactDOM.render, което е правилно за React 16 и 17, версиите, към които е насочен този курс. React 18, издаден през март 2022 г., замени тази входна точка с createRoot API, а React 19 премахна ReactDOM.render изцяло. Причината е едновременността: createRoot позволява на React да подготвя няколко версии на потребителския интерфейс едновременно, да прекъсва рендерирането с нисък приоритет и да поддържа ty...ping и анимациите са плавни. Функции като автоматично групиране, useTransition и стрийминг, базиран на Suspense, зависят от него.

Съвременният еквивалент на index.js, използван в цялата тази страница, изглежда така:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Всичко останало, което научихте тук – компоненти, JSX, състояние, props и събития – работи по същия начин след тази едноредова промяна във входната точка. Разлики във версиите като тази се появяват често в Въпроси за интервю за React JS, така че си струва да разберете и двата API.

Въпроси и Отговори

ReactJS е библиотека, а не пълноценен framework. Той се фокусира само върху изграждането на потребителски интерфейс. За маршрутизиране, извличане на данни и рендиране на сървъра, разработчиците го комбинират с инструменти като React Router или frameworks като... Next.js.

С твърдо вещество JavaОснови на скриптовете, повечето обучаеми разбират компонентите, JSX, състоянието и свойствата в рамките на две до четири седмици редовна практика. Подготовката за работа, включително Hooks, маршрутизиране и API извиквания, обикновено отнема два до три месеца изграждане на малки проекти.

ReactJS рендерира в DOM на браузъра, за да изгражда уебсайтове, докато React Native използва същия компонентен модел за изграждане на нативна iOS и... Android приложения. Уменията се прехвърлят между двете, но React Native замества HTML таговете с нативни UI компоненти.

Да. Асистенти като например Копилот на GitHub намлява ChatGPT може да изгражда компоненти, да обяснява грешки и да конвертира компоненти на класове в куки. Винаги преглеждайте генерирания код, тъй като изкуственият интелект може да предложи остарели API-та като ReactDOM.render.

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

Също така проверете: - Топ 70 въпроса и отговора за интервю за React (актуализирано)

Урок по ReactJS за начинаещи

Какво е ReactJS?

Характеристики на ReactJS

Предимства на ReactJS

Недостатъци на ReactJS

Използване на ReactJS от CDN

За разработчици

За произв

Използване на NPM пакети

Как да създадете първата си настройка на React проект

Как да настроите React с Vite (съвременен подход)

Какво е JSX?

Защо имаме нужда от JSX в React?

Изрази в JSX

Какво представляват компонентите в ReactJS?

Компонентите като функции

Клас като компонент

Компоненти на класа срещу функционални компоненти и куки

Какво е състояние в ReactJS?

Пример за държава

Какво представляват Props в ReactJS?

Реквизити за функционален компонент

Реквизити към компонента на класа

Жизнен цикъл на компонент

Работен пример за методи на жизнения цикъл

Работа с формуляри

Работа със събития в ReactJS

Работа с Inline CSS в ReactJS

Работа с външен CSS в ReactJS

Защо ReactDOM.render беше заменен от createRoot

Въпроси и Отговори

Обобщете тази публикация с:

Регистрирайте се за бюлетина

Какво е ReactJS?

Характеристики на ReactJS

Предимства на ReactJS

Недостатъци на ReactJS

СВЪРЗАНИ СТАТИИ

Използване на ReactJS от CDN

За разработчици

За произв

Използване на NPM пакети

Как да създадете първата си настройка на React проект

Как да настроите React с Vite (съвременен подход)

Какво е JSX?

Защо имаме нужда от JSX в React?

Изрази в JSX

Какво представляват компонентите в ReactJS?

Компонентите като функции

Клас като компонент

Компоненти на класа срещу функционални компоненти и куки

Какво е състояние в ReactJS?

Пример за държава

Какво представляват Props в ReactJS?

Реквизити за функционален компонент

Реквизити към компонента на класа

Жизнен цикъл на компонент

Работен пример за методи на жизнения цикъл

Работа с формуляри

Работа със събития в ReactJS

Работа с Inline CSS в ReactJS

Работа с външен CSS в ReactJS

Защо ReactDOM.render беше заменен от createRoot

Въпроси и Отговори

Обобщете тази публикация с:

Регистрирайте се за бюлетина