Путешествие с React Native и NestJS [1 / X]

В этом приключении мы увидим, как создать кулинарную книгу.

Я не теряю времени, рассказывая вам, что такое React Native или NodeJS. Я уверен, что есть много сообщений среднего размера, объясняющих, что это за два. Однако я уверен, что некоторые из вас не знают о NestJS. Надеюсь, вы узнаете что-нибудь от меня, прочитав этот средний пост!

Итак, приступим к делу!

Инициализировать React Native с помощью expo

Прежде всего, что такое экспо? Expo - это своего рода верхний уровень для React Native, предоставляющий библиотеки и инструменты, помогающие разработчикам разрабатывать, создавать и развертывать свои приложения React Native.

Прежде всего убедитесь, что на вашем компьютере установлен узел с версией узла выше 10.0.0. (Вы можете установить его здесь).

Теперь нам нужно установить expo-cli, который позволит нам легко создать проект RN, запустить его локально и опубликовать.

$ npm install -g expo-cli

Затем нам нужно будет запустить наш проект с помощью этой команды:

$ expo init cookbook

expo-cli, задавая вам несколько вопросов:
- 1-й: выберите пустой (TypeScript) проект
- 2-й: введите имя вашего приложения
- 3-й: введите n + enter, чтобы не использовать Пряжа (я очень люблю за это npm)

Примечание. Если команда заблокирована во время «Установка зависимостей…», не паникуйте, вы все равно можете остановить ее с помощью Ctrl + C, удалить ваши node_modules и выполнить npm install.

Теперь вы можете перейти в репозиторий проекта React Native (если вы забыли, как это сделать: $ cd cookbook) и запустить приложение в браузере с помощью:

$ npm run web

Чтобы запустить его в браузере, вам потребуется последняя версия expo-cli, поэтому, если у вас есть журнал такого типа: error: unknown option '--web-only' y, возможно, вам потребуется установить последнюю версию.

Перейдите к localhost:19006, и вы получите это. Поздравляем, вы сделали первую часть!

Источники:
https://facebook.github.io/react-native/docs/0.59/getting-started

Если у вас возникли проблемы с использованием параметров туннеля или локальной сети, это может быть связано с вашим брандмауэром или вашим интернет-провайдером. Expo использует ngrok, сервис, создающий безопасные и интуитивно понятные туннели к localhost. Но он использует порт, который могла быть заблокирована политикой вашей компании.

Запустите свой сервер с помощью NestJS

Инициировать проект NestJS очень просто. Все, что вам нужно сделать, это установить nest-cli и создать новый проект с помощью этих всего двух команд:

$ npm i -g @nestjs/cli
$ nest new project-name

Вам нужно будет ответить на 1 вопрос:
- выберите «npm» (вы знаете почему)

Все, что вам теперь нужно сделать, это запустить свой сервер:

$ cd project-name
$ npm run start

Затем перейдите к localhost:3000, и вы увидите чудесное сообщение «Hello World!» (Как необычно)! Молодец, вы только что завершили вторую часть урока, вы лучший! 👍

Источник: https://docs.nestjs.com/

Отображение HTTP-ответа в вашем приложении React Native

Что ж, у нас есть одно приложение React Native и один сервер, работающие отдельно, давайте заставим их взаимодействовать друг с другом. Все, что мы сейчас хотим сделать, это отобразить исходное сообщение «Hello World!» В нашем приложении React Native.

Для этого нам нужно обновить наш App.tsx. Этот файл является файлом входа для нашего приложения React Native, который обрабатывается сразу после app.json. Мы откопаем эти файлы позже, а пока давайте сосредоточимся на нашем запросе.

Вот так сейчас выглядит наш App.tsx

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

React, как и другие фреймворки Javascript (Angular, VueJS), работает с компонентами (подробнее о компонентах Javascript см. Здесь). У нас есть то, что похоже на HTML. На самом деле это JSX, синтаксис для встраивания XML в JavaScript. Я расскажу о нем в другом посте, но вы все равно можете узнать о нем подробнее здесь. У нас также есть CSS, который мы применяем к JSX.

Перед выполнением нашего HTTP-вызова нам нужно будет изучить жизненный цикл компонента React.

В этой главе мы сосредоточимся на этапах инициализации и монтирования:
• 1-й: React установит свойства и состояния. Свойства похожи на @Input в Angular. Вы передаете свойства от компонента его дочернему элементу и получаете их следующим образом:

constructor(props: any) {
  this.state = { isLoading: true};
}

Состояния используются для хранения данных для вашего текущего компонента, поэтому вам придется использовать this.setState().
• 2nd: componentWillMount() Я почти уверен, что вы понимаете, что каждая строка Javascript, которую вы вставляете в этот метод будет выполнен до того, как React отобразит страницу JSX.
• 3-й: метод render() отобразит JSX-содержимое вашего компонента. Вы можете добавить условия для отображения содержимого JSX или другого (мы увидим это позже), поэтому вы хотите обернуть свой JSX этим методом.
• 4-й: наконец componentDidMount(), как и 2-й, каждая строка кода внутри этого метода будет выполняться после монтирования компонента (после рендеринга).

Итак, прежде всего, давайте сделаем наш класс более похожим на компонент React. Давайте изменим наш App.tsx:

export default class App extends React.Component<IMyComponentProps, IMyComponentState> {
 …
}

Поскольку мы используем Typescript, нам нужно объявить, как выглядят наши объекты prop и state. Итак, над объявлением нашего класса мы добавим это:

interface IMyComponentProps {} // we don’t use props for this case.
interface IMyComponentState {
 isLoading: boolean,
 dataSource?: string
}

Теперь давайте добавим наш конструктор (выполнявшийся до render()), который похож на метод componentWillMount(), и по какой-то непонятной причине (реагирующие разработчики знают почему) мы будем использовать конструктор вместо другого. Я оставляю вам этот ответ StackOverflow здесь.

constructor(props: any) {
 super(props);
 this.state = { isLoading: true};
}

Наследовать реквизиты от родителя сейчас бесполезно, потому что мы находимся в корне нашего приложения, но, похоже, это хорошая практика, поэтому мы оставим это здесь. В нашем конструкторе мы устанавливаем значение состояния в true, это будет использоваться в нашем рендере для отображения экрана загрузки, ожидающего ответа HTTP.

render(){
  if(this.state.isLoading){
    return(
      <View style={{flex: 1, padding: 20}}>
        <ActivityIndicator/>
      </View>
    )
  }
  
  return (
    <View style={styles.container}>
      <Text>{this.state.dataSource}</Text>
    </View>
  );
}

Вот как выглядит наш render(), пока мы не получим наш HTTP-ответ, мы будем отображать элемент загрузки <ActivityIndicator/>. Чтобы использовать его, нам нужно импортировать этот элемент из React Native:

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

Наконец, мы напишем наш HTTP-вызов в componentDidMount():

componentDidMount(){
  return fetch('http://localhost:3000')
    .then((response) => response.text())
    .then((responseString) => {
      this.setState({
        isLoading: false,
        dataSource: responseString
      });
    })
  .catch((error) =>{
    console.error(error);
  });
}

Мы используем fetch для выполнения нашего HTTP-запроса, для этого примера я не устанавливаю адрес сервера в переменной среды или реквизитах, мы увидим, как это сделать, в другом посте с режимами разработки и производства. .

Пока мы получаем наш ответ, который представляет собой строку, мы извлекаем только ядро тела с помощью response.text(). Если ответ был объектом JSON, мы напишем это вместо response.json(). Теперь, когда мы получили ответ HTTP, мы можем установить для isLoading значение false, а значение, которое мы получаем для dataSource, и отображать его в части JSX благодаря привязке данных.

Теперь вы можете перезапустить свой собственный проект реакции с помощью expo start --web или expo start --web-only, чтобы увидеть результат.

Это не то, чего мы ожидали, но мы можем легко это исправить, не волнуйтесь. Проблема здесь в том, что ваш сервер получает запрос с того же IP-адреса, что и он. Это предотвращает необычный запрос. Чтобы избежать такой ошибки, все, что нам нужно сделать, это добавить строку в наш main.ts на вашем сервере NestJS:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

А теперь перезапустим сервер и перезагрузим страницу:

МЫ ДЕЛАЕМ ЭТО! Я так горжусь тобой !

Здесь полный App.tsx на всякий случай. В следующий раз мы увидим, как отобразить список рецептов в нашем приложении React Native, от создания схемы mongodb, создания класса мангуста и маршрутов на нашем сервере до отображения наших рецептов впереди.

На этом все, спасибо, что прочитали этот пост, надеюсь, он вам помог!

Путешествие с React Native и NestJS [1 / X]