Membangun Komponen React Pertama Anda

React - Dilatih hingga Oktober 2023 React adalah library JavaScript yang elegan untuk membangun antarmuka pengguna - favorit para pengembang yang ingin menjaga efisiensi dan skalabilitas pengembangan. Jika Anda baru mengenal React Native, salah satu hal pertama dan terpenting yang harus Anda pahami adalah cara membuat dan menggunakan komponen. Komponen React dapat digambarkan sebagai blok bangunan terkecil dari setiap add-on, yang membutuhkan penggunaan JSX untuk membangun UI yang fungsional, dapat digunakan kembali, dan deklaratif ke dalam komponen independen. Pada artikel ini, kita akan belajar membuat komponen React Native pertama Anda.

Prasyarat

Sebelum kita masuk ke tutorial ini, pastikan Anda sudah memilikinya:

Pengetahuan dasar tentang JavaScript: ES6, fungsi panah, destrukturisasi, modul, dll.
Node.js & npm sudah terinstal: React membutuhkan Node.js dan npm (atau Yarn) untuk konfigurasi. Unduh keduanya dari nodejs.org.
Editor teks: VS Code, khususnya, bagus untuk pengembangan.

Memulai Lingkungan React Anda

Pertama, Anda akan membutuhkan lingkungan pengembangan React. Ini akan membuat aplikasi React baru menggunakan perintah:

npx create-react-app my-first-component
cd my-first-component
npm start

Ini akan menyiapkan proyek React dan memulai server pengembangan yang membuka aplikasi Anda di browser. Defaultnya adalah template starter React.

sumber: codepolitan.com

Dasar-dasar Komponen React

Ada dua jenis komponen React: fungsional dan berbasis kelas. Karena komponen fungsional tidak terlalu kompleks dan menjadi standar dalam pengembangan React yang lebih baru, kita akan membahasnya dalam tutorial ini.

Berikut ini adalah struktur dari komponen fungsional

Komponen fungsional adalah fungsi JavaScript yang mengembalikan JSX, sebuah ekstensi sintaksis untuk JavaScript yang terlihat mirip dengan HTML. Berikut ini adalah contoh sederhana:

function Greeting() {
return <h1>Hello, World!</h1>;
}

export default Greeting;

Kode di atas mendefinisikan komponen Greeting yang membuat header dengan teks “Halo, Dunia!”.

Membangun Komponen Pertama Anda

Langkah demi langkah pengembangan komponen react khusus

Langkah 1: Membuat File Baru

Buat sebuah berkas bernama WelcomeMessage di dalam folder src pada proyek React.js Anda.

Langkah 2: Menulis Komponen

Di dalam WelcomeMessage tambahkan kode berikut ini. js:

import React from 'react';

function WelcomeMessage() {
return (
<div>
<h1>Welcome to My First React Component!</h1>
<p>This is a simple component built with React.</p>
</div>
);
}

export default WelcomeMessage;

Komponen ini merender judul dan paragraf di dalam elemen div.

Langkah 3: Gunakan Komponen

Buka src/App.js dan sesuaikan untuk menambahkan komponen baru Anda:

import React from 'react';
import WelcomeMessage from './WelcomeMessage';

function App() {
return (
<div className="App">
<WelcomeMessage />
</div>
);
}

export default App;

Sekarang simpan berkas tersebut dan buka peramban Anda. Anda akan melihat konten di dalam komponen WelcomeMessage Anda.

Props yang Akan Diterima Komponen Anda

Props (kependekan dari properti) adalah apa yang Anda gunakan untuk memasukkan data ke dalam komponen Anda sehingga komponen tersebut dapat dinamis dan dapat digunakan kembali. Sekarang, mari kita memodifikasi komponen WelcomeMessage untuk menerima props nama:

function WelcomeMessage({ name }) {
return (
<div>
<h1>Welcome, {name}!</h1>
<p>This is a simple component built with React.</p>
</div>
);
}

Sekarang, modifikasi App.js untuk mengoperkan sebuah prop nama:

function App() {
return (
<div className="App">
<WelcomeMessage name="John" />
</div>
);
}

Segarkan browser Anda, dan Anda akan melihat salam yang dipersonalisasi.

Kesimpulan

Selamat! Anda telah membuat dan mengkustomisasi komponen React pertama Anda. Komponen adalah fondasi dari aplikasi React, memungkinkan pengembang untuk membuat kode yang modular dan dapat dipelihara. Dari sini, jelajahi konsep-konsep yang lebih canggih seperti state management, hooks, dan siklus hidup komponen untuk meningkatkan keterampilan React Anda ke tingkat selanjutnya.

kembali ke>>>> React.js untuk Pemula: Membangun Aplikasi Pertama Anda