React

React.js sau ReactJS

• Biblioteca de Javascript
• a aparut in 2013
• creat si intretinut de Facebook si de o comunitate de dezvoltatori ( open source ) si desigur si de alte companii individuale.

SPA

Un SPA sau o aplicatie cu o singura pagina, este o aplicatie (sau un website) care interactioneaza cu browserul web prin rescrierea dinamica, a DOM-ului current, cu date noi generate fie din client, fie din server. In acest caz, browserul nu este nevoit sa incarce o pagina noua.

JSX

• Syntax Extension to JavaScript
• Folosita in React pentru a descrie cum va arata o componenta
• JSX se poate sa va duca cu gandul la HTML, diferenta este ca JSX vine si cu toate functionalitatile JavaScript
• JSX reprezinta obiecte.

  const element = <h1>Hello, world!</h1>

  const element = ( 
   <div> 
     <h1>Hello!</h1> 
     <h2>Good to see you here.</h2> 
   </div> 
  );

Javascript

• Limbaj de programare orientat pe obiect
• Aparut in 1995
• Biblioteci cunoscute de Javascript: jQuery, D3, React, Socket.io, PHP, etc
• Framework-uri cunoscute de Javascript: Bootstrap, Angular, Vue, etc.

Variabile si constante

 let name = 'Oliver';
 name = 'Olivia'; //ok

 const name = 'Oliver';
 name = 'Oliver'; // error

Tipuri de date

• String
• Boolean
• Object
• null
• undefined

Arrow Functions

 let func = (arg1, arg2, ...argN) => expression

Rest & Spread

Rest parameters are used to create functions that accept any number of arguments.

The spread syntax is used to pass an array to functions that normally require a list of many arguments.

Rest Example

 function sumAll(...args) { 
   // args is the name for the array
   let sum = 0; 
   for (let arg of args) sum += arg; 
   return sum; 
 } 
 alert( sumAll(1) ); // 1  
 alert( sumAll(1, 2) ); // 3
 alert( sumAll(1, 2, 3) ); // 6

Spread Example

 let arr1 = [1, -2, 3, 4];
 let arr2 = [8, 3, -8, 1];
 alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25