Zimne nurkowanie w React Native (samouczek dla początkujących)

Kiedy ogłoszono React Native, pierwsze reakcje były zdecydowanie pozytywne. Tradycyjnie, gdy myślimy o technologiach webowych w przestrzeni mobilnej, na myśl przychodzą nam takie rzeczy jak Apache Cordova, które pozwalają nam pakować strony lub aplikacje webowe jako aplikacje na platformy mobilne. W tym samouczku dla początkujących przyjrzymy się architekturze React Native, filozofii stojącej za React Native i tym, jak różni się on od innych rozwiązań w tej samej przestrzeni. Pod koniec artykułu przekształcimy aplikację React „Hello World” w aplikację React Native.

Zacznijmy od stwierdzenia, że ​​React Native to stosunkowo nowa technologia. Jest oficjalnie dostępny od marca 2015 r., od początku tego roku był w prywatnej wersji beta, a wcześniej był używany wewnętrznie na Facebooku. Powiedzenie „Nie od razu Rzym zbudowano” odnosi się również do technologii. Narzędzia takie jak grunt i platformy takie jak Node.js dojrzewały latami. W świecie sieci wszystko toczy się szybko, a przy ogromnej liczbie frameworków, pakietów i narzędzi pojawiających się każdego dnia, programiści są bardziej sceptyczni i nie chcą przeskakiwać na wszystkie modne modę tylko po to, by sobie to uświadomić znaleźli się w sytuacji zablokowania dostawcy. Dowiemy się, co sprawia, że ​​React Native jest wyjątkowy, dlaczego jest to technologia, w którą warto się zagłębić, i omówimy kilka przypadków, w których nie są to wszystkie jednorożce i tęcze.

Pod maską

Mówiąc o technologiach webowych na urządzeniach mobilnych, dostępne rozwiązania zazwyczaj należą do jednej z poniższych kategorii.

Łączenie aplikacji internetowych w mobilną przeglądarkę internetową

Aplikacja internetowa działa w przeglądarce mobilnej, zwykle nazywanej WebView. Bez większych refaktoryzacji strona internetowa lub aplikacja internetowa działa na urządzeniu mobilnym. Być może będziemy musieli wziąć pod uwagę zdarzenia przeglądarki mobilnej, takie jak dotknięcie lub odsłuchanie zmian orientacji urządzenia i mniejszy ekran, aby zapewnić pełną wygodę użytkownika, ale mamy działającą wersję mobilną przy minimalnym wysiłku. Cordova/PhoneGap to najpopularniejsza opcja w tej kategorii. Niestety ta opcja ma dużą wadę: w niektórych przypadkach aplikacje opracowane przy użyciu Cordova są znacznie wolniejsze niż aplikacje natywne, szczególnie w przypadku aplikacji z dużą ilością grafiki. W innych przypadkach mobilny system operacyjny nie zapewnia w rzeczywistości wszystkich funkcji WebView dostępnych w przeglądarce mobilnej. Doświadczenie użytkownika może również różnić się od aplikacji natywnych; może się to zdarzyć z powodu aplikacji lub samej platformy. Ten problem może wahać się od niedziałających pasków przewijania po zauważalne opóźnienie podczas stukania w elementy.

Kompilowanie do technologii natywnych

Zupełnie innym rozwiązaniem jest w końcu stworzenie natywnej bazy kodu. Dzieje się to poprzez przekształcenie oryginalnego kodu źródłowego na inny język programowania. Zamieniamy natywną wydajność na warstwę abstrakcji z pewnymi niepewnościami. W przypadku rozwiązań o zamkniętym kodzie źródłowym nie jesteśmy nawet pewni, co dzieje się pod maską iz jaką czarną skrzynką mamy do czynienia. W innych przypadkach nie jesteśmy pewni, w jakim stopniu następna aktualizacja mobilnego systemu operacyjnego złamie nasz kod i kiedy będą dostępne poprawki lub aktualizacje. Popularnym przykładem tej kategorii byłby Haxe.

Korzystanie z warstwy JavaScript

Tutaj używamy silnika JavaScript środowiska mobilnego i tam wykonujemy nasz JavaScript. Natywne kontrolki są mapowane na obiekty i funkcje JavaScript, więc gdy wywołamy funkcję o nazwie fancyButtonRightHere() , na ekranie pojawi się przycisk. NativeScript lub Appcelerator Titanium to dobrze znane przykłady z tej kategorii.

React Native można by zaliczyć do trzeciej kategorii. W przypadku wersji na iOS i Androida React Native używa JavaScriptCore pod maską, który jest domyślnym silnikiem JavaScript w iOS. JavaScriptCore to także silnik JavaScript w przeglądarkach Apple Safari. Deweloperzy OS X i iOS mogą w rzeczywistości bezpośrednio się z nim komunikować, jeśli chcą.

Jedną dużą różnicą jest to, że React Native uruchamia kod JavaScript w osobnym wątku, więc interfejs użytkownika nie blokuje się, a animacje powinny być jedwabiste i płynne.

Reagowanie jest kluczową cechą

Warto zauważyć, że „React” w React Native nie jest umieszczany tam przypadkowo. W przypadku React Native potrzebujemy zrozumienia, co dokładnie oferuje React. Poniższe koncepcje działają tak samo w React i React Native, chociaż te przykłady kodu są dostosowane do uruchamiania w przeglądarce.

Pojedynczy punkt wejścia renderowania

Kiedy przyjrzymy się prostemu komponentowi React, pierwszą rzeczą, jaką możemy zauważyć, jest to, że komponent ma funkcję render . W rzeczywistości React zgłasza błąd, jeśli w komponencie nie ma zdefiniowanej funkcji renderowania.

 var MyComponent = function() { this.render = function() { // Render something here }; };

Cechą szczególną jest to, że nie mieszamy tutaj elementów DOM, ale zwracamy konstrukcję opartą na XML, która reprezentuje to, co zostanie wyrenderowane w DOM. Ta konstrukcja oparta na XML nosi nazwę JSX.

 var MyComponent = function() { this.render = function() { return <div className="my-component">Hello there</div>; }; };

Specjalny transformator JSX pobiera cały ten kod wyglądający na XML i przekształca go w funkcje. Tak będzie wyglądał komponent po transformacji:

 var MyComponent = function() { this.render = function() { return React.createElement("div", { className: "my-component" }, "Hello there"); }; };

Największą zaletą jest to, że rzucając okiem na komponent, zawsze wiemy, co ma robić. Na przykład składnik <FriendList /> może renderować pewną liczbę składników <Friend /> . Nie możemy renderować naszych komponentów nigdzie indziej niż w funkcji render , więc nigdy nie ma obaw, że nie wiemy, skąd dokładnie pochodzi nasz renderowany komponent.

Jednokierunkowy przepływ danych

Aby zbudować zawartość komponentu, React udostępnia właściwości lub w skrócie rekwizyty. Podobnie jak w przypadku atrybutów XML, przekazujemy właściwości bezpośrednio do komponentu, a następnie możemy użyć właściwości wewnątrz konstruowanego komponentu.

 var Hello = function(props) { this.render = function() { return <div className="my-component">Hello {props.name}</div>; }; }; var Greeter = function() { this.render = function() { return <Hello name="there" /> } };

Prowadzi to do tego, że nasze komponenty mają strukturę podobną do drzewa, a dane możemy przekazywać tylko podczas konstruowania elementów podrzędnych.

Renderuj ponownie po zmianach

Oprócz rekwizytów komponenty mogą mieć również stan wewnętrzny. Najbardziej widocznym przykładem takiego zachowania może być licznik kliknięć, który aktualizuje swoją wartość po naciśnięciu przycisku. Sama liczba kliknięć zostałaby zapisana w stanie.

Każda zmiana właściwości i stanu powoduje pełne ponowne renderowanie komponentu.

Wirtualny DOM

Teraz, gdy wszystko jest ponownie renderowane, gdy zmieniają się właściwości lub stan, dlaczego sam React działa tak dobrze? Magicznym składnikiem jest „wirtualny DOM”. Za każdym razem, gdy coś jest potrzebne do ponownego renderowania, generowana jest wirtualna reprezentacja zaktualizowanego DOM. Wirtualny DOM składa się z lekkich reprezentacji elementów modelowanych na podstawie drzewa komponentów, dzięki czemu proces ich generowania jest znacznie bardziej wydajny niż generowanie rzeczywistych elementów DOM. Przed zastosowaniem zmian w rzeczywistym DOM, sprawdzane są, gdzie dokładnie w drzewie komponentów nastąpiły zmiany, tworzona jest różnica i stosowane są tylko te konkretne zmiany.

Pierwsze kroki z tym samouczkiem React Native

Istnieją pewne warunki wstępne, które początkujący będą musieli skonfigurować, aby móc rozwijać się pod kątem React Native. Ponieważ iOS był pierwszą obsługiwaną platformą i tą, którą omawiamy w tym samouczku, potrzebujemy macOS i Xcode, co najmniej w wersji 6.3. Node.js jest również potrzebny. To, co pomaga, to instalacja Watchmana za pomocą menedżera pakietów Brew z brew install watchman . Chociaż nie jest to koniecznie potrzebne, pomaga w radzeniu sobie z wieloma plikami w naszym projekcie React Native.

Aby zainstalować React Native, wystarczy zainstalować aplikację wiersza poleceń React Native za pomocą npm install -g react-native-cli . Wywołanie polecenia React react-native pomaga nam następnie stworzyć nową aplikację React Native. Uruchomienie react-native init HelloWorld powoduje utworzenie folderu o nazwie HelloWorld , w którym można znaleźć kod wzorcowy.

Przekształcanie aplikacji React

Ponieważ React jest kluczową funkcją i podstawowymi zasadami pochodzącymi z biblioteki React, przyjrzyjmy się, czego potrzebujemy, aby przekształcić minimalną aplikację React „Hello World” w React Native.

W tym przykładzie kodu używamy niektórych funkcji ES2015, w szczególności klas. Całkowicie wykonalne jest pozostanie przy React.createClass lub użycie formy funkcji podobnej do popularnego wzorca modułów.

 var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Krok 1: Zaakceptuj moduły CommonJS

W pierwszym kroku musimy zmienić wymaganie, aby moduł React zamiast tego używał react-native .

 var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

To, co zwykle jest częścią potoku narzędziowego podczas tworzenia aplikacji internetowej React, jest integralną częścią React Native.

Krok 2: Nie ma DOM

Nic dziwnego, że na urządzeniach mobilnych nie ma DOM. Tam, gdzie poprzednio używaliśmy <div /> , musimy użyć <View /> i tam, gdzie użyliśmy <span /> , potrzebny nam tutaj komponent to <Text /> .

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

O ile wygodnie jest umieścić tekst bezpośrednio w elementach <div /> , w świecie natywnym tekst nie może być umieszczony bezpośrednio w <View /> . W tym celu musimy wstawić komponent <Text /> .

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

Krok 3: Style wbudowane są drogą do zrobienia

React Native pozwala nam korzystać z modelowania Flexbox zamiast bawić się float i inline-block , które tak dobrze znamy w świecie sieciowym. Ciekawostką jest to, że React Native nie używa CSS.

 import React from 'react'; import {View, Text, StyleSheet, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View style={styles.box} onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Używanie stylów wbudowanych wydaje się być oszałamiające dla początkujących. Jest to podobne do przejścia, przez które musieli przejść programiści React, gdy mieli do czynienia z JSX i wcześniej używali silników szablonów, takich jak Handlebars lub Jade.

Chodzi o to, że nie mamy globalnie arkuszy stylów w sposób, w jaki używamy CSS. Arkusze stylów deklarujemy bezpośrednio na poziomie komponentu, dzięki czemu mamy wszystkie informacje, których potrzebujemy, aby zobaczyć, co robi nasz komponent, jaki układ tworzy i jakie style stosuje.

 import React from 'react'; import {Text} from 'react-native'; var Headline = function(props) { this.render = () => <Text style={headlineStyle.text}>{props.caption}</Text>; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline;

Krok 4: Obsługa zdarzeń

Odpowiednikiem kliknięcia na stronach internetowych jest dotknięcie elementu na urządzeniu mobilnym. Zmieńmy nasz kod tak, aby „alert” pojawiał się po dotknięciu elementu.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Zamiast zdarzeń bezpośrednio dostępnych w komponentach <View /> , musimy jawnie użyć elementów, które wyzwalają zdarzenia, w naszym przypadku zdarzenia dotykowego po naciśnięciu widoku. Dostępne są różne rodzaje elementów dotykowych, z których każdy zapewnia inną wizualną informację zwrotną.

Krok 5: Dostosuj zachowanie na różnych platformach

Możliwe jest wykrycie, na której platformie działa aplikacja React Native, uzyskując dostęp do wartości Platform.OS . Załóżmy, że w powyższym przykładzie chcieliśmy wyświetlić inny komunikat ostrzegawczy w zależności od platformy, na której działamy. Możemy to zrobić tak:

 ... clickMe() { var message = ''; if(Platform.OS == 'ios') { message = 'Welcome to iOS!'; } else if(Platform.OS == 'android') { message = 'Welcome to Android!'; } Alert.alert(message); } ...

Alternatywnie dostępna jest również metoda select , która zapewnia składnię podobną do przełącznika:

 … clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' }) ); } ...

Krok 6: Niestandardowe czcionki i react-native link

Aby dodać niestandardową czcionkę, musimy przeskoczyć kilka kółek. Przede wszystkim upewnij się, że pełna nazwa czcionki i nazwa pliku czcionki są takie same: iOS użyje pełnej nazwy czcionki do pobrania czcionki, podczas gdy Android użyje nazwy pliku.

Jeśli więc pełna nazwa czcionki to myCustomFont , upewnij się, że nazwa pliku czcionki to myCustomFont.ttf .

Następnie musimy utworzyć folder asset i wskazać do niego npm. Możemy to zrobić, tworząc najpierw folder pod assets/fonts w katalogu głównym aplikacji. Każdy inny katalog wystarczy, ale jest to konwencjonalna nazwa katalogu czcionek.

Możemy powiedzieć npm, gdzie mamy nasze zasoby, dodając właściwość Assets w sekcji integracji npm w React, rnpm:

 "rnpm": { "Assets": [ "./assets/fonts/" ] }

Gdy już to zrobimy, możemy wreszcie uruchomić react-native link . Spowoduje to skopiowanie czcionek do odpowiednich katalogów i dodanie niezbędnego pliku xml do info.plist na iOS.

Po zakończeniu możemy użyć naszej czcionki, po prostu odwołując się do niej w dowolnym arkuszu stylów, podając jej pełną nazwę. Użyjmy go w naszym elemencie Text :

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

Krok 7: Przenoszenie rzeczy

React Native używa tych samych zasad co Flexbox do rozmieszczania komponentów. Powiedzmy, że chcieliśmy umieścić nasz przycisk na dole ekranu: zapakujmy nasz TouchableOpacity w kontener View :

 <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View>

A teraz zdefiniujmy styl container wraz z innymi już zdefiniowanymi stylami:

 container: { flex: 1, justifyContent: 'center', alignItems: 'center' }

Skupmy się na justifyContent i alignItems . Te dwie właściwości kontrolują sposób wyrównania komponentu odpowiednio wzdłuż jego osi głównej i osi pomocniczej. Domyślnie oś główna jest osią pionową, a oś pomocnicza jest osią poziomą (możesz to zmienić ustawiając właściwość flexDirection na row ).

justifyContent ma sześć możliwych wartości, które można ustawić na:

• flex-start umieści wszystkie elementy razem, na początku obwiedni komponentu.
• flex-end ustawi wszystkie elementy na końcu.
• center ustawi wszystkie elementy w środku obwiedni.
• space-around spowoduje równomierne rozmieszczenie komponentów i wyśrodkowanie komponentów w utworzonych obwiedniach.
• Równomierne odstępy również space-evenly rozmieszczą komponenty, ale spróbuje pozostawić równą przestrzeń między komponentami i innymi granicami.
• space-between elementami rozłoży komponenty, utrzymując równe odstępy między sąsiednimi komponentami.

alignItems można ustawić na cztery możliwe wartości: flex-start , flex-end , center i stretch . Pierwsze trzy zachowują się tak, jak w przypadku justifyContent , podczas gdy stretch spowoduje, że komponent zajmie całą dostępną przestrzeń wzdłuż osi, dzięki czemu oś zostanie całkowicie wypełniona.

Tak więc, ponieważ chcemy, aby nasz TouchableOpacity był wyświetlany na dole i wyśrodkowany wzdłuż osi poziomej, możemy zmienić styl w następujący sposób:

 container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }

Więcej informacji o wartościach justifyContent i alignItems można znaleźć tutaj i tutaj.

Krok 8: Rejestracja aplikacji

Podczas programowania w React dla przeglądarki wystarczy zdefiniować punkt montowania, wywołać React.render i pozwolić Reactowi wykonać swoją magię. W React Native jest to trochę inne.

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' })); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return <HelloThere name="Component" />; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; });

Musimy zarejestrować komponent po stronie Objective-C, co odbywa się za pomocą obiektu AppRegistry . Nazwa, którą podajemy, musi być zgodna z nazwą w projekcie Xcode.

Nasza aplikacja Hello World React Native ma znacznie więcej linii kodu niż jej odpowiednik internetowy, ale z drugiej strony React Native nieco dalej rozdziela problemy, zwłaszcza że style są definiowane za pomocą komponentu.

Na marginesie, nie powinniśmy ponownie powiązać metody clickMe z this kontekstem w metodzie render , zwłaszcza jeśli nasza aplikacja React (Native) stanie się nieco bardziej złożona. Ponownie wiąże metodę przy każdym wywołaniu renderowania, które może stać się całkiem duże. Alternatywą jest powiązanie metody wewnątrz konstruktora.

Uruchamianie aplikacji

Aby uruchomić aplikację, musimy zastąpić zawartość pliku index.ios.js fragmentem kodu naszej przekształconej aplikacji z ostatniego kroku. Następnie wystarczy otworzyć projekt Xcode i nacisnąć duży przycisk Uruchom. Najpierw otworzy się terminal z serwerem React Native, a następnie pojawi się okno symulatora. Serwer React Native tworzy pakiet, który następnie pobiera aplikacja natywna. Pozwala to na szybki cykl tworzenia stron internetowych, w którym zmiany zostaną odzwierciedlone w symulatorze niemal natychmiast.

W przypadku Androida wystarczy dodać do pliku package.json pod scripts :

 "android-linux": "react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android"

A następnie uruchom npm run android-linux . Upewnij się, że katalog android/app/src/main/assets istnieje wcześniej.

Po pojawieniu się terminala nasza aplikacja pojawi się w symulatorze. Naciśnięcie CMD+D spowoduje wyświetlenie menu rozwoju. Kliknięcie pola spowoduje wyświetlenie alertu. Wersja na iOS:

A Android renderuje coś takiego:

W przypadku dystrybucji posiadanie aplikacji, która wskazuje na lokalny serwer programistyczny, nie działałoby dla nas. Z tego powodu możemy utworzyć pakiet do użycia, gdy serwer React Native nie jest uruchomiony z poleceniem React react-native bundle . W takim przypadku musimy zaktualizować metodę didFinishLaunchingWithOptions AppDelegate , aby korzystać z pakietu offline.

Ta przykładowa aplikacja jest również dostępna na Github.

Praca z React Native

Inną rzeczą, o której warto wspomnieć, jest to, że nie tylko używamy koncepcji React i JavaScript w naszych aplikacjach mobilnych, ale niektóre przepływy pracy, do których są przyzwyczajeni programiści stron internetowych, są również dostępne w React Native. Wychodząc z tworzenia stron internetowych, jesteśmy przyzwyczajeni do narzędzi programistycznych, sprawdzania elementów i ponownego ładowania na żywo.

Sposób działania React Native polega na tym, że umieszcza wszystkie nasze pliki JavaScript w pakiecie. Ten pakiet jest obsługiwany z serwera lub dołączany do aplikacji. Pierwszy z nich jest niezwykle przydatny do tworzenia w symulatorze, ponieważ możemy umożliwić przeładowanie na żywo. Menu programisty, które React zapewnia, nie jest tak potężne, jak narzędzia programistyczne Chrome, ale zapewnia bardzo podobne do sieci wrażenia programistyczne z ponownym ładowaniem i debugowaniem na żywo za pomocą narzędzi programistycznych/debuggerów Chrome (lub Safari).

Twórcy stron internetowych znają JSFiddle lub JSBin, internetowe boisko do szybkich testów internetowych. Istnieje podobne środowisko, które pozwala nam wypróbować React Native w przeglądarce internetowej.

React Native: solidny, nowoczesny wybór

Początkowo sugerowałem bardziej ostrożne podejście do React Native. Dziś to dojrzały i solidny wybór.

Jedną z dużych zalet Reacta jest to, że nie wpływa na przepływ pracy, ponieważ reprezentuje tylko warstwę widoku. Czy chcesz zdefiniować własny potok Grunta? A może wolisz używać Webpacka? Czy użyjesz Backbone.js do swoich potrzeb? A może chcesz korzystać ze zwykłych obiektów JavaScript? Odpowiedzi na wszystkie te pytania zależą wyłącznie od Ciebie, ponieważ React nie nakłada żadnych ograniczeń na te wybory. Jak ujęła to oficjalna strona: „Ponieważ React nie przyjmuje żadnych założeń dotyczących reszty stosu technologicznego, łatwo jest wypróbować go na małej funkcji w istniejącym projekcie”.

Do pewnego stopnia dotyczy to również React Native. Programiści mobilni mogą zintegrować React Native jako część swojej aplikacji, skorzystać z przepływu pracy inspirowanego siecią i zdecydować się na integrację biblioteki na większą skalę, jeśli zajdzie taka potrzeba.

W każdym razie jedno jest pewne: React Native nie odchodzi. Facebook ma ogromny udział w tym, że ma wiele aplikacji opartych na React Native w sklepach z aplikacjami. Społeczność wokół React Native jest ogromna i wciąż się rozwija.