Komponen Basic Project Baru React Native (JavaScript)

Berikut adalah tahapan pembuatan Aplikasi Android menggunakan Framework React Native. Tutorial ini bermaksud untuk membantu pengerjaan awal project agar tidak tersesat saat pertama kali inisiasi project. Untuk project kali ini akan saya namakan mycyclocomp. Dengan main script menggunakan JavaScript (saya akan menonaktifkan TypeScript pada langkah dibawah).

Langkah 1 : Inisiasi Project

Masuk ke terminal dan jalankan perintah berikut:

npx @react-native-community/cli@latest init mycyclocomp

Proses inisiasi project akan membuat sebuah folder baru dengan nama mycyclocomp. Di dalamnya akan berisi file standart dari project app React Native.

Langkah 2 : Set local.properties

Buat file local.properties berisi direktori dari Android SDK pada terminal dengan perintah berikut:

cd android 
nano local.properties

Isikan direktori file SDK di dalamnya:

sdk.dir=/home/[user]/Android/Sdk

Langkah 3 : TypeScript -> JavaScript

Hapus file tsconfig.json. Dan rubah isi dari file babel.config.js menjadi seperti berikut:

module.exports = {
  presets: ['@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Setelah itu install dependency pada terminal dengan perintah berikut:

npm install --save-dev @react-native/babel-preset
npm install react-native-reanimated
npm install react-native-worklets

Langkah 4 : App.tsx -> App.js

Ubah file App.tsx menjadi App.js dan rubah semua isi file menjadi berikut:

import React from 'react';
import { View, Text, StyleSheet, SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}>Hello, React Native 👋</Text>
        <Text style={styles.subtitle}>Ini App.js sederhana</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: 'gray',
  },
});

Langkah 5 : Test Build and Run

Langkah selanjutnya adalah proses Build dan Run, pastikan sudah terinstall Emulator Android atau ADB (Debug ke Device) dan jalankan perintah berikut:

cd android
./gradlew clean
cd ..
npx react-native run-android
npx react-native start

Dengan ini Komponen Basic dari React Native (JavaScript) telah dibuat. Selanjutnya bisa dicustom sesuai dengan App yang ingin kalian buat.

Published on April 01, 2026  in category Coding, JavaScript, React Native