Cara membuat project baru react native menggunakan Expo

 Untuk memulai membuat project baru react native caranya mudah sekali,

1. install npm

2. install yarn

3. install expo

4. setelah 3 tahap instalasi dilakukan, buka command prompt

5. ketikan syntak dibawah ini

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcZU6yTH9XzHcN_T-Ujz37E2k73Lh9dFVPfeyQACV6oR28sllVzii00Zyoll0MPjKoP-CKrFZNAsAACgRtBUCSXTr6hQ3oNHECaoe_cdr8NimkmzIRSBkkg8TcuJwrEEqMA8BXk1ki3jhL/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> expo init namaprojectbebas  

</code></pre>

note: nama project bebas ya, bisa diganti sesuai dengan yang kita inginkan

6. setelah itu akan muncul opsi seperti dibawah, untuk mulai codingan awal saya biasanya memilih blank, setelah memilih blank maka proses instalasi dimulai

<a href="https://ibb.co/FxBY5Rr"><img src="https://i.ibb.co/7YGpnsf/Screenshot-2.png" alt="Screenshot-2" border="0"></a>

7. tunggu proses instalasi project baru selesai

8. setelah selesai maka akan terbentuk sebuah folder baru yang berisi aplikasi react native yang baru saja kita buat, untuk masuk ke direktori tersebut, pada command prompt ketikan

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>expo init namaprojectbebas  

</code></pre>


9. kemudian ketikan perintah dibawah, untuk menjalankan apps tersebut

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcZU6yTH9XzHcN_T-Ujz37E2k73Lh9dFVPfeyQACV6oR28sllVzii00Zyoll0MPjKoP-CKrFZNAsAACgRtBUCSXTr6hQ3oNHECaoe_cdr8NimkmzIRSBkkg8TcuJwrEEqMA8BXk1ki3jhL/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> yarn start

</code></pre>

10. setelah itu akan muncul pop up browser, pada menu sidebar pilih open project in web browser, selesai

11. untuk editing kode bisa menggunakan atom, dengan open folder project yang baru saja kita buat. Ketika ada perubahan dan di save , otomatis tampilan di browser akan berubah.


Komentar

Postingan populer dari blog ini

Manfaat IT dalam bisnis skala kecil