2. Function Expression (в том числе Arrow Function)

Функция сохраняется в переменную.

❌ Hoisting нет
❌ Нельзя вызвать до объявления
✅ Чаще всего используется в современном коде

// Обычная запись
const sayHello = function() {
  console.log("Привет из Expression!");
};

sayHello(); // Работает

👉 Итог для практики:

Declaration – удобно, когда нужна функция, доступная в любом месте файла (hoisting).

Expression / Arrow – используется чаще в современном коде (React, Node.js и т.д.), более гибкая форма.

🤔 Как передать данные из родительского компонента в дочерний?

Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.

🚩Шаги для передачи данных из родительского компонента в дочерний

1️⃣Создание родительского компонента
В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
Затем передаем эти данные в дочерний компонент через пропсы.

2️⃣Приём данных в дочернем компоненте
В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.

Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;

🚩Пояснение

1️⃣В родительском компоненте `ParentComponent`:
Создаем переменную message, содержащую строку "Привет, дочерний компонент!".
В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message.

2️⃣В дочернем компоненте ChildComponent:
Принимаем пропс message через параметр props.
Используем props.message для отображения переданной строки внутри тега <p>.

🚩Дополнительные примеры

Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;

Базу знаний

🤔В чём находятся значения функции?

Значения функции компонента React находятся в теле функции. В функциональных компонентах состояние, эффекты, переменные — всё управляется через хуки и находится внутри этой функции.

Забирай 📚 Базу знаний

full stack developement (

JavaScript (logic)

💯 Как взаимодействуешь с eventloop?

Event Loop (Цикл событий) – это механизм, который управляет выполнением кода, обработкой асинхронных задач и взаимодействием с Web API.

🛑Как мы взаимодействуем с Event Loop?

Используем асинхронный код: setTimeout, setInterval, fetch, Promise, async/await
Оптимизируем выполнение тяжелых задач
Управляем приоритетами выполнения (Microtask vs Macrotask)


🛑 Как работает Event Loop?
JavaScript выполняет код в однопоточном режиме, но может обрабатывать асинхронные задачи через очередь событий (Event Queue) и микрозадачи (Microtask Queue).

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

Вывод в консоли

1
4
3
2

🧐 Как использовал iframe?

- Встраивание видео, чартов, приложений.
- Для отдельной изоляции контента (например, 3rd party).
- Открытие внешних сайтов.

Забирай 📚 Базу знаний

👩‍💻 Всем программистам посвящается!

Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования:

Выбирай своё направление:

👩‍💻 Frontend — t.me/frontend_ready
📱 JavaScript — t.me/javascript_ready
👩‍💻 Backend — t.me/backend_ready
📱 GitHub & Git — t.me/github_ready
👩‍💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
🤖 Нейросети — t.me/neuro_ready
👩‍💻 C/C++ — https://t.me/cpp_ready
👩‍💻 C# & Unity — t.me/csharp_ready
👩‍💻 Java — t.me/java_ready
👩‍💻 Linux — t.me/linux_ready
🖼️ DevOps — t.me/devops_ready
📖 IT Книги — t.me/books_ready
👩‍💻 Весь IT — t.me/it_ready
👩‍💻 Bash & Shell — t.me/bash_ready
🖥 Design — t.me/design_ready

Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

cursors

🧐Как можно вставить svg в html документ?

Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript.

🛑Прямой (inline) SVG-код в HTML
Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

🛑Через тег `<img>`
Если SVG не нужно изменять, можно вставить его как обычное изображение.

<img src="image.svg" alt="Описание изображения" width="100" height="100">

🛑Через CSS background-image
SVG можно использовать как фоновое изображение.

<div class="icon"></div>

<style>
  .icon {
    width: 100px;
    height: 100px;
    background-image: url('image.svg');
    background-size: cover;
  }
</style>

🛑Через тег <object>
Позволяет загружать SVG-файлы и взаимодействовать с ними.

<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

🛑Через тег <iframe>
SVG можно загружать в iframe.

<iframe src="image.svg" width="100" height="100"></iframe>

🟠 Marsliklar, Hackathonga tayyormisiz?

Bir jamoa. Bir g‘oya. Bir imkoniyat.
Mars Hackathon 2025 start oldi — siz ham qatnashing!

Ro‘yxatdan o‘tish: 6-sentabrgacha

Saralash: 14-sentabr (filiallarda) — Final: 21-sentabr
Talab: Har jamoada aniq 4 nafar ishtirokchi (faqat Mars IT o‘quvchilari)
Shart: Jamoa nomi va logotip bo‘lishi majburiy

Sovrinlar va final yo‘llanmalari uchun kurash boshlandi — siz ham safimizga qo‘shiling!

Ro‘yxatdan o‘tish: Link