Tag: react

Menggunakan Component NativeBase untuk React Native

NativeBase adalah komponen user interface untuk React Native  yang dapat digunakan pada platform Android maupun iOS.

Komponen-komponen yang tersedia adalah:

Bagaimana cara menggunakannya?

npm install native-base --save
react-native link
npm start

Lalu, import component sesuai yang dibutuhkan. Misalnya component Container, Header dan Title.

import { Container, Header, Title } from 'native-base';

Pada component tersebut, terdapat konfigurasi yang dapat diatur sesuai kebutuhan.

Misal, pada component Radio terdapat konfigurasi seperti berikut:

Property Default Option Description
selected false boolean (true/false) nilai dari pilihan

 

Contoh dari pemakaiannya seperti berikut:

<Content>
     <ListItem>
         <Left>
             <Text>Female</Text>
          </Left>
          <Right>
              <Radio selected={false} />
          </Right>
     </ListItem>

     <ListItem>
         <Left>
             <Text>Male</Text>
          </Left>
          <Right>
              <Radio selected={true} />
          </Right>
     </ListItem>
</Content>

Dari code diatas, menghasilkan list dengan radio button yang memilih text “Male“.

Selamat mencoba!

 

Referensi:

NativeBase

Membangun Mobile Apps dengan React Native

App

Instagram, Facebook, Pinterest, Uber, SoundCloud Pulse dan Skype.

Pasti sudah tidak asing dengan beberapa aplikasi yang disebutkan diatas. Aplikasi tersebut dibangun menggunakan React Native.

Sudah pernah mendengar React Native sebelumnya?

React Native merupakan framework berbasis JavaScript yang dibuat dan dikembangkan oleh Facebook. Bermula pada tahun 2013, React Native merupakan sebuah proyek internal Facebook Hackathon. Hingga akhirnya Maret 2015, pada F8 Conference, Facebook mengumumkan React Native terbuka untuk publik dan tersedia di GitHub.

Lalu, apa kelebihan React Native dibandingkan dengan framework mobile apps lainnya?

Dengan React Native, kita memungkinkan untuk membangun aplikasi Android dan IOS sekaligus. Aplikasi yang dibangun bukan hybrid atau web, tapi benar-benar native.

Untuk UI dan UX nya sendiri menggunakan CamelCase, yaitu Javascript styling hampir mirip dengan CSS.

Bagaimana cara belajar React Native? Apa sulit? Jawabannya tidak. Bagi pemula, Create React Native App adalah cara termudah untuk membuat suatu aplikasi dengan React Native tanpa menggunakan Android Studio.

Tools penunjang yang digunakan adalah Expo. Expo dapat dipasang di smartphone yang berfungsi sebagai emulator untuk melihat proyek yang sedang dibangun dengan React Native.

 

 

Tunggu apalagi, buka command prompt Anda, ketik syntax berikut, lalu mulai project pertama menggunakan React Native.

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

Namun pastikan NodeJS dan NPM sudah terpasang di perangkat Anda.

Selamat mencoba! 🙂

 

Referensi: