React-д зориулсан гарын авлага: Анхны хэрэглэгчийн интерфейсийг тэгээс нэг хүртэл бүтээх нь

# React-д зориулсан гарын авлага: Анхны хэрэглэгчийн интерфейсийг тэгээс нэг хүртэл бүтээх нь

React бол хэрэглэгчийн интерфейсийг бүтээхэд зориулагдсан JavaScript сан юм. Үүнийг Facebook хөгжүүлж, засвар үйлчилгээ хийдэг бөгөөд урд талын хөгжүүлэлтийн хамгийн алдартай хэрэгслүүдийн нэг болжээ. Энэхүү гарын авлага нь таныг тэгээс эхлэн React-ийн үндсэн ойлголтуудыг алхам алхмаар ойлгож, энгийн хэрэглэгчийн интерфейсийг бүтээхэд чиглүүлэх болно.

## Яагаад React-ийг сонгох вэ?

React нь дараах давуу талуудтай:

* **Бүрэлдэхүүн хэсэгчилсэн:** React нь хэрэглэгчийн интерфейсийг бие даасан, дахин ашиглах боломжтой бүрэлдэхүүн хэсгүүдэд хуваадаг. Энэ нь кодыг засварлахад хялбар, ойлгоход хялбар болгодог.
* **Мэдэгдэхүйц:** React нь мэдэгдэхүйц програмчлалын хэв маягийг ашигладаг бөгөөд энэ нь та зөвхөн харуулахыг хүссэн зүйлээ дүрслэхэд л хангалттай бөгөөд React шинэчлэлт, үзүүлэх ажлыг автоматаар зохицуулдаг гэсэн үг юм.
* **Үр ашигтай:** React нь виртуал DOM болон ухаалаг diff алгоритмыг ашигладаг бөгөөд хэрэглэгчийн интерфейсийг үр ашигтай шинэчилж, шаардлагагүй үзүүлэлтийг бууруулдаг.
* **Том нийгмийн дэмжлэг:** React нь том нийгэмлэг, баялаг экосистемтэй бөгөөд та хөгжүүлэхэд туслах олон тооны заавар, сан, хэрэгслийг олж болно.
* **Олон платформд ажиллах чадвар:** React Native нь React-ийг ашиглан уугуул гар утасны програмуудыг (iOS болон Android) хөгжүүлэх боломжийг олгодог.

## Бэлтгэл ажил

Эхлэхээсээ өмнө таны компьютер дээр дараах хэрэгслүүд суулгагдсан эсэхийг шалгаарай:

* **Node.js:** Node.js бол React хөгжүүлэлтийн хэрэгслийг ажиллуулахад ашиглагддаг JavaScript ажиллах орчин юм. Та [https://nodejs.org/](https://nodejs.org/) -ээс татаж суулгаж болно.
* **npm эсвэл yarn:** npm (Node Package Manager) болон yarn нь React-ийн хамаарлыг суулгах, удирдах JavaScript багцын менежерүүд юм. Node.js-ийг суулгахад npm-ийг ихэвчлэн суулгадаг. 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 командууд нь хөгжүүлэлтийн серверийг эхлүүлж, та React програмаа http://localhost:3000 хаягаар браузер дээрээс үзэх боломжтой.

Директорын бүтэц

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 компонентийг харж болно:

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 компонентийг өөрчилж, энгийн тоолуур үүсгэе.

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

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {\n    setCount(count + 1);\n  };\n\n  const decrement = () => {\n    setCount(count - 1);\n  };\n\n  return (\n    \n      \n\n# Тоолуур\n\n      Одоогийн тоо: {count}\n\n      +\n      -\n    \n  );\n}\n\nexport default App;\n```\n\n**Өөрчлөлтийн тайлбар:**\n\n* `import React, { useState } from 'react';`  `useState` Hook-ийг импортлох. `useState` нь функцэн компонентэд төлөв нэмэхэд ашиглагддаг React Hook юм.\n* `const [count, setCount] = useState(0);`  `useState` Hook-ийг ашиглан `count` нэртэй төлөвийн хувьсагчийг үүсгэж, анхны утгыг `0`-ээр тохируулах. `setCount` нь `count` төлөвийг шинэчлэхэд ашиглагддаг функц юм.\n* `const increment = () => { setCount(count + 1); };` `count` төлөвийг 1-ээр нэмэгдүүлэхэд ашиглагддаг `increment` нэртэй функцийг тодорхойлох.\n* `const decrement = () => { setCount(count - 1); };` `count` төлөвийг 1-ээр бууруулахад ашиглагддаг `decrement` нэртэй функцийг тодорхойлох.\n* `Одоогийн тоо: {count}

`  Хуудсан дээр `count` төлөвийн утгыг харуулах.  `{count}` нь JSX код дотор JavaScript хувьсагчийг оруулахад ашиглагддаг JSX илэрхийлэл юм.\n* `+` ба `-` `increment` ба `decrement` функцүүдийг холбосон хоёр товч үүсгэх.  `onClick` нь товчлуур дээр дарахад заасан функцийг гүйцэтгэхэд ашиглагддаг үйл явдлын боловсруулагч юм.\n\n`src/App.js` файлыг хадгалахад хөтөч автоматаар шинэчлэгдэж, та энгийн тоолуурыг харах болно. \ 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: useEffect, useContext гэх мэт React Hooks-ийн талаар илүү ихийг мэдэж аваарай.

React бол байнга дадлага хийж, суралцах шаардлагатай технологи гэдгийг санаарай. Амжилт хүсье!