3 записи с тегом "javascript"

А вы знали? 📢

Вы можете легко добавлять уведомления в свои веб-приложения, используя ванильный JavaScript без каких-либо библиотек. 💻

Вот простой пример кода.

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    new Notification("привет, мир!");
  }
});

К сожалению, пользователь должен включить уведомление, прежде чем оно будет показано.

Браузер автоматически предложит пользователю принимать уведомления от вашего веб-приложения при выполнении метода requestPermission. 📬

[Официально] Использование фреймворка React Native, такого как Expo, в настоящее время является рекомендуемым способом создания новых приложений React Native. 📱​

Kурс по Expo (React Native)​

Посмотреть на канале. 🎓

👤 Мое мнение об Expo и React Native

Я предпочитаю Expo (React Native) для разработки мобильных приложений и рекомендую его другим. 👍

Если вы хотите взглянуть на React Native, прочтите этот пост.

Многие разработчики ошибочно полагают, что компании используют React Native из-за его дешевизны, но многие богатые компании также полагаются на него, в том числе:

• Meta (Instagram, Messenger)
• Discord (основное приложение)
• Microsoft (Teams, Outlook)
• Tesla (основное приложение)

Если вы начинаете заниматься мобильной разработкой, я настоятельно рекомендую учить Expo (React Native). 📚

Для тех, кто не в курсе:

Expo (React Nativea) - это кроссплатформенный фреймворк, позволяющий создавать Android, iOS, а иногда и веб-приложения с использованием единой кодовой базы. Он использует систему компонентов, аналогичную React, но без DOM. 🌐

В чем разница между React Native и Expo?​

React Native

React Native - это фреймворк, разработанный Facebook, который позволяет разработчикам создавать мобильные приложения с использованием JavaScript и React. Он позволяет создавать по-настоящему нативные приложения путем прямой визуализации компонентов с использованием собственных API.

Expo

Expo - это фреймворк и платформа, построенные на базе React Native. Она призвана упростить процесс разработки, предоставляя набор инструментов и сервисов, которые "из коробки" решают многие распространенные задачи. Expo можно рассматривать как управляемый рабочий процесс для приложений React Native.

Kурс по Expo (React Native)​

Знакомство с React Native​

В этом посте я хочу, чтобы вы просто бегло ознакомились с React Native и поняли некоторые принципы и то, как он работает, а также посмотрели на некоторый код.

Для тех, кто не знает. React Native — кроссплатформенный фреймворк с открытым исходным кодом для разработки нативных мобильных и настольных приложений на JavaScript и TypeScript, созданный Facebook Подробнее.

В React Native используются те же функции, что и в React. Основное различие заключается в DOM и стилизации.

Примеры кода​

Вот простой пример xука useState в React

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми на меня!</button>
    </div>
  );
};

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

тот же пример useState, но в React Native

import React, { useState } from "react";
import { View, Text, Button, StyleSheet } from "react-native";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>Вы нажали {count} раз</Text>
      <Button onPress={() => setCount(count + 1)} title="Нажми на меня!" />
    </View>
  );
};

// Стили React Native
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Разница между React и React Native​

Как вы можете видеть, основное различие заключается в стиле, потому что React Native не использует HTML и CSS

Все основные компоненты React Native поддерживают опцию с именем style. Названия и значения стилей обычно соответствуют тому, как работает CSS в Интернете, за исключением того, что названия написаны с использованием верблюжьего регистра (CamelCase), например, backgroundColor, а не background-color.

Заключение​

Этот пост - всего лишь небольшое введение в React Native. Если вы хотите создавать мобильные приложения в React Native, я рекомендую вам посмотреть курс, который я выложил в нашем telegram-канале.

Kурс по Expo (React Native)​

Посмотреть на канале. 🎓