Быстрый старт на 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)

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