Vodič za početnike u React-u: Izgradite svoj prvi korisnički interfejs od nule

React je JavaScript biblioteka za izgradnju korisničkih interfejsa. Razvijen i održavan od strane Facebook-a, postao je jedan od najpopularnijih alata u frontend razvoju. Ovaj vodič će vas voditi od nule, korak po korak, kroz osnovne koncepte React-a i izgraditi jednostavan korisnički interfejs.

Zašto odabrati React?

React ima sledeće prednosti:

• Komponentizacija: React razlaže korisnički interfejs na nezavisne, ponovno upotrebljive komponente. Ovo olakšava održavanje i razumevanje koda.
• Deklarativnost: React koristi deklarativni stil programiranja, što znači da samo opisujete šta želite da prikažete, a React automatski obrađuje ažuriranja i renderovanje.
• Efikasnost: React koristi virtuelni DOM i pametni diff algoritam, koji efikasno ažuriraju korisnički interfejs, smanjujući nepotrebno renderovanje.
• Ogromna podrška zajednice: React ima ogromnu zajednicu i bogat ekosistem, možete pronaći veliki broj tutorijala, biblioteka i alata koji će vam pomoći u razvoju.
• Mogućnost rada na više platformi: React Native vam omogućava da koristite React za razvoj izvornih mobilnih aplikacija (iOS i Android).

Priprema

Pre nego što počnete, morate da se uverite da imate instalirane sledeće alate na svom računaru:

• Node.js: Node.js je JavaScript runtime okruženje za pokretanje React razvojnih alata. Možete ga preuzeti i instalirati sa https://nodejs.org/.
• npm ili yarn: npm (Node Package Manager) i yarn su JavaScript menadžeri paketa koji se koriste za instaliranje i upravljanje React zavisnostima. Obično se npm instalira zajedno sa Node.js. yarn se može instalirati sa https://yarnpkg.com/.

Kreiranje vaše prve React aplikacije

Koristićemo create-react-app da brzo kreiramo React projekat.

1. Kreiranje pomoću npm-a:

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

2. Kreiranje pomoću yarn-a:

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

Nakon izvršavanja gornjih naredbi, create-react-app će automatski kreirati direktorijum pod nazivom my-first-react-app i inicijalizovati React projekat u tom direktorijumu. Komanda npm start ili yarn start će pokrenuti razvojni server, a vašoj React aplikaciji možete pristupiti u pregledaču na adresi http://localhost:3000.

Struktura direktorijuma

Struktura direktorijuma projekta kreiranog pomoću create-react-app je sledeća:

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 logo
│   └── ...
├── .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 je React Hook koji se koristi za dodavanje stanja u funkcijske komponente.
• const [count, setCount] = useState(0); Koristi useState Hook za kreiranje promenljive stanja pod nazivom count i inicijalizaciju na 0. setCount je funkcija za ažuriranje stanja count.
• const increment = () => { setCount(count + 1); }; Definiše funkciju pod nazivom increment koja se koristi za povećanje stanja count za 1.
• const decrement = () => { setCount(count - 1); }; Definiše funkciju pod nazivom decrement koja se koristi za smanjenje stanja count za 1.
• 当前计数: {count} Prikazuje vrednost stanja count na stranici. {count} je JSX izraz koji se koristi za umetanje JavaScript promenljivih u JSX kod.
• + 和 - Kreira dva dugmeta koja su vezana za funkcije increment i decrement. onClick je rukovalac događajima koji se koristi za izvršavanje određene funkcije kada se klikne na dugme.

Nakon što sačuvate datoteku src/App.js, pregledač će se automatski osvežiti i videćete jednostavan brojač. Klikom na dugme "+" povećava se brojanje, a klikom na dugme "-" smanjuje se brojanje.

使用 CSS 样式

Možete koristiti CSS za ulepšavanje vaše React aplikacije. create-react-app podržava CSS module i obične CSS datoteke.

使用 CSS Modules:

CSS Modules vam omogućavaju da kreirate nezavisne CSS stilove za svaku komponentu, izbegavajući sukobe stilova. Da biste koristili CSS module u komponenti, potrebno je da kreirate datoteku koja se završava na .module.css.

Na primer, kreirajte datoteku pod nazivom App.module.css i dodajte sledeće CSS stilove u nju:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

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

Zatim u datoteci src/App.js uvezite CSS module:

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 је технологија која захтева константно вежбање и учење. Желим вам пријатно учење!