ReactJS / Tailwind CSS / PWA / Axios / SCSS / Redux, ViteJS : Entry Masterclass

[markosimic]

ReactJS / Tailwind CSS / PWA / Axios / SCSS / Redux / ViteJS : Entry Masterclass.

pod autorskim pravima od strane Marko Simić.

Ova tema sadrži sadržaj vezan za: ReactJS, Tailwind CSS, PWA, Axios, SCSS, Redux, ViteJS : Entry Masterclass.

1. ReactJS (React JavaScript)

Korisni Linkovi

• Node.js Official Site - Osnovna platforma za rad s Reactom.
• React Official Documentation - Službena dokumentacija React biblioteke.
• W3Schools React Tutorial - Praktični vodič za učenje Reacta.

Šta je to ReactJS?
ReactJS je JavaScript biblioteka razvijena od strane Facebook-a za izradu dinamičkih i interaktivnih korisničkih interfejsa. React omogućava izgradnju web aplikacija koristeći komponente, što olakšava ponovnu upotrebu koda i održavanje velikih aplikacija.

Ključne Karakteristike:

Komponente: React aplikacije su izgrađene od malih, ponovljivih delova nazvanih komponente. Svaka komponenta može imati svoj vlastiti state (stanje) i props (atribute). Komponente mogu biti klase ili funkcionalne.

JSX: JavaScript XML je sintaksa koja omogućava pisanje HTML-a unutar JavaScript-a. JSX omogućava deklarativno opisivanje izgleda korisničkog interfejsa i integraciju sa JavaScript logikom.

Kod [Izaberi] Proširi

import React, { useState } from 'react';

function App() {
const [count, setCount] = useState(0);

return (
<div>
<h1>Brojač: {count}</h1>
<button onClick={() => setCount(count + 1)}>Povećaj</button>
</div>
);
}

export default App;

State i Props: State je lokalno stanje komponente koje se može menjati tokom vremena. Props (properties) su atributi koje komponente primaju od svojih roditeljskih komponenti i koriste se za konfiguraciju.

Komponente u Reactu:

Funkcionalne Komponente: Jednostavne komponente koje koriste Hooks za upravljanje state-om i efekatima.

Kod [Izaberi] Proširi

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<h1>Brojač: {count}</h1>
<button onClick={() => setCount(count + 1)}>Povećaj</button>
</div>
);
}

export default Counter;

Klase Komponente: Komponente koje koriste klase i imaju sopstveni state i metode.

Kod [Izaberi] Proširi

import React, { Component } from 'react';

class CounterClass extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

increment = () => {
this.setState({ count: this.state.count + 1 });
}

render() {
return (
<div>
<h1>Brojač: {this.state.count}</h1>
<button onClick={this.increment}>Povećaj</button>
</div>
);
}
}

export default CounterClass;


2. Tailwind CSS (React JavaScript)

Korisni Linkovi

• Tailwind CSS Official Site - Glavni resurs za Tailwind CSS.

Šta je to Tailwind CSS?
Tailwind CSS je utilitaristički CSS framework koji omogućava brzo stilizovanje komponenti koristeći unapred definisane klase koje se mogu direktno dodati HTML elementima. Ovo omogućava bržu i fleksibilniju izradu korisničkog interfejsa bez potrebe za pisanjem prilagođenih CSS pravila.

Ključne Karakteristike:

Utilitarističke klase: Umesto da pišete prilagođene CSS klase, koristite unapred definisane klase kao što su bg-blue-500, text-white, p-4 itd. Ovo omogućava brzo stilizovanje i promenu izgleda elemenata.

Responsive dizajn: Tailwind CSS podržava responzivni dizajn putem svojih "breakpoint" klasa. Klase poput md omogućavaju promene stila na osnovu veličine ekrana.

Kod [Izaberi] Proširi

<div class="bg-blue-500 text-white p-4 rounded">
  <h1 class="text-2xl">Dobrodošli u Tailwind CSS</h1>
</div>
Customizacija: Tailwind omogućava prilagođavanje konfiguracije putem tailwind.config.js fajla, gde možete dodati vlastite boje, fontove i druge stilove.

Kod [Izaberi] Proširi

// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#1DA1F2',
'custom-green': '#00FF00'
},
fontFamily: {
'custom': ['"Comic Sans MS"', 'cursive']
},
},
},
}


3. PWA (Progressive Web Application)

Šta je to PWA?
PWA su web aplikacije koje koriste moderne web tehnologije za pružanje korisničkog iskustva sličnog nativnim aplikacijama. Omogućavaju offline rad, brza učitavanja, instalaciju na uređajima i dodatne funkcionalnosti kao što su push notifikacije.

Ključne Karakteristike:

Service Workers: Skripte koje vaš web sajt koristi za rad u pozadini i omogućavaju offline pristup i push notifikacije. Service workers su JavaScript fajlovi koji mogu obavljati različite zadatke kao što su keširanje resursa i sinhronizacija podataka.

Kod [Izaberi] Proširi

// service-worker.js
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js'
]);
})
);
});

self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});

Manifest fajl: JSON fajl koji pruža informacije o aplikaciji kao što su ime, ikona i boje teme. Manifest omogućava aplikaciji da bude instalirana na uređajima i pruža informacije za početni ekran i ikone aplikacije.

Kod [Izaberi] Proširi

{
"short_name": "PWA App",
"name": "Progressive Web App Example",
"icons": [
{
"src": "/icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

Registracija Service Worker-a: Za registraciju service worker-a u aplikaciji, dodajte sledeći kod u vaš glavni JavaScript fajl.

Kod [Izaberi] Proširi

if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then((registration) => {
console.log('Service Worker registered with scope:', registration.scope);
}).catch((error) => {
console.error('Service Worker registration failed:', error);
});
});
}


4. Axios (React JavaScript)

Šta je to Axios?
Axios je JavaScript biblioteka koja se koristi za pravljenje HTTP zahteva u web aplikacijama. Omogućava slanje asinkronih zahteva i rad sa odgovorima u Promise formatu.

Ključne Karakteristike:

Asinhroni zahtevi: Axios koristi Promise za rad sa asinhronim operacijama, što omogućava jednostavno upravljanje odgovorima i greškama.

Kod [Izaberi] Proširi

import axios from 'axios';

axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('There was an error!', error);
});

Postavljanje globalnih konfiguracija: Možete postaviti osnovne konfiguracije za sve Axios zahteve koristeći axios.create.

Kod [Izaberi] Proširi

import axios from 'axios';

const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: { 'X-Custom-Header': 'foobar' }
});

instance.get('/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('There was an error!', error);
});

Interceptors: Axios omogućava korišćenje interceptors za presretanje i manipulaciju zahteva i odgovora pre nego što budu obrađeni.

Kod [Izaberi] Proširi

axios.interceptors.request.use(function (config) {
// Do something before request is sent
console.log('Request sent:', config);
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
// Do something with response data
console.log('Response received:', response);
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});


5. SCSS (Sass)

Šta je to SCSS?
SCSS je Sass sintaksa koja omogućava pisanje CSS sa naprednim funkcionalnostima kao što su varijable, ugnježdene pravila i mixin-i. SCSS omogućava bolju organizaciju i održavanje stilova.

Ključne Karakteristike:

Varijable: SCSS omogućava korišćenje varijabli za definisanje boja, fontova, i drugih stilskih atributa koji se mogu ponovo koristiti.

Kod [Izaberi] Proširi

// styles.scss
$primary-color: #3498db;

.button {
background-color: $primary-color;
color: white;
}

Ugnježdena Pravila: SCSS omogućava ugnježdenje pravila što čini kod preglednijim i organizovanijim.

Kod [Izaberi] Proširi

// styles.scss
.navbar {
background-color: #333;

.nav-item {
color: white;

css
Copy code
&:hover {
  color: #ddd;
}
}
}

Mixin-i: Mixin-i su blokovi koda koji se mogu ponovo koristiti u različitim delovima vašeg CSS-a. Mogu primati argumente i koristiti ih za dinamičko generisanje stilova.

Kod [Izaberi] Proširi

// styles.scss
@mixin border-radius($radius) {
border-radius: $radius;
}

.button {
@include border-radius(5px);
}


6. Redux (React JavaScript)

Šta je to Redux?
Redux je JavaScript biblioteka za upravljanje stanjem aplikacije. Koristi princip centralizovanog stanja koje se može menjati samo kroz akcije i reduktore, čime omogućava predvidljivije upravljanje podacima.

Ključne Karakteristike:

Centralizovano stanje: Stanje aplikacije se čuva u jednom centralizovanom objektu, što olakšava njegovo praćenje i promene.

Akcije i Reduceri: Akcije su objekti koji definišu šta se dogodilo, dok su reduktori funkcije koje obrađuju akcije i vraćaju novo stanje.

Kod [Izaberi] Proširi

// actions.js
export const increment = () => ({
type: 'INCREMENT'
});

// reducer.js
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
default:
return state;
}
}

export default counterReducer;

Redux Thunk: Middleware koji omogućava asinhrone akcije u Redux-u. Koristi se za obavljanje asinhronih operacija kao što su API zahtevi.

Kod [Izaberi] Proširi

// actions.js
export const fetchData = () => {
return (dispatch) => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
});
};
};


7. Vite (Modern Build Tool)

Šta je to Vite?
Vite je moderan build alat za frontend razvoj koji pruža brza učitavanja i razvojne brzine koristeći najnovije web tehnologije. Razvijen je od strane Evan You-a, kreatora Vue.js, i koristi ESM (ECMAScript Modules) za bržu i efikasniju izgradnju aplikacija. Vite se odlikuje izuzetnom brzinom pri razvoju zbog svoje sposobnosti da koristi on-demand preprocesiranje modula, što smanjuje vreme potrebno za učitavanje stranica.

Ključne Karakteristike:

Brza konfiguracija i pokretanje: Vite pruža brzu konfiguraciju i pokretanje servera koristeći unapred definisane postavke i automatsko prepoznavanje konfiguracija za popularne frontend alate.

On-Demand Modul Preprocessing: Vite koristi ESM za brzo učitavanje i preprocesiranje samo onih modula koji su potrebni, čime se smanjuje vreme čekanja i povećava efikasnost.

Kod [Izaberi] Proširi

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [react()],
server: {
port: 3000
},
build: {
outDir: 'dist'
}
});

Hot Module Replacement (HMR): Vite podržava HMR, što omogućava automatsko osvežavanje stranica kada se naprave promene u kodu, bez potrebe za ponovnim učitavanjem stranice.

Kod [Izaberi] Proširi

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

if (import.meta.hot) {
import.meta.hot.accept();
}

Brza izgradnja za produkciju: Vite koristi esbuild za brzo preprocesiranje i minifikaciju JavaScript i CSS fajlova, čime se ubrzava proces izgradnje za produkciju.

Kod [Izaberi] Proširi

// Pokrenite izgradnju za produkciju
npm run build


Kod [Izaberi] Proširi

// Dodajte skriptu za izgradnju u package.json
"scripts": {
"build": "vite build"
}


Završna Reč

Nadam se da ste kroz ovaj masterclass, koji je posebno prilagođen apsolutnim početnicima, stekli osnovno razumevanje ReactJS-a, Tailwind CSS-a, PWA-a, Axios-a, SCSS-a, Redux-a, ViteJS-a.
Verujem da sada imate solidnu osnovu za dalji razvoj i istraživanje u svetu web developmenta.
Ako imate dodatnih pitanja ili vam je potrebna pomoć, slobodno ostavite komentar ispod.
Želim vam puno uspeha i radujem se vašim budućim projektima.

Srdačan pozdrav, Marko Simić

[Denmla]

doktor si za ove stvari, nemam reci

[MaEsTrOo]

Lepo i jednostavno!