Від основ JavaScript до майстерності в React: ключові концепції, які ви повинні знати

Перехід від JavaScript до React може здатися великим кроком, але з міцним розумінням основних концепцій це простіше, ніж здається. У цій статті ми розглянемо важливі теми з JavaScript — DOM, імпорт/експорт, тернарні оператори, опціональне ланцюгування та шаблонні рядки — і як вони готують основу для розробки в React.

Роль DOM: за лаштунками вашої веб-сторінки

Модель об'єкта документа (DOM) — це спосіб, яким ваш браузер представляє веб-сторінку. Вона дозволяє JavaScript динамічно змінювати елементи, стилі або атрибути.

Наприклад, ви можете додати прослуховувач подій (Event Listener) до кнопки так:

const button = document.querySelector("button");  
button.addEventListener("click", () => {  
 alert("Кнопка натиснута!");  
});

В React, замість того щоб безпосередньо маніпулювати DOM, ви працюєте з віртуальним DOM, який є легким абстрактним представленням. React відповідає за ефективне оновлення лише змінених частин вашого інтерфейсу.

Розуміння імпорту та експорту для модульного коду

Якщо проекти зростають, організація вашого коду на повторно використовувані частини стає необхідною. Ось тут і вступають в гру import і export.

Приклад JavaScript:

// utils.js  
export const greet = (name) => `Привіт, ${name}!`;  
// main.js  
import { greet } from "./utils.js";  
console.log(greet("Аліса"));

Приклад React:

Компоненти React використовують такий самий модульний підхід:

// Header.js  
const Header = () => 
Welcome to React
;   export default Header;   // App.js   import Header from "./Header";   const App = () => (    
   );   export default App; ```  Ви можете використовувати `export default` для одного основного експорту на файл або іменовані експорти для кількох елементів.  

## Спрощення логіки з тернарними операторами

**Тернарний оператор** є компактною альтернативою умовам `if-else` в JavaScript.

### Приклад JavaScript:

const age = 18;
const message = age >= 18 ? "Ви можете голосувати" : "Ви не можете голосувати";
console.log(message);
```

Приклад React:

У React тернарні оператори ідеально підходять для умовного рендерингу:

const isLoggedIn = true;   
const App = () => (    
    {isLoggedIn ? 
Welcome back!
 : 
Please log in.
}    
   ); 

Це дозволяє зберігати ваш код чистим і легким для читання.

Опціональне ланцюгування: захист для вашого коду

Чи стикалися ви з помилками "неможливо прочитати властивість undefined"? Опціональне ланцюгування (?.) запобігає таким аваріям, дозволяючи безпечно звертатися до вкладених властивостей.

Приклад JavaScript:

const user = {    
  name: "Аліса",    
  preferences: {    
    theme: "dark",    
  },   
};   
console.log(user.preferences?.theme); // "dark"   
console.log(user.settings?.notifications); // undefined, помилки немає

Приклад React:

React часто працює з вкладеними даними, тому опціональне ланцюгування дуже корисне:

const UserProfile = ({ user }) => (    
Name: {user?.name}    
Theme: {user?.preferences?.theme || "default"}   
); 

Такий підхід дозволяє уникнути помилок під час виконання, коли дані відсутні або невизначені.

Робота зі змінними за допомогою шаблонних рядків

Прощавай, громіздке з’єднання рядків! Шаблонні рядки дозволяють вам легко вбудовувати змінні та вирази у рядки.

Приклад JavaScript:

const name = "Аліса";   
const greeting = `Привіт, ${name}!`;   
console.log(greeting); // "Привіт, Аліса!"

Приклад React:

Шаблонні рядки особливо корисні в JSX:

const name = "Аліса";   
const Welcome = () => 
{`Ласкаво просимо, ${name}!`}
; 

Чи ви налаштовуєте повідомлення, чи рендерите динамічні дані, шаблонні рядки роблять ваш код чистим та виразним.

Розвиток навичок React на основі міцного фундаменту JavaScript

React надає розробникам можливість створювати потужні інтерфейси користувача, але його магія полягає в використанні основ JavaScript. Розуміння DOM, модульного коду з імпортом/експортом, чистої логіки з тернарними операторами та ефективної обробки даних з опціональним ланцюгуванням готує вас до успіху в розробці на React.

Перекладено з: From JavaScript Basics to React Mastery: Key Concepts You Should Know