This shows you the differences between two versions of the page.
moby:frontend:01 [2020/07/14 19:29] ciprian.dobre [Sesiunea 1 - Concepte de baza] |
moby:frontend:01 [2020/07/14 19:40] (current) ciprian.dobre [Sesiunea 1 - Concepte de baza] |
||
---|---|---|---|
Line 2: | Line 2: | ||
===== Sesiunea 1 - Concepte de baza ===== | ===== Sesiunea 1 - Concepte de baza ===== | ||
+ | |||
**React** | **React** | ||
React.js sau ReactJS | React.js sau ReactJS | ||
- | Biblioteca de Javascript | + | * Biblioteca de Javascript |
- | a aparut in 2013 | + | * a aparut in 2013 |
- | creat si intretinut de Facebook si de o comunitate de dezvoltatori ( open source ) si desigur si de alte companii individuale. | + | * creat si intretinut de Facebook si de o comunitate de dezvoltatori ( open source ) si desigur si de alte companii individuale. |
**SPA** | **SPA** | ||
Line 18: | Line 19: | ||
**JSX** | **JSX** | ||
- | * Unordered List ItemSyntax Extension to JavaScript | + | * Syntax Extension to JavaScript |
- | * Unordered List ItemFolosita in React pentru a descrie cum va arata o componenta | + | * Folosita in React pentru a descrie cum va arata o componenta |
- | * Unordered List ItemJSX se poate sa va duca cu gandul la HTML, diferenta este ca JSX vine si cu toate functionalitatile JavaScript | + | * JSX se poate sa va duca cu gandul la HTML, diferenta este ca JSX vine si cu toate functionalitatile JavaScript |
- | JSX reprezinta obiecte. | + | * 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 | ||
+ | |||
- | const element = <h1>Hello, world!</h1> | + | **Spread Example** |
- | const element = | + | let arr1 = [1, -2, 3, 4]; |
- | ( | + | let arr2 = [8, 3, -8, 1]; |
- | <div> | + | alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25 |
- | <h1>Hello!</h1> | + | |
- | <h2>Good to see you here.</h2> | + | |
- | </div> | + | |
- | ); | + | |