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/ сайтынан жүктеп орната аласыз.
• npm немесе yarn: npm (Node Package Manager) және yarn - React тәуелділіктерін орнату және басқару үшін қолданылатын JavaScript пакет менеджерлері. Әдетте Node.js орнатқанда npm бірге орнатылады. yarn-ды https://yarnpkg.com/ сайтынан орнатуға болады.

Бірінші React қосымшасын жасау

Біз React жобасын жылдам жасау үшін create-react-app қолданамыз.

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 командасы әзірлеу серверін іске қосады, сіз 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 кодында HTML тәрізді код жазуға мүмкіндік беретін JavaScript синтаксисінің кеңейтімі. Жоғарыдағы мысалда ... JSX өрнегі болып табылады. JSX коды Babel арқылы стандартты JavaScript кодына түрлендіріледі, осылайша браузер оны түсіне алады.

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); }; count күйін 1-ге арттыру үшін increment деп аталатын функцияны анықтау.
• const decrement = () => { setCount(count - 1); }; count күйін 1-ге кеміту үшін decrement деп аталатын функцияны анықтау.
• `Ағымдағы есеп: {count}

беттеcountкүйінің мәнін көрсету.{count}` - JSX кодында JavaScript айнымалысын енгізу үшін қолданылатын JSX өрнегі.

• + және - increment және decrement функцияларын байланыстыратын екі батырма жасау. onClick - батырма басылған кезде көрсетілген функцияны орындау үшін қолданылатын оқиға өңдеуші.

src/App.js файлын сақтағаннан кейін браузер автоматты түрде жаңартылады және сіз қарапайым есептегішті көресіз. "+" батырмасын басу есепті арттырады, ал "-" батырмасын басу есепті азайтады.

CSS стилін пайдалану

Сіз React қосымшаңызды әдемілеу үшін CSS пайдалана аласыз. create-react-app CSS Modules және қарапайым CSS файлдарын қолдайды.

CSS Modules пайдалану:

CSS Modules әр компонент үшін тәуелсіз CSS стилін жасауға мүмкіндік береді, стиль қақтығыстарын болдырмайды. Компонентте CSS Modules пайдалану үшін .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;
}

Содан кейін src/App.js файлында CSS Modules импорттаңыз:

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 (
     {/* CSS кластарын сілтеу үшін styles объектісін пайдаланыңыз */}
      

# Есептегіш

      Ағымдағы есеп: {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 - бұл үнемі жаттығу мен үйренуді қажет ететін технология. Оқуыңызға сәттілік!