Prva radionica - React.js [Cortex Academy]

readme.txt

1. cd Desktop

2. git clone https://github.com/perisicnikola37/radionice-react.js.git

3. cd radionice-react.js

4. code .

5. npm i

6. npm run dev

Za prelazak na druge grane:

1. git fetch

2. git checkout [ime grane] -> primjer: git checkout react_architecture

default_named_exports.txt

// Export iz modula

// module.js
export const name = 'John';
export const age = 30;

export default function sayHi() {
  console.log('Hi!');
}

// Import u drugom modulu
import sayHi, { name, age } from './module';

console.log(name); // John
console.log(age); // 30
sayHi(); // Hi!

javascript_vs_react.txt

// Bez React-a
const greeting = 'Hello, World!';
document.getElementById('root').innerHTML = `<h1>${greeting}</h1>`;

// S React-om
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, World!</h1>;
};

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

let_const.txt

// Let i const omogućavaju lokalni scope varijabli

let x = 10;
x = 20; // moguće

const y = 5;
y = 8; // nije moguće, dobijemo grešku

if (true) {
  let z = 30;
  console.log(z); // 30
}

console.log(z); // greška, z nije definisan izvan bloka if

Prva radionica - React.js [Cortex Academy]

Prva radionica - React.js [Cortex Academy]

rest_spread_operators.txt

// Rest operator (...) u funkciji
function logArgs(...args) {
  console.log(args);
}

logArgs(1, 2, 3); // [1, 2, 3]

// Spread operator (...) za stvaranje kopije niza

const numbers = [1, 2, 3];
const copyOfNumbers = [...numbers];

console.log(copyOfNumbers); // [1, 2, 3]

// Spread operator (...) za spajanje nizova

const numbers1 = [1, 2];
const numbers2 = [3, 4];
const mergedArray = [...numbers1, ...numbers2];

console.log(mergedArray); // [1, 2, 3, 4]

spa.txt

// Tradicionalna web aplikacija
// Pri svakom zahtjevu, cijela stranica se ponovno učitava
// sva logika je na serveru
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

// SPA koristeći React
// Aplikacija se učitava samo jednom, a sve promjene se rade dinamički
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, World!</h1>;
};

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

useful_links.txt

SPA: https://media.excellentwebworld.com/wp-content/uploads/2020/02/21071551/single-page-applications.jpg

Instalacija React.js aplikacije sa Vite: https://www.linkedin.com/pulse/installing-react-vite-beginners-guide-richard-oliver-bray/
npm vs yarn vs bun: 
1. https://miro.medium.com/v2/resize:fit:832/1*noWyIXw-yeNZq5Db2r8tOQ.png
2. https://miro.medium.com/v2/resize:fit:1400/1*y4P5UlVRQ4W_FDMHZ1fA5Q.png

NPM package manager:
https://www.npmjs.com

<StrictMode>: https://react.dev/reference/react/StrictMode

Environments: https://d3lkc3n5th01x7.cloudfront.net/wp-content/uploads/2023/01/02055540/testing-environment.png