Journeying from React to React Native

Sebagai pembangun React / JS, anda mungkin pernah terfikir "Adakah saya perlu belajar React Native?" Soalan yang adil dan saya tanya diri saya beberapa tahun lalu . Ternyata, mempelajari React Native pastinya merupakan keputusan yang tepat. Itulah yang menjadikan saya peranan sebagai Sr. Developer Advocate @ Amazon, di mana saya kini menggunakan React Native untuk membina apl merentas peranti Android, Fire TV dan Tablet.

Jika anda sedang berbahas sama ada ingin melangkaui apl web, berikut ialah beberapa pendapat tentang sebab ia patut dipertimbangkan:

Mengapa belajar React Native?

• Falsafah "belajar sekali, tulis di mana-mana" melangkaui iOS dan Android sahaja – ia kini termasuk platform seperti tvOS, VisionOS dan juga persekitaran desktop seperti react-native-macos

• Perkaitan industri: Syarikat utama seperti Amazon, Meta dan Microsoft semuanya menggunakan React Native. Kenapa? Kebolehgunaan semula kod, kos efektif dan ia membolehkan anda membina platform silang.

• Sokongan komuniti yang kukuh: React Native mempunyai lebih 100k bintang dan 24k fork di GitHub, dengan kemas kini tetap dan pembangunan aktif.

• Kepuasan pembangun yang tinggi: Menurut State of React Native Survey, 90% daripada pembangun akan menggunakan React Native sekali lagi!

• Ekosistem bersatu: Komuniti React Native berkumpul di sekitar Expo, yang membawa kepada peningkatan yang lebih pantas, perpustakaan pihak ketiga yang bersepadu dengan baik dan sumber perkongsian yang banyak.

• Pengalaman pembangun biasa

React vs React Native: Persamaan & Perbezaan

Seni Bina dan Menyusun

Persamaan:

Kedua-duanya menggunakan proses penyelarasan yang sering dirujuk sebagai "DOM maya." Proses ini membezakan satu pokok dengan yang lain untuk menentukan bahagian UI yang perlu dikemas kini. Disebabkan ini, kedua-duanya menyokong muat semula pantas, membolehkan anda melihat perubahan UI dalam masa nyata.

Perbezaan:

React menyusun untuk dipaparkan dalam penyemak imbas web, memanfaatkan DOM dan API web. Walaupun apabila diakses melalui penyemak imbas mudah alih, ia masih dikekang oleh keupayaan penyemak imbas dan akses terhad kepada ciri peranti asli.

React Native, sebaliknya menyusun kepada kod asli, membenarkan akses terus kepada API dan ciri khusus platform. Ini bermakna apl React Native boleh menggunakan keupayaan peranti seperti akses kamera, pemberitahuan tolak, memberikan pengalaman pengguna asli. Disebabkan ini, ia mengambil pendekatan yang berbeza untuk seni binanya, dengan apa yang dipanggil seni bina "tanpa jambatan", dan bukannya DOM ia mempunyai komponen asli. Ia menggunakan Turbo Native Module dan memanfaatkan Antara Muka JavaScript (JSI) yang membolehkan komunikasi terus antara JavaScript dan kod asli. Seni bina ini baru dan anda mungkin mendengar istilah 'seni bina baharu' dilontarkan. Jika anda berminat untuk mengetahui lebih lanjut, saya telah membincangkan perkara ini dalam artikel sebelumnya.

JSX dan Hooks

Persamaan

Kedua-duanya menggunakan JSX untuk menerangkan UI dan menyokong cangkuk React (useState, useEffect, dll.). Ini membolehkan anda mengekalkan gaya pengekodan yang konsisten dan pendekatan pengurusan keadaan merentas kedua-dua perpustakaan.

Komponen

Persamaan

Kedua-dua React dan React Native mengikut seni bina berasaskan komponen dan komponen mengikut kaedah kitaran hayat yang sama di bawah hud.

Perbezaan:

1. Import Komponen: Dalam React Native anda mengimport komponen UI daripada react-native, tidak seperti React di mana unsur HTML tersedia secara global. Perbezaan ini sebenarnya adalah salah satu perkara kegemaran saya tentang React Native kerana anda mempunyai akses kepada set komponen pra-bina di luar kotak cth. Lihat, Teks, Imej, TextInput, ScrollView.
2. Komponen Khusus Platform: React Native turut menawarkan komponen dan API yang disesuaikan untuk iOS dan Android di luar kotak.
3. Pengendalian Teks: Dalam React Native, semua teks mesti dibalut dengan komponen, tidak seperti dalam React di mana teks boleh diletakkan terus dalam banyak elemen. Ini memastikan penggayaan dan gelagat teks yang betul merentas platform berbeza, meningkatkan ketekalan dan kebolehaksesan.
4. Pengendalian Acara: React menggunakan onClick untuk acara klik, manakala React Native menggunakan onPress untuk interaksi sentuhan, mencerminkan sifat interaksi yang berbeza.

Styling

Similarities

Both React and React Native offer flexible approaches to styling components. They both support inline styling, allowing you to apply styles directly to components. Additionally, both enable the creation of reusable style objects.

Differences

1. Styling Language: React typically uses CSS or CSS-in-JS libraries for styling whereas React Native uses a JavaScript object-based styling system with some differences:
   • Property Names: React Native uses camelCase for property names (e.g., fontSize instead of font-size).
   • Value Units: In React Native you don’t need units for properties like width, height, or fontSize, it automatically assumes dimensions are in density-independent pixels.
2. StyleSheet API: React Native provides a StyleSheet.create() method for creating style objects. This API improve’s performance by reducing the need to recreate style objects on each render.
3. Style Application: Unlike in React where class names can be used to apply styles, React Native applies styles directly to components using the style prop.
4. Limited CSS Subset: React Native only supports a subset of CSS properties, focusing on those that make sense for different layouts. This means some web-specific properties (like float) are not available, while others (like flex) might behave differently.

Libraries & Tooling

Similarities

React and React Native share many core libraries. You can use the same state management libraries like Redux, MobX, and data fetching libraries like Axios or the Fetch API.

Differences

Navigation: While in React you might typically using React Router for web navigation, React Native has its own React Navigation library. This is because React (Web) typically uses URL-based navigation, where different components are rendered based on the current URL path. Whereas React Native uses stack-based navigation, mimicking the native mobile app experience. Screens are ‘stacked’ on top of each other, with transitions pushing new screens onto the stack or ‘popping’ them off.

? Note: Remember to name your folder ‘Screens’ instead of ‘Pages’ when structuring your app.

Testing: concepts remain similar across both libraries, focusing on component rendering and event simulation, but the specific testing libraries differ. React uses the React Testing Library, while React Native you would use React Native Testing Library (RNTL), but don’t be put off as RNTL just provides light utility functions on top of React Test Renderer.

? Some React libraries may not be compatible with all React Native platforms due to DOM dependencies, however you can check the platform compatibility of all the libraries at: (https://reactnative.directory)

Bridging the Gap with Universal React Apps

If you're still on the fence, the rise of Universal React Apps is a really exciting space that is further closing the gap between React and React Native. Universal React libraries and tooling, usually powered by react-native-web enable you to create cross-platform applications that run on iOS, Android, and the Web all from a shared React Native codebase. This lets you share navigation, styling, state management, and business logic saving you time and effort while respecting the unique conventions of each device type.

So as the lines between DOM and Device continue to blur, embracing React Native opens doors to the exciting world of multi-platform app development!

If you are ready to get started check the comments for my favourite resources or comment with yours below ⬇️

The above is the detailed content of Journeying from React to React Native. For more information, please follow other related articles on the PHP Chinese website!