Differences
This shows you the differences between two versions of the page.
|
moby:frontend:01 [2020/07/14 19:28] 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 | ||
| + | |||
| + | |||
| + | |||
| + | **Spread Example** | ||
| - | const element = <h1>Hello, world!</h1>; | + | let arr1 = [1, -2, 3, 4]; |
| - | const element = ( | + | 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> ); | + | |
