Водич за почетници за React: Изградете го вашиот прв кориснички интерфејс од нула

React е JavaScript библиотека за градење кориснички интерфејси. Развиена и одржувана од Facebook, таа стана една од најпопуларните алатки во развојот на предниот дел. Овој водич ќе ве води од нула, чекор по чекор, за да ги разберете основните концепти на 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 пакети за инсталирање и управување со зависностите на 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 ќе го стартува развојниот сервер, а вие можете да ја посетите 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 кодот ќе биде трансформиран од 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); }; Дефинира функција наречена 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 стилови во неа:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

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

Потоа увезете ги CSS Modules во датотеката src/App.js:

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 стил:

body {
  font-family: sans-serif;
}

Овој стил ќе се примени на елементот body на целата апликација.

Следни чекори

Честитки, ја завршивте вашата прва React апликација! Следно, можете да научите повеќе за React, како на пример:

• Комуникација помеѓу компоненти: Научете како да комуницираат различни компоненти меѓу себе.
• Обработка на формулари: Научете како да креирате и обработувате формулари.
• Рутирање: Научете како да користите React Router за да креирате апликации со повеќе страници.
• Redux или Context API: Научете како да управувате со состојбата на апликацијата.
• Hooks: Дознајте повеќе за React Hooks, како што се useEffect, useContext итн.

Запомнете, React е технологија која бара постојано вежбање и учење. Ви посакувам пријатно учење!