This shows you the differences between two versions of the page.
moby:frontend:01 [2020/07/14 19:34] 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 = | + | const element = <h1>Hello, world!</h1> |
- | <h1>Hello, world!</h1> | + | |
- | const element = | + | const element = ( |
- | ( | + | |
<div> | <div> | ||
<h1>Hello!</h1> | <h1>Hello!</h1> | ||
<h2>Good to see you here.</h2> | <h2>Good to see you here.</h2> | ||
</div> | </div> | ||
- | ); | + | ); |
**Javascript** | **Javascript** | ||
Line 44: | Line 43: | ||
**Variabile si constante** | **Variabile si constante** | ||
- | let name = 'Oliver' | + | let name = 'Oliver'; |
- | name = 'Olivia' // ok | + | name = 'Olivia'; //ok |
- | const name = 'Oliver' | + | const name = 'Oliver'; |
- | name = 'Oliver' // error | + | name = 'Oliver'; // error |
**Tipuri de date** | **Tipuri de date** | ||
Line 70: | Line 70: | ||
**Rest Example** | **Rest Example** | ||
- | function sumAll(...args) { | + | function sumAll(...args) { |
- | // args is the name for the array | + | // args is the name for the array |
- | let sum = 0; | + | let sum = 0; |
- | for (let arg of args) sum += arg; | + | for (let arg of args) sum += arg; |
- | return sum; | + | return sum; |
- | } | + | } |
- | alert( sumAll(1) ); // 1 | + | alert( sumAll(1) ); // 1 |
- | alert( sumAll(1, 2) ); // 3 | + | alert( sumAll(1, 2) ); // 3 |
- | alert( sumAll(1, 2, 3) ); // 6 | + | alert( sumAll(1, 2, 3) ); // 6 |
Line 84: | Line 84: | ||
**Spread Example** | **Spread Example** | ||
- | let arr1 = [1, -2, 3, 4]; | + | let arr1 = [1, -2, 3, 4]; |
- | let arr2 = [8, 3, -8, 1]; | + | let arr2 = [8, 3, -8, 1]; |
- | alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25 | + | alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25 |