Ръководство за начинаещи в React: Създаване на първия ви потребителски интерфейс от нулата

React е JavaScript библиотека за изграждане на потребителски интерфейси. Разработена и поддържана от Facebook, тя се превърна в един от най-популярните инструменти за front-end разработка. Това ръководство ще ви преведе стъпка по стъпка през основните концепции на React и ще ви помогне да изградите прост потребителски интерфейс.

Защо да изберете React?

React има следните предимства:

• Компонентност: React разделя потребителския интерфейс на независими, многократно използваеми компоненти. Това прави кода по-лесен за поддръжка и разбиране.
• Декларативност: React използва декларативен стил на програмиране, което означава, че трябва само да опишете какво искате да представите, а React автоматично ще се погрижи за актуализациите и рендирането.
• Ефективност: React използва виртуален DOM и интелигентен diff алгоритъм, за да актуализира ефективно потребителския интерфейс, намалявайки ненужното рендиране.
• Огромна поддръжка от общността: React има огромна общност и богата екосистема, където можете да намерите много уроци, библиотеки и инструменти, които да ви помогнат в разработката.
• Кросплатформена способност: React Native ви позволява да използвате React за разработване на нативни мобилни приложения (iOS и Android).

Подготовка

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

• Node.js: Node.js е JavaScript runtime среда, която се използва за стартиране на инструменти за разработка на React. Можете да го изтеглите и инсталирате от https://nodejs.org/.
• npm или yarn: npm (Node Package Manager) и yarn са JavaScript package managers, които се използват за инсталиране и управление на зависимостите на React. Обикновено npm се инсталира заедно с Node.js. yarn може да бъде инсталиран от https://yarnpkg.com/.

Създаване на първото ви React приложение

Ще използваме create-react-app, за да създадем бързо React проект.

1. Създаване с npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Създаване с yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

След изпълнението на горните команди, create-react-app автоматично ще създаде директория с име my-first-react-app и ще инициализира React проект в тази директория. Командата npm start или yarn start ще стартира development server, и можете да посетите http://localhost:3000 в браузъра си, за да видите вашето React приложение.

Структура на директориите

Структурата на директориите на проекта, създаден от create-react-app, е следната:

my-first-react-app/
├── node_modules/         # Библиотеки, от които зависи проектът
├── public/               # Статични ресурси (например HTML файлове)
│   ├── index.html        # Входният HTML файл на приложението
│   └── ...
├── src/                  # React изходен код
│   ├── App.css           # CSS стилове за App компонента
│   ├── App.js            # App компонент
│   ├── App.test.js       # Тестови файл за App компонента
│   ├── index.css         # Глобални CSS стилове
│   ├── index.js          # Входният JavaScript файл на приложението
│   ├── logo.svg          # React лого
│   └── ...
├── .gitignore            # Git игнорирани файлове
├── package.json          # Метаданни и зависимости на проекта
├── README.md             # Документация на проекта
└── yarn.lock             # Файл за заключване на версиите на зависимостите (ако се използва yarn)

Разбиране на React компонентите

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

Във файла src/App.js можете да видите стандартен App компонент:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Обяснение на кода:

• import React from 'react'; импортира React библиотеката.
• function App() { ... } дефинира функционален компонент с име App.
• return ( ... ) връща JSX израз, който описва какво трябва да рендира компонента.
• export default App; експортира App компонента, за да може да се използва в други файлове.

JSX (JavaScript XML)

JSX е разширение на JavaScript синтаксиса, което ви позволява да пишете код, подобен на HTML, в JavaScript кода си. В горния пример ... е JSX израз. JSX кодът се трансформира в стандартен JavaScript код от Babel, за да може браузърът да го разбере.

Промяна на App компонента

Нека променим App компонента, за да създадем прост брояч.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Брояч

      Текуща стойност: {count}

      +
      -
    
  );
}

export default App;

Обяснение на промените:

• import React, { useState } from 'react'; Импортира useState Hook. useState е React Hook, който се използва за добавяне на състояние във функционални компоненти.
• const [count, setCount] = useState(0); Използва useState Hook за създаване на променлива на състояние, наречена count, и я инициализира на 0. setCount е функция, която се използва за актуализиране на състоянието count.
• const increment = () => { setCount(count + 1); }; Дефинира функция, наречена increment, която се използва за увеличаване на състоянието count с 1.
• const decrement = () => { setCount(count - 1); }; Дефинира функция, наречена decrement, която се използва за намаляване на състоянието count с 1.
• `Текуща стойност: {count}

Показва стойността на състояниетоcountна страницата.{count}` е JSX израз, който се използва за вмъкване на JavaScript променливи в JSX код.

• + и - Създава два бутона, които са свързани съответно с функциите increment и decrement. onClick е обработчик на събития, който се използва за изпълнение на определена функция, когато бутонът е щракнат.

След като запазите файла src/App.js, браузърът автоматично ще се опресни и ще видите прост брояч. Щракването върху бутона "+" ще увеличи броя, а щракването върху бутона "-" ще го намали.

Използване на CSS стилове

Можете да използвате CSS, за да разкрасите вашето React приложение. create-react-app поддържа CSS модули и обикновени CSS файлове.

Използване на CSS модули:

CSS модулите ви позволяват да създавате независими CSS стилове за всеки компонент, като избягвате конфликти на стилове. За да използвате CSS модули в компонент, трябва да създадете файл, който завършва на .module.css.

Например, създайте файл, наречен App.module.css, и добавете следните CSS стилове в него:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

След това импортирайте CSS модулите във файла src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Импортиране на CSS модули

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Използвайте обекта styles, за да се обърнете към CSS класове */}
      

# Брояч

      Текуща стойност: {count}

      +
      -
    
  );
}

export default App;

Използване на обикновен CSS файл:

Можете също да използвате обикновен CSS файл, за да дефинирате глобални стилове. В src/index.css файла можете да дефинирате глобални стилове.

Например, добавете следния CSS стил:

body {
  font-family: sans-serif;
}

Този стил ще бъде приложен към целия body елемент на приложението.

Следващи стъпки

Поздравления, завършихте първото си React приложение! След това можете да научите повече за React, като например:

• Комуникация между компоненти: Научете как да осъществявате комуникация между различни компоненти.
• Обработка на формуляри: Научете как да създавате и обработвате формуляри.
• Маршрутизация: Научете как да използвате React Router, за да създадете многостранично приложение.
• Redux или Context API: Научете как да управлявате състоянието на приложението.
• Hooks: Задълбочете се в React Hooks, като например useEffect, useContext и др.

Не забравяйте, че React е технология, която изисква постоянна практика и учене. Приятно учене!