Что такое React Native

React Native похож на React, но он использует нативные компоненты вместо веб-компонентов в качестве строительных блоков. Итак, чтобы понять основную структуру приложения React Native, вам необходимо понять некоторые основные понятия React, такие как JSX, компоненты stateи props. Если вы уже знаете React, вам все равно нужно изучить некоторые специфические для React-Native вещи, такие как нативные компоненты.

Привет, мир

В соответствии с древними традициями нашего народа, мы должны сначала создать приложение, которое ничего не делает, кроме как сказать «Привет, мир!». Вот:

import React, { Component } from 'react';

import { Text, View } from 'react-native';

 

export default class HelloWorldApp extends Component {

  render() {

    return (

      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

        <Text>Hello, world!</Text>

      </View>

    );

  }

}

Если вам интересно, вы можете поиграть с примером кода прямо в веб-симуляторах. Вы также можете вставить его в свой App.jsфайл, чтобы создать настоящее приложение на локальном компьютере.

Что тут происходит?

Некоторые вещи здесь могут не выглядеть как JavaScript для вас. Не паникуйте. Это будущее .

Прежде всего, ES2015 (также известный как ES6) - это набор улучшений JavaScript, который теперь является частью официального стандарта, но еще не поддерживается всеми браузерами, поэтому часто он еще не используется в веб-разработке. React Native поставляется с поддержкой ES2015, так что вы можете использовать этот материал, не беспокоясь о совместимости. import, from, class, И extendsв приведенном выше примере все функции ES2015. Если вы не знакомы с ES2015, вы, вероятно, можете найти его, просто прочитав пример кода, как в этом руководстве. Если вы хотите, эта страница имеет хороший обзор функций ES2015.

Другая необычная вещь в этом примере кода <View><Text>Hello world!</Text></View>. Это JSX - синтаксис для встраивания XML в JavaScript. Многие фреймворки используют специальный язык шаблонов, который позволяет встраивать код в язык разметки. В React все наоборот. JSX позволяет писать язык разметки внутри кода. В Интернете он выглядит как HTML, за исключением того, что вместо таких вещей, как <div>или <span>, вы используете компоненты React. В данном случае <Text>это встроенный компонент, который просто отображает некоторый текст и Viewпохож на <div>или <span>.

Компоненты

Так что этот код является определяющим HelloWorldApp, новым Component. Когда вы создаете приложение React Native, вы будете много создавать новые компоненты. Все, что вы видите на экране, является своего рода компонентом. Компонент может быть довольно простым - единственное, что требуется, - это renderфункция, которая возвращает JSX для рендеринга.

У вас нет прав для комментирования.

JComments