React. Intro

React

Теми

1. Що таке React
2. Навчимося створювати застосунки
3. Компоненти
4. JSX

React

JavaScript - бібліотека для створення користувацьких інтерфейсів.

Реакт дає змогу створити абстракцію навколо верстки. Тобто ви, замість того щоб працювати з примітивами рівня HTML, оперуєте окремими частинами застосунку (компонентами) й указуєте, що ви хочете бачити, а не покроково описуєте, як це має виглядати.

Компоненти

Компоненти дозволяють розділити інтерфейс на незалежні частини, про які легко думати окремо один від одного. Їх можна компонувати разом і використовувати кілька разів.

Загалом компоненти поводяться себе, як звичайні функції JavaScript. Вони приймають вхідні дані (які називаються "props") та повертають React-елементи, які описують те, що ми хочемо побачити на екрані.

Переваги

• Повторне використання компонентів

Створення застосунку.

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

            npx create-react-app my-app // npx - утиліта для запуску npm-пакетів.
            cd my-app // переходимо в папку створенного застосунку
            npm start // запускаємо застосунок
        

Структура проекту:

• src - в цій папці будуть всі нащі компоненти
• public - в цій папці зберігається наш шаблон html сторінки
• build - в цю папку білдиться фінальний бандл

JSX

JSX — це розширення мови JavaScript (синтаксичний цукор), яке нагадує шаблонну мову, але наділене можливостями JavaScript. Завдяки JSX описувати UI компоненти стало набагато простіше.

JSX компілюється за допомогою Babel у React.createElement().

Як відрендерити компонент

            ReactDOM.render(
              <h1>Hello, World!</h1>, // react-елемент
              document.getElementById('root')
            );
             
            ReactDOM.render(
              createElement('h1', {}, 'Hello, World!'), // react-елемент
              document.getElementById('root')
            );
        

const element = <h1>Hello, World</h1> - react-елемент.

            {
              type: 'h1',
              props: {
                children: 'Hello, World!'
              }
            };
        

На відміну від DOM-елементів, елементи React — це прості об'єкти, які не використовують багато ресурсів. ReactDOM оновлює DOM, щоб він відповідав переданим React-елементам.

Функціональні компоненти

            function Welcome(props) {
              return <h1>Привіт, {props.name}</h1>
            }
        

Ця функція є компонентом, тому що отримує дані в одному об’єкті («пропси») як параметр і повертає React-елемент. Ми називатимемо такі компоненти «функціональними», оскільки вони і є звичаними функціями.

Классовые компоненты

Ще компоненти можна визначати як класи ES6:

            class Welcome extends React.Component {
              render() {
                return <h1>Привет, {this.props.name}</h1>
              }
            }
        

Як створити власний компонент

Поки що ми лише зустрічали React-елементи, які представляють собою DOM-теги:

const element = <div />

Але елементи можуть описувати й наші власні компоненти:

const element = <Welcome name="Тарас" />

Пропси

Коли React зустрічає подібний елемент, він збирає всі JSX-атрибути та дочірні елементи в один об'єкт (props) і передає їх нашому компоненту.

            function Welcome(props) {
              return <h1>Привет, {props.name}</h1>
            }
            ReactDOM.render(<Welcome name="Тарас" />, ...)
        

Нюанси

• Оскільки JSX компілюється у виклики функції React.createElement, бібліотека React завжди має знаходитися в області видимості вашого коду JSX. import React from 'react';
• Велика літера - означає, що це компонент і React буде шукати цю функцію в поточній області видимості. <Welcome/>
• Маленька літера - dom-елемент <div/>, <p/>, <ul/>, ...

• Використання запису через крапку .

                      const List = {
                        Ordered: (props) => <ol>{props.children}</ol>,
                        Unordered: (props) => <ul>{props.children}</ul>,
                        Item: (props) => <li>{props.children}</li>,
                      }
                       
                      <List.Unordered>
                        {items.map((item, index) =>
                          <List.Item key={index}>{item}>/List.Item>
                        )}
                      </List.Unordered>
                  

Обʼєкт props в JSX

• JavaScript-вирази як проп.
  <MyComponent foo={1 + 2 + 3 + 4} />
• Як рядок
  <MyComponent message="Слава Україні!" />
  <MyComponent message={'Героям Слава!'} />

• Інструкції if або цикли for не є виразами в JavaScript, тому їх не можна використовувати безпосередньо в JSX.

                      function NumberDescriber(props) {
                        let description;
                        if (props.number % 2 == 0) {
                          description = <strong>even</strong>
                        } else {
                          description = <i>odd</i>
                        }
                        return <div>{props.number} - це {description} число</div>
                      }
                  

• Встановлення пропсів за замовчуванням у true
  <button disabled />
  <button disabled={true} />
• Spread – атрибути

                      const Button = (props) => {
                        const { type, ...otherProps } = props;
                        const className = type === "primary" ? "PrimaryBtn" : "SecondaryBtn";
                        return <button className={className} {...otherProps} />
                      };
                  

• Booleans, Null и Undefined ігноруються

                      <div />
                      <div></div>
                      <div>{null}</div>
                      <div>{undefined}</div>
                      <div>{false}</div>
                      <div>{true}</div>
                  

• Коментарі

                      <p>{/* Це коментар */}</p>
                  

• Парний / не парний тиг

                      <p>Hello, World!</p>
                      <p children='Hello, World!' />
                  

• Зображення

                      import img from './picture.png';
                      <img src={img} alt=""/>
                       
                      <img src="https://some/url/to/picture.png" alt=""/>
                  

Children (дочірні елементи)

• Декілька Компонентів

                      <MyContainer />
                        <MyFirstComponent />
                        <MySecondComponent />
                      </MyContainer>
                  

• JavaScript-вирази як дочірні елементи
  <MyComponent>{'Привіт!'}</MyComponent>

• Динамічне створення дочірніх елементів

  Ключі допомагають React визначати, які елементи були змінені/додані/видалені, і перерендерити лише ті DOM-елементи, які змінилися.

                      const users = [{ id: '1', name: 'Lesia' },{ id: '2', name: 'Taras' }];
                      <List>
                        {users.map((user) => {
                          return <ListItem key={user.id}>{user.name}</ListItem>
                        })}
                      </List>
                  

Переваги

• Повторне використання компонентів
• Простота (завдяки JSX);
• Модульність

Як використовувати стилі

                /** ./style.css */
                 
                .blockElem {
                  margin-left: 100px;
                }
            

                /** ./App.js */
                 
                function App() {
                  return (
                    <div className='blockElem'>
                      <List />
                    </div>
                  )
                }
            

Links: