React에서 React Native로의 여정

Als React-/JS-Entwickler hatten Sie wahrscheinlich schon einmal den Gedanken „Soll ich React Native lernen?“ Das ist eine berechtigte Frage, die ich mir auch vor ein paar Jahren gestellt habe . Es stellte sich heraus, dass es definitiv die richtige Entscheidung war, React Native zu lernen. Das hat mir meine Rolle als Sr. Developer Advocate bei Amazon beschert, wo ich jetzt React Native verwende, um Apps für Android-, Fire TV- und Tablet-Geräte zu erstellen.

Wenn Sie überlegen, ob Sie über Web-Apps hinausgehen sollen, finden Sie hier einige Gedanken dazu, warum es sich lohnt, darüber nachzudenken:

Warum React Native lernen?

• Die Philosophie „Einmal lernen, überall schreiben“ geht über iOS und Android hinaus – sie umfasst jetzt Plattformen wie tvOS, VisionOS und sogar Desktop-Umgebungen wie React-Native-Macos

• Branchenrelevanz: Große Unternehmen wie Amazon, Meta und Microsoft setzen alle auf React Native. Warum? Wiederverwendbarkeit des Codes, kostengünstig und ermöglicht die plattformübergreifende Entwicklung.

• Starke Community-Unterstützung: React Native hat über 100.000 Sterne und 24.000 Forks auf GitHub, mit regelmäßigen Updates und aktiver Entwicklung.

• Hohe Entwicklerzufriedenheit: Laut der State of React Native Survey würden 90 % der Entwickler React Native wieder verwenden!

• Einheitliches Ökosystem: Die React Native-Community versammelt sich rund um die Expo, was zu schnelleren Verbesserungen, gut integrierten Bibliotheken von Drittanbietern und reichlich gemeinsamen Ressourcen führt.

• Vertraute Entwicklererfahrung

React vs. React Native: Ähnlichkeiten und Unterschiede

Architektur und Kompilierung

Ähnlichkeiten:

Beide verwenden einen Abstimmungsprozess, der oft als „virtuelles DOM“ bezeichnet wird. Dieser Prozess vergleicht einen Baum mit einem anderen, um zu bestimmen, welche Teile der Benutzeroberfläche aktualisiert werden müssen. Aus diesem Grund unterstützen beide eine schnelle Aktualisierung, sodass Sie Änderungen an der Benutzeroberfläche in Echtzeit sehen können.

Unterschiede:

React wird zum Rendern in Webbrowsern kompiliert und nutzt dabei das DOM und die Web-APIs. Auch wenn der Zugriff über mobile Browser erfolgt, sind die Funktionen des Browsers und der eingeschränkte Zugriff auf native Gerätefunktionen immer noch eingeschränkt.

React Native hingegen kompiliert zu nativem Code und ermöglicht so den direkten Zugriff auf plattformspezifische APIs und Funktionen. Das bedeutet, dass React Native-Apps Gerätefunktionen wie Kamerazugriff und Push-Benachrichtigungen nutzen können und so ein natives Benutzererlebnis bieten. Aus diesem Grund verfolgt es einen anderen Ansatz für seine Architektur, die sogenannte „brückenlose“ Architektur, und verwendet anstelle des DOM native Komponenten. Es verwendet Turbo Native-Module und nutzt eine JavaScript-Schnittstelle (JSI), die eine direkte Kommunikation zwischen JavaScript und nativem Code ermöglicht. Diese Architektur ist neu und Sie hören möglicherweise den Begriff „neue Architektur“. Wenn Sie daran interessiert sind, mehr zu erfahren, habe ich dies in einem früheren Artikel behandelt.

JSX und Hooks

Ähnlichkeiten

Beide verwenden JSX zur Beschreibung der Benutzeroberfläche und unterstützen React-Hooks (useState, useEffect usw.). Dadurch können Sie einen konsistenten Codierungsstil und Statusverwaltungsansatz in beiden Bibliotheken beibehalten.

Komponenten

Ähnlichkeiten

Sowohl React als auch React Native folgen einer komponentenbasierten Architektur und Komponenten folgen den gleichen Lebenszyklusmethoden unter der Haube.

Unterschiede:

1. Komponentenimporte: In React Native importieren Sie UI-Komponenten aus React-Native, im Gegensatz zu React, wo HTML-Elemente global verfügbar sind. Dieser Unterschied ist tatsächlich einer meiner Lieblingsaspekte bei React Native, da Sie sofort Zugriff auf eine Reihe vorgefertigter Komponenten haben, z. Ansicht, Text, Bild, TextInput, ScrollView.
2. Plattformspezifische Komponenten: React Native bietet auch sofort einsatzbereite Komponenten und APIs, die auf iOS und Android zugeschnitten sind.
3. Textverarbeitung: In React Native muss der gesamte Text in ein Komponente, anders als in React, wo Text direkt in vielen Elementen platziert werden kann. Dies gewährleistet den richtigen Stil und das richtige Verhalten des Textes auf verschiedenen Plattformen und verbessert die Konsistenz und Zugänglichkeit.
4. Ereignisbehandlung: React verwendet onClick für Klickereignisse, während React Native onPress für Berührungsinteraktionen verwendet, was die unterschiedliche Natur von Interaktionen widerspiegelt.

스타일링

유사점

React와 React Native는 모두 스타일링 구성 요소에 대한 유연한 접근 방식을 제공합니다. 둘 다 인라인 스타일을 지원하므로 스타일을 구성 요소에 직접 적용할 수 있습니다. 또한 두 가지 모두 재사용 가능한 스타일 개체를 생성할 수 있습니다.

차이점

1. 스타일링 언어: React는 일반적으로 스타일링을 위해 CSS 또는 CSS-in-JS 라이브러리를 사용하는 반면 React Native는 몇 가지 차이점이 있는 JavaScript 객체 기반 스타일링 시스템을 사용합니다.
   • 속성 이름: React Native는 속성 이름에 camelCase를 사용합니다(예: 글꼴 크기 대신 글꼴 크기).
   • 값 단위: React Native에서는 너비, 높이 또는 글꼴 크기와 같은 속성에 단위가 필요하지 않으며 자동으로 크기가 밀도 독립적 픽셀이라고 가정합니다.
2. StyleSheet API: React Native는 스타일 객체 생성을 위한 StyleSheet.create() 메서드를 제공합니다. 이 API는 각 렌더링에서 스타일 개체를 다시 생성할 필요성을 줄여 성능을 향상시킵니다.
3. 스타일 적용: 클래스 이름을 사용하여 스타일을 적용할 수 있는 React와 달리 React Native는 style prop을 사용하여 구성 요소에 직접 스타일을 적용합니다.
4. 제한된 CSS 하위 집합: React Native는 다양한 레이아웃에 적합한 CSS 속성에 초점을 맞춘 하위 집합만 지원합니다. 이는 일부 웹 관련 속성(예: float)을 사용할 수 없는 반면 다른 속성(예: flex)은 다르게 동작할 수 있음을 의미합니다.

라이브러리 및 툴링

유사점

React와 React Native는 많은 핵심 라이브러리를 공유합니다. Redux, MobX와 같은 동일한 상태 관리 라이브러리와 Axios 또는 Fetch API와 같은 데이터 가져오기 라이브러리를 사용할 수 있습니다.

차이점

탐색: React에서는 일반적으로 웹 탐색을 위해 React Router를 사용할 수 있지만 React Native에는 자체 React Navigation 라이브러리가 있습니다. 이는 React(웹)가 일반적으로 현재 URL 경로를 기반으로 다양한 구성 요소가 렌더링되는 URL 기반 탐색을 사용하기 때문입니다. React Native는 스택 기반 탐색을 사용하여 기본 모바일 앱 경험을 모방합니다. 화면은 서로 '스택'되며, 전환을 통해 새 화면이 스택으로 밀려나거나 '팝업'됩니다.

? 참고: 앱을 구성할 때 폴더 이름을 '페이지' 대신 '스크린'으로 지정하는 것을 잊지 마세요.

테스팅: 개념은 구성 요소 렌더링 및 이벤트 시뮬레이션에 중점을 두어 두 라이브러리에서 유사하지만 특정 테스트 라이브러리는 다릅니다. React는 React 테스트 라이브러리를 사용하고, React Native는 RNTL(React Native Testing Library)을 사용하지만 RNTL은 React Test Renderer 위에 간단한 유틸리티 기능만 제공하므로 미루지 마십시오.

? 일부 React 라이브러리는 DOM 종속성으로 인해 모든 React Native 플랫폼과 호환되지 않을 수 있습니다. 그러나 다음에서 모든 라이브러리의 플랫폼 호환성을 확인할 수 있습니다: (https://reactnative.directory)

Universal React Apps로 격차 해소

아직 고민 중이라면 Universal React Apps의 등장은 React와 React Native 사이의 격차를 더욱 줄이는 정말 흥미로운 공간입니다. 일반적으로 React-native-web으로 구동되는 Universal React 라이브러리 및 도구를 사용하면 공유 React Native 코드베이스에서 iOS, Android 및 웹에서 실행되는 크로스 플랫폼 애플리케이션을 만들 수 있습니다. 이를 통해 각 장치 유형의 고유한 규칙을 존중하면서 탐색, 스타일 지정, 상태 관리 및 비즈니스 논리를 공유하여 시간과 노력을 절약할 수 있습니다.

DOM과 기기 사이의 경계가 계속 모호해짐에 따라 React Native를 수용하면 흥미로운 다중 플랫폼 앱 개발의 세계로 나아갈 수 있는 문이 열립니다!

시작할 준비가 되었다면 제가 가장 좋아하는 리소스에 대한 댓글을 확인하거나 아래에서 귀하의 리소스에 댓글을 달아주세요 ⬇️

위 내용은 React에서 React Native로의 여정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!