React-ის შესავალი სახელმძღვანელო: ნულიდან პირველი მომხმარებლის ინტერფეისის აგებამდე

# React-ის შესავალი სახელმძღვანელო: ნულიდან პირველი მომხმარებლის ინტერფეისის აგებამდე

React არის JavaScript ბიბლიოთეკა მომხმარებლის ინტერფეისების ასაგებად. ის შემუშავებულია და შენარჩუნებულია Facebook-ის მიერ და გახდა ერთ-ერთი ყველაზე პოპულარული ინსტრუმენტი ფრონტ-ენდ დეველოპმენტში. ეს სახელმძღვანელო დაგეხმარებათ ნულიდან, ეტაპობრივად გაიგოთ React-ის ძირითადი ცნებები და ააწყოთ მარტივი მომხმარებლის ინტერფეისი.

## რატომ ავირჩიოთ React?

React-ს აქვს შემდეგი უპირატესობები:

* **კომპონენტიზაცია:** React ყოფს მომხმარებლის ინტერფეისს დამოუკიდებელ, მრავალჯერად კომპონენტებად. ეს აადვილებს კოდის შენარჩუნებას და გაგებას.
* **დეკლარაციული:** React იყენებს დეკლარაციულ პროგრამირების სტილს, რაც იმას ნიშნავს, რომ თქვენ მხოლოდ უნდა აღწეროთ ის, რისი ჩვენებაც გსურთ და React ავტომატურად ამუშავებს განახლებებსა და რენდერირებას.
* **ეფექტური:** React იყენებს ვირტუალურ DOM-ს და ჭკვიან diff ალგორითმს, რომ ეფექტურად განაახლოს მომხმარებლის ინტერფეისი და შეამციროს არასაჭირო რენდერირება.
* **უზარმაზარი საზოგადოების მხარდაჭერა:** React-ს აქვს უზარმაზარი საზოგადოება და მდიდარი ეკოსისტემა, სადაც შეგიძლიათ იპოვოთ უამრავი სახელმძღვანელო, ბიბლიოთეკა და ინსტრუმენტი, რომელიც დაგეხმარებათ განვითარებაში.
* **პლატფორმათაშორისი შესაძლებლობები:** React Native საშუალებას გაძლევთ გამოიყენოთ React მშობლიური მობილური აპლიკაციების (iOS და Android) შესაქმნელად.

## მოსამზადებელი სამუშაოები

სანამ დაიწყებთ, დარწმუნდით, რომ თქვენს კომპიუტერზე დაინსტალირებული გაქვთ შემდეგი ინსტრუმენტები:

* **Node.js:** Node.js არის JavaScript-ის გაშვების გარემო, რომელიც გამოიყენება React-ის განვითარების ინსტრუმენტების გასაშვებად. შეგიძლიათ ჩამოტვირთოთ და დააინსტალიროთ [https://nodejs.org/](https://nodejs.org/)-დან.
* **npm ან yarn:** npm (Node Package Manager) და yarn არის JavaScript პაკეტების მენეჯერები, რომლებიც გამოიყენება React-ის დამოკიდებულებების დასაყენებლად და სამართავად. როგორც წესი, npm ინსტალირდება Node.js-თან ერთად. yarn-ის ინსტალაცია შესაძლებელია [https://yarnpkg.com/](https://yarnpkg.com/)-დან.

## შექმენით თქვენი პირველი React აპლიკაცია

ჩვენ გამოვიყენებთ `create-react-app`-ს React პროექტის სწრაფად შესაქმნელად.

1. **შექმნა npm-ის გამოყენებით:**

   ```bash
   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 ბრძანება გაუშვებს განვითარების სერვერს და თქვენ შეგიძლიათ ეწვიოთ http://localhost:3000-ს ბრაუზერში თქვენი React აპლიკაციის სანახავად.

დირექტორიის სტრუქტურა

create-react-app-ის მიერ შექმნილი პროექტის დირექტორიის სტრუქტურა შემდეგია:

my-first-react-app/
├── node_modules/         # პროექტის დამოკიდებული ბიბლიოთეკები
├── public/               # სტატიკური რესურსები (მაგალითად, HTML ფაილები)
│   ├── index.html        # აპლიკაციის საწყისი HTML ფაილი
│   └── ...
├── src/                  # React-ის საწყისი კოდი
│   ├── App.css           # App კომპონენტის CSS სტილები
│   ├── 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` კომპონენტი:

```javascript
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-ის სინტაქსური გაფართოება, რომელიც საშუალებას გაძლევთ JavaScript-ის კოდში დაწეროთ HTML-ის მსგავსი კოდი. ზემოთ მოცემულ მაგალითში, `...` არის JSX გამოსახულება. JSX კოდი გარდაიქმნება Babel-ის მიერ სტანდარტულ JavaScript კოდად, რათა ბრაუზერმა შეძლოს მისი გაგება.

## App კომპონენტის შეცვლა

მოდით შევცვალოთ `App` კომპონენტი და შევქმნათ მარტივი მრიცხველი.

```javascript
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 Modules-ს და ჩვეულებრივ CSS ფაილებს.

**CSS Modules-ის გამოყენება:**

CSS Modules საშუალებას გაძლევთ შექმნათ დამოუკიდებელი CSS სტილები თითოეული კომპონენტისთვის, თავიდან აიცილოთ სტილის კონფლიქტი.  იმისათვის, რომ გამოიყენოთ CSS Modules კომპონენტში, თქვენ უნდა შექმნათ ფაილი, რომელიც მთავრდება `.module.css`-ით.

მაგალითად, შექმენით ფაილი სახელად `App.module.css` და დაამატეთ მასში შემდეგი 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;
}
```

შემდეგ `src/App.js` ფაილში შემოიტანეთ CSS Modules:

```javascript
import React, { useState } from 'react';
import styles from './App.module.css'; // CSS Modules-ის იმპორტი

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 სტილი:

```css
body {
  font-family: sans-serif;
}
```

ეს სტილი გამოყენებული იქნება მთელი აპლიკაციის `body` ელემენტზე.

## შემდეგი ნაბიჯები

გილოცავთ, თქვენ დაასრულეთ თქვენი პირველი React აპლიკაცია! შემდეგ შეგიძლიათ ისწავლოთ მეტი React-ის შესახებ, მაგალითად:

* **კომპონენტების კომუნიკაცია:** ისწავლეთ როგორ დაამყაროთ კომუნიკაცია სხვადასხვა კომპონენტს შორის.
* **ფორმების დამუშავება:** ისწავლეთ როგორ შექმნათ და დაამუშავოთ ფორმები.
* **როუტინგი:** ისწავლეთ როგორ შექმნათ მრავალგვერდიანი აპლიკაციები React Router-ის გამოყენებით.
* **Redux ან Context API:** ისწავლეთ როგორ მართოთ აპლიკაციის მდგომარეობა.
* **Hooks:** გაიღრმავეთ ცოდნა React Hooks-ის შესახებ, როგორიცაა `useEffect`, `useContext` და ა.შ.

გახსოვდეთ, React არის ტექნოლოგია, რომელიც მოითხოვს მუდმივ პრაქტიკასა და სწავლას. გისურვებთ სასიამოვნო სწავლას!