Jika Anda mengetahui hasil dari The State of JavaScript 2017, Anda akan menemukan banyak data yang menarik. Salah satu insight yang menarik adalah — banyak orang ingin belajar React Native.

The State of JavaScript Mobile Results

Sejak pertama rilis di tahun 2015, React Native terus mendapat popularitas yang semakin meningkat. Komunitasnya berkembang, dan banyak orang mulai mengembangkan aplikasi seluler menggunakan React Native — termasuk beberapa perusahaan besar seperti Facebook & Instagram (tentu saja), Skype, Pinterest, Uber dll. Sehingga kami memutuskan untuk mengumpulkan sumber daya terbaik terkait React Native yang dibuat oleh anggota komunitas React native yang berbakat dan membaginya dengan Anda.

Beberapa fakta dan statistik tentang React Native:

Pada tahun 2020, mobile aplikasi diperkirakan akan menghasilkan $ 188.9 milyar dalam pendapatan global melalui app stores dan iklan dalam aplikasi (oleh Statista.com)
Cross-platform berkembang pesat dan diperkirakan meningkat dari $ 25,19 miliar pada 2015 menjadi $ 80,45 miliar pada 2020 (oleh MarketsAndMarkets.com)
66,7% developer menggunakan JavaScript untuk pekerjaan mereka (oleh stackoverflow.com) — sumber
Facebook, Walmart, Bloomberg, Instagram, Soundcloud, dan Wix adalah beberapa aplikasi ternama yang menggunakan React Native sebagai tools development.

Hampir setiap orang pernah mendengar tentang React Native, sebagian besar responden ingin mempelajarinya atau sudah menggunakannya sebelumnya, dan berniat untuk mendalaminya. Jadi jika Anda termasuk kelompok pertama dan ingin memperluas pengetahuan Anda — berikut ini adalah roadmap yang dapat Anda tempuh untuk menjadi React Native Developer yang handal.

Pelajari JavaScript: Sumber Gratis & Berbayar

Seperti yang kemungkinan besar sudah Anda ketahui, karena sesuai dengan namanya, React Native bertumpu pada kerangka React. Oleh karena itu, sebelum Anda menceburkan diri ke area pembelajaran React Native yang luas ini, sangat penting bagi Anda untuk mengenal React.

Satu hal yang utama — sulit untuk belajar React tanpa mengetahui JavaScript. Oleh sebab itu, kami merekomendasikan Anda untuk mempelajari dasar-dasar JavaScript terlebih dahulu. Hal-hal akan menjadi jauh lebih jelas setelah Anda mempelajari sebagian besar seluk beluk JavaScript.

Sumber gratis untuk mempelajari JavaScript

Berikut ini adalah beberapa tutorial yang akan membantu Anda mempelajari dasar-dasar JavaScript:

Pelajari JS dari JS.Org — Jika Anda mencari cara paling interaktif untuk mempelajari JavaScript, maka perburuan Anda mungkin berakhir di learn-js.org. Website ini akan membantu Anda mengenal dasar-dasar JavaScript dengan memberi Anda pelajaran pertama dan code editor setelahnya, sehingga Anda dapat menerapkan apa yang Anda pelajari.
Mozilla developer Network — MDN memiliki tutorial khusus JavaScript yang akan memandu Anda mempelajari dasar-dasar bahasa pemrograman ini. Kerumitan tutorial akan meningkat dari pemula ke menengah dan kemudian ke tingkat advance.
JavaScript Fundamentals: Development for absolute beginner — Kursus ini merupakan bagian dari Microsoft’s Virtual Academy. Anda dapat mempelajari dasar-dasar JavaScript yang berguna untuk mengembangkan enhanced user interface, permainan video berbasis web, dan web pages dinamis.
Sumber Berbayar untuk mempelajari JavaScript

Meskipun sumber tutorial online gratis berlimpah, Anda tidak boleh mengabaikan nilai tutorial berbayar. Sesuai dengan pepatah lama, ada harga — ada barang.

Berikut ini beberapa tutorial berbayar terbaik yang bisa Anda manfaatkan:

Frontend Masters — The Good Parts of JavaScript and the Web oleh Douglas Crockford akan membantu Anda mempelajari JavaScript secara mendalam. Kursus ini dibagi menjadi 21 modul berkualitas tinggi.
Pluralsight — Javascript Road Trip — Tutorial ini meletakkan dasar yang kuat dari sintak Javascript dan code styling secara umum.

2. Mempelajari Dasar-dasar ES2015+ (ES6+)

Setelah menguasai dasar-dasar JavaScript, sekarang saatnya mempelajari versi terbaru standar ECMAScript.

Anda tidak perlu menggunakan ES6+ di React Native, tetapi ES6 adalah cara baru untuk menggunakan Javascript. Dengan fitur seperti arrow function, read/spread operator, dan variable destructing, ES6+ (ESNext) mengemas banyak fitur dan syntactic sugar yang membuat coding jadi jauh lebih mudah.

Kursus gratis untuk belajar ES6+

Sebagai permulaan, Anda dapat mempelajari dasar-dasar ES6 dengan beberapa sumber gratis yang tersedia di web. Di bawah ini adalah beberapa sumber gratis favorit untuk mempelajari ES6+ :

Memahami ES6: Mozilla developer network series — Mozilla developer network series adalah sumber yang bagus untuk mendapat beberapa hacks ES6 yang cemerlang.
Kursus ES6 tentang Pluralsight — Kursus yang cocok bagi Anda tidak suka membaca tutorial teknis yang panjang. Kursus ini dimaksudkan untuk mengajarkan Anda fitur dasar dari versi terbaru JavaScript, termasuk tools dan teknologi terbaru untuk meningkatkannya di browser dan di server dengan Node.js.
ES6: bit yang benar-benar Anda gunakan — Artikel singkat oleh James Knelson ini akan memandu Anda dalam perjalanan untuk memahami fitur terpenting ES6.
Sumber daya berbayar untuk mempelajari ES6+
ES6.io oleh Wes Bos — Jika Anda bercita-cita menjadi rockstar ES6+ maka ES6 Wes Bos adalah panggung pertama Anda. Ketimbang mengajari Anda fitur-fitur canggih ES6+ langsung, Wes Bos akan memandu Anda untuk memperkuat dasar-dasar JavaScript terlebih dahulu baru kemudian bergerak menuju fitur-fitur ES6+.

3. Belajar React

Setelah terbiasa dengan JavaScript dan ekosistem ES6+, barulah Anda siap untuk berpindah ke React.

Langkah pertama menjadi react native developer handal adalah mempelajari React.js itu sendiri, yang memiliki API surface yang hampir sama dengan React Native.

Pelajarilah setidaknya satu atau dua tutorial sehingga Anda dapat mengambil dasar-dasar dari berbagai sudut pandang.

Dibawah ini adalah beberapa sumber daya favorit untuk belajar React:

Tutorial gratis untuk belajar React

React by itself — Tutorial hebat ini layak dipertimbangkan jika Anda seorang pemula dan ingin belajar React sendiri.
Egghead.io: Panduan React untuk Pemula — Kursus oleh Kent C. Dodds, seorang developer JS dan penggila open source, adalah pengantar yang bagus untuk framework ini.
Tutorial berbayar untuk belajar React
React untuk Pemula — Tutorial hebat lainnya oleh Wes Bos, React for Beginners adalah serial video yang menghibur, step-by-step tutorial, di mana Anda akan belajar cara membuat aplikasi React sederhana dengan firebase.
React Fundamental oleh Tyler McGinnis — kursus oleh Tyler termasuk React fundamentals dan React universal.

4. Memasuki React Native

Setelah Anda mengetahui beberapa hal tentang React, inilah saatnya untuk memulai React Native. Mari kita lihat beberapa kursus yang tersedia.

Tutorial React Native Gratis

React Native Tutorial: Membangun aplikasi iOS dan Android dengan Javascript — Dalam tutorial ini, Christine Abernathy memandu proses development aplikasi dengan React Native untuk iOS. Anda akan belajar cara memasang tools yang diperlukan dan menerapkan dasar-dasar React Native seperti hot reloading, app structuring, dll.
Tutorial Shoutem pada React Native: Buat Aplikasi Mobile Pertama Anda — Tutorial gratis dari Shoutem School ini akan mengajari Anda prosedur langkah demi langkah untuk mengembangkan aplikasi React Native yang sederhana.
React Native Cheat Sheet — Tidak peduli berapa banyak bookmark yang Anda miliki, React Native cheat sheet ini masuk ke bookmark bar Anda. Sebuah cara cemerlang untuk menghindari frustasi saat sedang belajar dan fokus pada apa yang benar-benar penting.
Tutorial React Native Berbayar
Berinvestasi dalam diri Anda sendiri adalah ide yang sangat bagus, jadi berikut ini beberapa kursus rekomendasi:
Egghead’s React native fundamentals — Kursus yang diampu oleh Tyler McGinnis ini akan membantu Anda mempelajari komponen-komponen penting dari React Native, dari membangun UI untuk fetching dan persisting data ke backend Firebase.
React Native for absolute beginners — Jika Anda adalah penggemar tutorial Udemy, maka React Native for absolute beginner adalah salah satu yang terbaik untuk memulai perjalanan Anda untuk belajar React Native.

5. Mengatur Environment

Sekarang setelah Anda tahu cara React Native bekerja, mari kita lanjutkan dengan menyiapkan lingkungan dev untuk Android dan iOS:

React Native Environment setup (iOS dan Android) — Artikel oleh Paul Napier ini akan membantu Anda mengatur environment untuk React Native di iOS dan Android.

6. Belajar dengan Membangun Aplikasi React Native yang Sebenarnya

Dalam perjalanan Anda untuk menjadi React Native developer, Anda akan menghadapi beberapa tantangan saat belajar coding hingga di saat benar-benar membangun aplikasi. Ada beberapa kursus gratis yang hanya didedikasikan untuk membuat Anda belajar cara membuat aplikasi React Native yang sebenarnya:

Buat konverter mata uang sederhana di React Native untuk iOS
Kursus gratis yang mengagumkan yang dibuat oleh Spencer Carli ini akan membantu Anda mengembangkan aplikasi konversi mata uang sederhana di React Native. Setiap modul video dalam kursus ini benar-benar singkat, sangat menarik dan yang paling penting tidak membuat Anda mengantuk.
Buat aplikasi kamus di React Native untuk Android
Tutorial Tutsplus adalah cara yang bagus untuk membangun sistem pembelajaran Anda. Salah satu tutorial yang direkomendasikan ke orang-orang yang baru saja memulai dengan React Native adalah mengembangkan aplikasi kamus di React Native untuk Android. Tutorial ini dibuat untuk pemula dengan fokus ke dasar pembelajaran, dari cara menginstal React Native untuk Android hingga menyelesaikan pembuatan aplikasi kamus.

7. State Management dalam React Native: Redux dan MobX Tutorial

State management merupakan aspek penting dalam non-trivia app. Jika Anda memiliki latar belakang mobile development maka Anda pasti menyadari jika setiap komponen dalam aplikasi memiliki state-nya sendiri. Saat Anda sedang membangun aplikasi skala kecil, mungkin lebih mudah bagi Anda untuk mengelola state menggunakan props. Di sisi lain, aplikasi seluler real-time mungkin mengharuskan state Anda untuk dapat sepenuhnya diakses di seluruh aplikasi.

Dua state management libraries yang paling populer untuk React Native adalah Redux dan MobX.

Redux oleh Dan Abramov dan Andrew Clark adalah arsitektur flux yang terkenal. Ini adalah library yang paling banyak digunakan untuk mengelola global state dari suatu aplikasi.

Setelah Anda belajar mengembangkan aplikasi Native React yang paling sederhana, Anda harus mempersiapkan diri untuk skenario aplikasi yang lebih kompleks. Karena aplikasi cenderung tumbuh dan menjadi lebih kompleks, Anda harus memilih arsitektur yang baik untuk menghindari skalabilitas dan masalah maintenance di masa mendatang. Di sinilah Redux masuk ke dalam skema.

Berikut ini beberapa sumber bagus untuk belajar Redux:

Learn Redux — Kursus ini terdiri dari 20 video yang akan membantu Anda belajar Redux dengan menerapkan aplikasi instagram clone menggunakan React and React Router.
Getting Started with Redux — Ini adalah program hebat yang mengajari Anda cara menggunakan redux dalam aplikasi React, dibuat oleh pencipta Redux — Dan Abramov.

8. Menerapkan Navigasi di Aplikasi Anda

Dulu hanya ada satu komponen navigasi yang baik untuk React Native: NavigatorIOS. Itu sangat diapresiasi oleh sebagian besar anggota komunitas tetapi terbatas untuk iOS. Komponen lain yang seharusnya bekerja untuk kedua platform seperti ExNavigation, dan NavigationExperimental memiliki banyak masalah terkait kinerja.

Untungnya, Navigasi dalam React native telah mengalami peningkatan, berkat React Navigation.

React Navigation

Berikut beberapa sumber yang dapat membantu Anda berkenalan React Navigation:

Getting Started with React Navigation — Dalam tutorial ini, Spencer Carli akan menunjukkan cara bagaimana Anda dapat mengintegrasikan React Navigation di proyek React Native.
Menggunakan Navigasi React — Artikel ini menjelaskan perbedaan React Navigation dari dokumentasi resmi React Navigation.
Untuk menangani skenario aplikasi yang rumit, Anda mungkin ingin menggunakan solusi alternatif lain seperti React Navigation oleh AirBnB atau React Native Navigation oleh Wix.
React Native Navigation
Berikut ini adalah dokumentasi dan sumber daya untuk mempelajari cara menyiapkan setup native navigation solutions seperti native navigation dan react native navigation:
React Native Navigation oleh Wix — Dokumentasi resmi oleh Wix untuk menerapkan React Native Navigation di aplikasi Anda.
Getting started with React Native Navigation — Dalam artikel ini, Spencer Carli memandu Anda cara instalasi React Native Navigation di aplikasi React Native.

9. Debugging React Native Apps

Sangat penting bagi Anda untuk mempercepat proses debugging dengan bantuan beberapa tools debugging. React Native memungkinkan Anda untuk men-debug code dengan menggunakan metode console.log (), yang seharusnya familiar. Selain konsol logging, ada beberapa tools debug lain seperti Reactotron oleh Infinite Red dan React Developer Tools, yang sangat berguna. Untuk solusi sederhana dalam melakukan debug pada aplikasi React Native, maka React Native Debugger adalah yang Anda butuhkan.

Untuk mempelajari cara men-debug React Native code dengan menggunakan tools di atas, Anda bisa merujuk ke sumber daya berikut:

Debug your React Native application like a God — Dalam artikel ini, Shahen Hovhannisyan memandu Anda ke seluruh proses debugging. React Native application menggunakan React dan Redux Devtools.
Debug React dan Redux dengan React Native Debugger — Artikel ini memandu Anda ke seluruh proses debugging React Native dengan React Native Debugger.
Reaksi Debug Native menggunakan Reactotron — Reactotron adalah aplikasi desktop untuk memeriksa proyek React Native di macOS, Linux dan Windows. Reactotron dapat digunakan untuk melacak status aplikasi Anda, global error , saga dan, mungkin yang paling penting, kinerja. Dokumentasi resminya adalah cara yang bagus untuk belajar cara menggunakannya. Jika Anda merasa bahwa dokumentasi tidak cukup, maka Anda juga dapat menonton video ini.

10. Meningkatkan Kinerja Aplikasi Anda

Sekarang saatnya untuk mempelajari cara membuat aplikasi yang berkinerja dan berkualitas tinggi dengan React Native. Berikut adalah dua hal yang perlu diingat tentang kinerja React Native:

Bridge optimization — React Native bekerja dengan konsep bridge (jembatan) yang memisahkan dua jenis thread yaitu JavaScript thread dan native thread. Dalam banyak kasus, performance glitches terjadi ketika Anda perlu memindahkan komponen dari satu thread ke thread yang lain. Dalam kasus lain, bisa jadi karena beban kerja yang berat pada satu JavaScript thread karena perhitungan yang rumit, contohnya animasi.

Mengelola complex views — Perlu diperhatikan bahwa Anda mungkin tidak perlu meningkatkan performance aplikasi React Native Anda jika Anda membuat aplikasi hanya dengan beberapa views. Namun, jika Anda memiliki beberapa views dengan navigasi yang rumit, ada baiknya untuk memperhatikan performance aplikasi.

Jika Anda ingin menggali lebih dalam tentang konsep bridge dan thread, Anda dapat membaca artikel yang ditulis Tadeu Zagallo yang akan mengajarkan Anda tentang arsitektur internal aplikasi React Native.

Meningkatkan Performance Aplikasi React Native

Berikut adalah beberapa sumber yang fokus pada peningkatan performance aplikasi React Native Anda:

Dive into React Native performance — Artikel oleh Facebook ini akan memperkenalkan kepada Anda masalah paling umum yang muncul dalam isu peningkatan performance aplikasi React Native
Keterbatasan performa React Native dan cara mengatasinya — Tal kol, software developer di Wix engineering menyampaikan pidato tentang cara mengoptimalkan kinerja aplikasi React Native yang sangat layak untuk ditonton.
React Native app performance issues — Terdapat list React Native app performance issues yang kerap muncul beserta solusinya. Artikel oleh Hardik Shah ini tidak hanya mencantumkan beberapa masalah umum yang terjadi, tetapi juga memberi Anda panduan solusi untuk menyelesaikannya.

11. Tutorial Testing React Native

Setelah melakukan debug dan pengoptimalan performance, mari kita masuk ke komponen testing!

Anda dapat menguji aplikasi React Native Anda menggunakan Jest yang secara resmi didukung oleh Facebook. Selain Jest, tools seperti Detox dan Appium juga dapat digunakan untuk testing React Native.

Menguji aplikasi React Native Anda

Berikut ini adalah sumber untuk membantu Anda mempelajari tools tersebut:

Testing React Native menggunakan Jest dan Detox — Artikel oleh Monte Thakkar ini adalah sumber yang bagus untuk mempelajari cara menggunakan Jest untuk unit testing dan Detox untuk testing end-to-end aplikasi React Native Anda.
Appium + React Native Quickstart — Artikel oleh Chase Seibert ini akan membantu Anda dengan dasar-dasar writing test dengan menggunakan Appium untuk React Native.
Testing aplikasi React Native dengan Appium — Artikel bermanfaat tentang penggunaan Appium dengan React Native pada iOS dan Android.

Kesimpulan

Sumber-sumber yang disebut di artikel ini akan memberi Anda pemahaman yang baik tentang React Native — konsep inti dan struktur dasarnya, praktik yang baik dengan struktur file/komponen, React Native debugger, serta tips-tips berguna untuk pemula yang ingin menguasai React Native.

Sumber

Kerja di Startup: Panduan Lengkap untuk React Native Developer