9 Rzeczy, Które Musisz Wiedzieć Zanim Zaczniesz Uczyć Się React.js

React.js to obecnie jeden z najpopularniejszych frameworków Javascript. Jest często wybierany wśród Juniorów, między innymi dlatego, że ma niski próg wejścia. Mimo to wielu początkujących Frontend Developerów popełnia jeden znaczący błąd.

Rozpoczynają naukę React.js zaraz po zrozumieniu podstaw Javascript. Wielu z nich nawet nie wie, czym jest ES6 i co wprowadził do Javascript.

Powoduje to problemy ze zrozumieniem React.js i znacznie utrudnia cały proces nauki.

Poniżej znajdziesz zagadnienia, które moim zdaniem pozwolą Ci wejść w świat React.js bez obaw. Jeśli tylko się ich nauczysz nie będzie stanowił dla Ciebie większego problemu.

Arrow Functions

Funkcje strzałkowe, to nowość wprowadzona w ES6. Jest to nic innego jak nowy sposób zapisu deklaracji funkcji. W dzisiejszych czasach częściej spotkamy właśnie taki zapis:

// klasyczna deklatacja funkcji
const myFunction = function() {
  // code
}

// arrow function
const myFunction = () => {
  // code
}

Arrow function pozwala nam pisać funkcje przy użyciu znacznie krótszej i czytelniejszej składni.

Nawiasy są nadal używane do przekazywania parametrów funkcji, a jeśli jest tylko jeden parametr, można je pominąć.

const myFunction = (a, b) => {
  return a + b;
}

const myFunction = a => {
  return a * 2;
}

A jeśli zadaniem naszej funkcji jest tylko zwrócenie wartości, tak jak w przypadku funkcji powyżej, możemy to zrobić pomijając słowo return:

const myFunction = (a, b) => a + b;

const myFunction = a => a * 2;

const myObject = {
  function1: () => {
    console.log(this); // obiekt Window
  },
  
  function2: function() {
    console.log(this); // obiekt myObject
  }
};

myObject.function1();
myObject.function2();

Destructuring

Jedna z najbardziej użytecznych składni wprowadzonych w ES6. Pozwala na szybszy i prostszy dostęp do zmiennych z tablic i obiektów.

// Stary sposób
const user = {
  name: 'John Doe',
  age: 26
};

const name = user.name; // 'John Doe'
const age = user.age; // 26

// Destructuring
const { name, age } = user; // name = 'John Doe', age = 26

Lub przy użyciu tablic:

// Stary sposób
const numbers = [1, 2, 3];

const firstNumber = numbers[0]; // 1
const secondNumber = numbers[1]; // 2
const thirdNumber = numbers[2]; // 3

// Destructuring
const [firstNumber, secondNumber, thirdNumber] = numbers; // 1, 2, 3

Znacznie prościej, co nie? W React.js będziesz z tego korzystał tak naprawdę w większości plików, więc poświęć chwilę, aby zrozumieć, w jaki sposób to działa.

Spread operator

Spread operator mam wrażenie, że ciężko jest opisać słowami. Postaram się to zrobić, ale wystarczy, że się nim pobawisz, a z pewnością zrozumiesz o co chodzi.

A więc tak, bazując na poniższym przykładzie:

const car = { model: 'BMW M2'};
const carDetails = { color: 'red' };

const summary = {...car, ...carDetails};
// {model: 'BMW M2', color: 'red'}

Spread operator pozwala "rozprowadzić" obiekt iterowalny (obiekt/tablica). W tym przykładzie łączy dwa obiekty w jeden.

Przejdźmy do następnego przykładu, tym razem na tablicach:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const summary = [...array1, ...array2];
// [1, 2, 3, 4, 5, 6]

Rest operator

Jest to dosłownie odwrotność Spread Operatora. Używamy go między innymi, aby przechować wiele argumentów funkcji jako jeden parametr:

function myFunction(...args) {
  console.log(args); // [1, 'a', 3, 'b']
}

myFunction(1, 'a', 3, 'b');

Template literals

Template literals to nic innego jak inny sposób łączenia stringów z wartościami:

const name = 'Mati';

// Stary sposób
console.log('Hello ' + name + '!') // Hello Mati!

// Nowy
console.log(`Hello ${name}!`) // Hello Mati!

Ternary operator

Kolejna prosta rzecz - jest to najzwyklejszy if & else, tylko w prostszym zapisie:

// Old
if(a > 0) {
 return a;
}
else {
  return a + 1;
}

// New
return a > 0 ? a : a + 1

A dokładniej:

a > 0 - jest to if(a > 0)
? a - jeśli spełnia warunek zwróć a
: a + 1 - jeśli nie spełnia warunku (else) zwróć a + 1

Najciężej jest przyzwyczaić się do tej składni, jednak, gdy już to opanujesz będziesz jej używał wszędzie 😅

Nullish operator

Jest to operator logiczny, który zwraca to co jest po jego lewej stronie, tak długo, dopóki nie jest to null, lub undefined, wtedy zwraca to, co jest po prawej stronie:

const myNumber = 1 ?? 3 // 1
const myNumber = null ?? 3 // 3
const myNumber = undefined ?? 3 // 3
const myNumber = 1 ?? null // 1

Array.map()

Najczęściej używana metoda na tablicach w React.js. Pozwala na iterowanie po elementach tablicy i zwraca wynik wywołania funkcji na każdym z nich.

[1, 2, 3, 4].map( num => num * 2 ) // [2, 4, 6, 8]

W React.js służy głównie do renderowania wielu elementów jednocześnie, na przykład:

const names = [ 'Tom', 'Jake', 'Bob' ];

return(
  <>
    {names.map(name => (
      <p>{name}</p>
    ))}
  </>
);

// Wynikiem czego będzie
<p>Tom</p>
<p>Jake</p>
<p>Bob</p>

Optional chaining

Optional chaining jest bezpiecznym sposobem dostępu do zagnieżdżonych właściwości obiektów. Spójrz na tą przykładową tablicę obiektów:

let users = [
  {
    name: "Adam",
    hobbies: {
      hobby1: "random hobby",
    }
  },
  {
    name: "Mike",
    age: 56
  }
];

Jeśli w tym momencie chcielibyśmy wyświetlić pierwsze hobby wszystkich userów, zrobilibyśmy coś takiego:

users.forEach( user => {
  console.log(user.hobbies.hobby1);
} );

W konsoli zobaczylibyśmy:

random hobby
Uncaught TypeError: Cannot read properties of undefined (reading 'hobby1')

Ten błąd jesteśmy w stanie naprawić właśnie za pomocą Optional chaining:

users.forEach( user => {
  console.log(user?.hobbies?.hobby1);
} );

Co wyświetli:

random hobby
undefined

Podsumowanie

Oto moim zdaniem minimum, które musisz znać, zanim zaczniesz uczyć się React.js.

Jeśli chcesz lepiej się przygotować sprawdź wszystkie rzeczy, które wprowadziła wersja Javascript nazywana - ES6.

Nauka Vanilla Javascript przed frameworkami jest kluczowa, szczególnie na początku Twojej kariery, a dlaczego dowiesz się w tym artykule.