Читать книгу React Native w akcji - Nader Dabit - Страница 53

Zanim przejdziemy dalej, warto zajrzeć do załącznika tej książki, aby sprawdzić, czy mamy zainstalowane niezbędne narzędzia na swoim komputerze. Jeśli nie mamy zainstalowanych wymaganych SDK, nie będziemy mogli kontynuować budowania pierwszego projektu za pomocą React Native CLI.

Aby rozpocząć pracę z React Native CLI i pierwszym projektem React Native, otwórzmy wiersz poleceń, a następnie utwórzmy pusty katalog i przejdźmy do niego. Gdy już tam będziemy, zainstalujmy React Native CLI, wpisując następujące polecenie:

npm install -g react-native-cli

Po zainstalowaniu React Native CLI na komputerze możemy zainicjować nowy projekt, wpisując react-native init, a następnie nazwę projektu:

react-native init nazwaProjektu

nazwaProjektu może być dowolną nazwą, jaką wybierzemy. Interfejs CLI uruchomi wówczas nowy projekt w tym katalogu, w którym się znajdujemy. Otwórzmy projekt w edytorze tekstu.

Najpierw spójrzmy na główne pliki i foldery, które ten proces wygenerował:

 ■ android – ten folder zawiera kod i zależności specyficzne dla platformy Android. Nie musimy wchodzić do tego folderu, chyba że wdrożymy niestandardowy most do Androida lub zainstalujemy wtyczki, które wymagają pewnego rodzaju dodatkowej konfiguracji.

 ■ ios – ten folder zawiera kod i zależności specyficzne dla platformy iOS. Nie musimy wchodzić do tego folderu, chyba że wdrożymy niestandardowy most do iOS-a lub zainstalujemy wtyczki, które wymagają pewnego rodzaju dodatkowej konfiguracji.

 ■ node_modules – do zarządzania zależnościami React Native używa npm (node package manager). Te zależności są identyfikowane i wersjonowane w pliku .package.json oraz przechowywane w folderze node_modules. Gdy zainstalujemy nowe pakiety z ekosystemu npm/node, trafią one tutaj. Można je zainstalować przy użyciu npm lub yarn.

 ■ .flowconfig — Flow (również udostępniony przez Facebooka) oferuje sprawdzanie typów dla JavaScriptu. Dla osób zaznajomionych z Typescript Flow jest do niego podobny. Jeśli zdecydujemy się go użyć, to ten plik będzie zawierał jego konfigurację.

 ■ .gitignore – miejsce do przechowywania ścieżek plików, których nie chcemy mieć w systemie kontroli wersji.

 ■ .watchmanconfig — Watchman to narzędzie, którego React Native używa do monitorowania plików i rejestrowania ich zmian. Tu znajduje się konfiguracja dla Watchmana. Żadne zmiany w tym miejscu nie są potrzebne, z wyjątkiem rzadkich przypadków użycia.

 ■ index.js – to punkt wejścia aplikacji. W tym pliku jest importowane App.js i wywoływane AppRegistry.registerComponent, inicjujące aplikację.

 ■ App.js – to domyślny import główny używany w pliku index.js zawierającym podstawowy projekt. Można to zmienić, usuwając ten plik i zastępując główny import w pliku index.js.

 ■ package.json – ten plik zawiera konfigurację npm. Kiedy za pomocą npm instalujemy pliki, możemy zapisać je tutaj jako zależności. Możemy także skonfigurować skrypty do uruchamiania różnych zadań.

Poniższy listing przedstawia App.js.

Listing 1.6 App.js

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, { Component } from 'react';

import {

Platform,

StyleSheet,

Text,

View

} from 'react-native';

const instructions = Platform.select({

ios: 'Press Cmd+R to reload,\n' +

'Cmd+D or shake for dev menu',

android: 'Double tap R on your keyboard to reload,\n' +

'Shake or press menu button for dev menu',

});

export default class App extends Component<{}> {

render() {

return (

<View style={styles.container}>

<Text style={styles.welcome}>

Welcome to React Native!

</Text>

<Text style={styles.instructions}>

To get started, edit App.js

</Text>

<Text style={styles.instructions}>

{instructions}

</Text>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

},

...

Ten kod wygląda bardzo podobnie do omówionego wcześniej. Jest kilka nowych elementów, o których jeszcze nie wspomnieliśmy:

StyleSheet

Platform

Platform to API, który pozwala wykryć bieżący system operacyjny, na którym pracujemy: web, iOS lub Android.

StyleSheet to abstrakcja jak arkusze stylów CSS. W React Native możemy zadeklarować style jako wbudowane (inline) lub przy użyciu arkuszy stylów. Jak widać, w pierwszym widoku został zadeklarowany styl kontenera:

<View style={styles.container}>

Odpowiada to bezpośrednio:

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

}

Na dole pliku index.js możemy zobaczyć:

AppRegistry.registerComponent('myProject', () => App);

Jest to punkt wejścia JavaScriptu do uruchamiania wszystkich aplikacji React Native. W pliku index jest to jedyne miejsce, w którym wywołujemy tę funkcję. Główny komponent aplikacji powinien zarejestrować się za pomocą AppRegistry.registerComponent. Natywny system może następnie załadować pakiet aplikacji i uruchomić ją, gdy będzie gotowa.

Po przejrzeniu zawartości pliku uruchommy projekt w symulatorze iOS lub emulatorze Androida (patrz rys. 1.4). W elemencie tekstowym zawierającym „Welcome to React Native!” wpiszmy „Welcome to Hello World!” lub inny wybrany tekst. Odświeżmy ekran i powinniśmy zobaczyć zmiany.

Rysunek 1.4. Pierwszy projekt React Native: to powinniśmy zobaczyć po uruchomieniu projektu w emulatorze

Podsumowanie

 ■ React Native to framework do tworzenia natywnych aplikacji mobilnych w języku JavaScript przy użyciu biblioteki React.

 ■ Do mocnych stron React Native należą: wydajność, doświadczenia programistyczne, możliwość budowania rozwiązań wieloplatformowych w jednym języku, jednokierunkowy przepływ danych oraz społeczność. Języki natywne warto brać pod uwagę głównie ze względu na ich wydajność, natomiast React Native – głównie ze względu na doświadczenia programistyczne i możliwości korzystania z różnych platform w jednym języku.

 ■ JSX jest krokiem preprocesora, który do JavaScriptu dodaje składnię podobną do XML. Za pomocą JSX można utworzyć interfejs użytkownika w React Native.

 ■ Komponenty są podstawowymi elementami składowymi React Native. Mogą różnić się funkcjonalnością i rodzajem. Można tworzyć niestandardowe komponenty w celu wdrożenia pożądanych elementów projektu.

 ■ Komponenty wymagające stanu lub metod cyklu życia należy utworzyć za pomocą klasy JavaScriptu, rozszerzając klasę React.Component.

 ■ Komponenty bezstanowe można tworzyć przy użyciu mniejszej ilości kodu, ponieważ nie muszą one obsługiwać własnego stanu.

 ■ Większe komponenty można tworzyć, łącząc mniejsze elementy.