React Native adalah salah satu framework dari JavaScript untuk membantu mengembangkan aplikasi berbasis Android dan iOS. Kemudian, juga banyak sekali perusahaan besar yang menggunakan seperti Facebook.
Dalam pengembangannya, tidak memerlukan pembuatan aplikasi hybrid. React Native juga mampu untuk mengkompilasi sebuah aplikasi ke dalam native code, baik pada Android maupun iOS. Selanjutnya, kita akan masuk pada pembahasan mengenai kelebihan apa saja yang dimiliki kerangka kerja tersebut.
Kelebihan dari react native
Berikut merupakan beberapa alasan
penting mengapa framework ini sangat direkomendasikan untuk pengembangan
produk aplikasi yang lebih efektif dan efisien.
1. Mempunyai kredibilitas yang tinggi
Framework ini telah banyak digunakan
oleh perusahaan besar seperti Tesla, Instagram, hingga Walmart. Selain
itu, React Native juga cocok untuk digunakan oleh startup. Dimana,
proses pengembangan menggunakan bahasa pemrograman JavaScript yang cocok
untuk pengembangan cross platform.
2. Kemudahan dari sisi teknis
Selain itu, dalam proses pengembangan
program juga mudah untuk dipelajari dan diimplementasikan. Saat ini
terdapat banyak sekali tutorial dan kursus pelatihan untuk mempelajari
React Native.
3. Tidak memerlukan resource yang besar
Dan kelebihan yang terakhir disini
adalah proses pengembangan yang cukup efektif dan tidak menggunakan kode
program yang terlalu banyak. Cukup dengan menggunakan berbagai template
yang ada, anda hanya perlu untuk menyalin saja. Kemudian, akan tampak
hasilnya secara langsung.
Berikut code html "login" dengan react
pertama kita buat file html biasa dengan nama login4.html, di dalam body kita membuat form dan button untuk mengirimkan data.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar Reactjs</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js">
</script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production
.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
</script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-6">
<h2>Login ReactJS</h2>
<form>
<div className="form-group">
<label for="exampleInputEmail1">Username
</label>
<input type="email"
className="form-control"
placeholder="Masukan username anda"
required/>
</div>
<div className="form-group">
<label for="exampleInputPassword1">
Password</label>
<input type="password"
className="form-control"
placeholder="Password" />
</div>
<div class="form-check">
<input type="checkbox"
className="form-check-input"
id="exampleCheck1"/>
<label className="form-check-label"
for="exampleCheck1">Check me out</label>
</div>
<button type="submit"
class="btn btn-primary btn-lg btn-block">
Submit</button>
</form>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Hello/>, document.getElementById("app"));
</script>
</body>
</html>
Output
Berikut code html "tambah produk" dengan react
pertama kita buat file html biasa dengan nama tambahProduk.html, di dalam body kita membuat form dan button untuk mengirimkan data.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar Reactjs</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js">
</script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production
.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/
css/bulma.min.css">
<link rel="stylesheet" href="./public/style/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvil
g9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="./public/script/script.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return (
<div>
<nav class="navbar navigasi" role="navigation"
aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="./image/user.png" class="avatar" width="40" height="40"
alt=""/>
<h2 class="title is-size-3-desktop is-size-5-mobile pl-2 green">
Ridho Ganteng</h2>
</a>
<a role="button" class="navbar-burger" aria-label="menu"
aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Dashboard
</a>
<a class="navbar-item">
Belanja
</a>
<a class="navbar-item">
Penjualan
</a>
<a class="navbar-item">
Laporan
</a>
</div>
</div>
</nav>
<a href="/index.html" class="button mx-5 mt-5 green">
<i class="fas fa-arrow-left pr-2 green"></i>Kembali
</a>
<form action="" class="is-flex is-flex-direction-column form my-6 ">
<div class="masukan mb-2 px-5">
<label for="inputNama" class="label">Nama Produk</label>
<div class="control">
<input type="text" class="input"/>
</div>
</div>
<div class="masukan mb-2 px-5">
<label for="inputNama" class="label">Jumlah</label>
<div class="control">
<input type="text" class="input"/>
</div>
</div>
<div class="masukan mb-2 px-5">
<label for="inputNama" class="label">Harga</label>
<div class="control">
<input type="text" class="input"/>
</div>
</div>
<div class="masukan my-2 px-5">
<div class="control">
<button class="button bg-green white is-rounded"
type="submit">Tambah</button>
</div>
</div>
</form>
<div class="hscroll">
<table class="table">
<thead>
<tr>
<td>No</td>
<td>Nama Produk</td>
<td>Jumlah</td>
<td>Satuan</td>
<td>Harga</td>
<td>Total Harga</td>
<td>Aksi</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kangkung</td>
<td>5</td>
<td>Ikat</td>
<td>Rp. 4000</td>
<td>Rp. 20.000</td>
<td>
<button class="button is-rounded bg-green white is-small">
Ubah</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Lemuru</td>
<td>3</td>
<td>Kg</td>
<td>Rp. 4000</td>
<td>Rp. 20.000</td>
<td>
<button class="button is-rounded bg-green white is-small">
Ubah</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Cabai</td>
<td>10</td>
<td>Kg</td>
<td>Rp. 4000</td>
<td>Rp. 20.000</td>
<td>
<button class="button is-rounded bg-green white is-small">
Ubah</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Tomat</td>
<td>10</td>
<td>Kg</td>
<td>Rp. 4000</td>
<td>Rp. 20.000</td>
<td>
<button class="button is-rounded bg-green white is-small">
Ubah</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="is-flex mx-4">
<label for="harga total">Total Bayar : </label>
<div class="harga-total">Rp 80.000</div>
</div>
<button class="button bg-green white is-rounded my-5 mx-4"type="submit">
Simpan
</button>
</div>
);
}
}
ReactDOM.render(<Hello/>, document.getElementById("app"));
</script>
</body>
</html>
Output
Referensi:
https://www.sekawanmedia.co.id/apa-itu-react-native/
Komentar
Posting Komentar