React adalah pustaka JavaScript terkenal yang dapat Anda gunakan untuk membuat UI untuk aplikasi web serbaguna. React dapat diadaptasi dan Anda dapat menggabungkannya dengan teknologi lain untuk membuat aplikasi yang lebih kuat dan efektif.

Pelajari cara mengintegrasikan React dengan berbagai teknologi dan Anda akan mendapatkan manfaat dari berbagai sumber.

1. Bereaksi + Redux

Redux adalah perpustakaan manajemen negara yang digunakan bersama dengan React. Redux memfasilitasi manajemen status aplikasi terpusat. Saat membangun aplikasi kompleks dengan banyak status, React dan Redux bekerja sama dengan baik.

Berikut ilustrasi cara menggunakan Redux dengan React:

impor Reaksi dari'reaksi';
impor { createStore } dari'redux';
impor { Pemberi } dari'bereaksi-redux';
const keadaan awal = { menghitung: 0 };
fungsiperedam(status = kondisi awal, tindakan) {
mengalihkan





instagram viewer
 (tipe aksi) {
kasus'KENAIKAN':
kembali { menghitung: negara.hitung + 1 };
kasus'PENGURANGAN':
kembali { menghitung: negara bagian.hitung - 1 };
bawaan:
kembali negara;
 }
}

constimpor Reaksi dari'reaksi';
impor { useQuery, gql } dari'@apollo/klien';
const GET_USERS = gql`
 kueri GetUsers {
 pengguna {
 pengenal
 nama
 }
 }
;
fungsiPengguna() {
const { memuat, kesalahan, data } = useQuery (GET_USERS);
jika (memuat) kembali<P>Memuat...P>;
jika (kesalahan) kembali<P>Kesalahan :(P>;
kembali (
store = createStore (peredam);
fungsiMenangkal() {
const hitungan = gunakanSelektor(negara => negara bagian.hitung);
const pengiriman = useDispatch();
kembali (


Hitung: {hitung}</p>
 menugaskan({ jenis: 'KENAIKAN' })}>+</button>
 menugaskan({ jenis: 'PENGURANGAN' })}>-</button>
 </div>
 );
}
fungsiAplikasi() {
kembali (


 </Provider>
 );
}
eksporbawaan Aplikasi;

Contoh ini membuat toko Redux dengan status awal 0. Fungsi peredam kemudian menangani KENAIKAN Dan PENGURANGAN operasi. Kode menggunakan useSelector Dan useDispatch kait untuk mendapatkan hitungan yang sedang berlangsung dan mengirimkan aktivitas satu per satu.

Terakhir, untuk membuat toko dapat diakses oleh seluruh aplikasi, bungkus komponen penghitung di komponen penyedia.

2. Rendering Sisi Server Dengan Next.js

Next.js adalah kerangka kerja pengembangan yang mengoptimalkan kecepatan situs web dan SEO taktik dengan mentransmisikan HTML ke klien dan menggunakan rendering sisi server dari komponen React.

Perangkatnya yang kuat bekerja bersama React, memberikan kinerja luar biasa dan peringkat mesin pencari yang tinggi.

// halaman/indeks.js
impor Reaksi dari'reaksi';
fungsiRumah() {
kembali (


Halo, Dunia!</h1>


Ini adalah komponen React yang dirender oleh server.</p>
 </div>
 );
}
eksporbawaan Rumah;

Dalam model ini, Anda mencirikan komponen React yang disebut Rumah. Next.js membuat halaman HTML statis dengan konten komponen ini saat merendernya di server. Ketika halaman menerima kunjungan dari klien, itu akan mengirimkan HTML ke klien dan menghidrasi komponen, memungkinkannya berfungsi sebagai komponen React yang dinamis.

3. Pengambilan Data Dengan GraphQL

GraphQL adalah bahasa kueri untuk API yang menawarkan alternatif yang mahir, kuat, dan mudah beradaptasi untuk REST. Dengan GraphQL, Anda bisa mendapatkan data lebih cepat dan memperbarui antarmuka pengguna lebih cepat.

Ini adalah ilustrasi cara menggunakan GraphQL dengan React:

impor Reaksi dari'reaksi';
impor { useQuery, gql } dari'@apollo/klien';
const GET_USERS = gql`
 kueri GetUsers {
 pengguna {
 pengenal
 nama
 }
 }
;
fungsiPengguna() {
const { memuat, kesalahan, data } = useQuery (GET_USERS);
jika (memuat) kembali<P>Memuat...P>;
jika (kesalahan) kembali<P>Kesalahan :(P>;
kembali (


 {data.pengguna.peta(pengguna => (
{user.name}</li>
 ))}
 </ul>
 );
}
fungsiAplikasi() {
kembali (


Pengguna</h1>

 </div>
 );
}
eksporbawaan Aplikasi;

Model ini memanggil useQuery fungsi dari @apollo/klien perpustakaan untuk membawa ikhtisar klien dari antarmuka Pemrograman GraphQL. Daftar pengguna kemudian ditampilkan di UI.

4. Styling Dengan CSS-in-JS

CSS-in-JS adalah metode berbasis JavaScript untuk menata komponen React. Itu membuatnya lebih mudah untuk mengelola lembar gaya yang rumit dan memungkinkan Anda menulis gaya dalam gaya modular dan berbasis komponen.

Berikut ilustrasi cara menggunakan CSS-in-JS dengan React:

impor Reaksi dari'reaksi';
impor bergaya dari'gaya-komponen';
const Tombol = ditata.tombol`
 warna latar belakang: #007bff;
 warna: #ff;
 lapisan: 10px 20px;
 radius batas: 5px;
 ukuran huruf: 16px;
 kursor: penunjuk;
 &: arahkan {
 warna latar belakang: #0069d9;
 }
;
fungsiAplikasi() {
kembali (


Klik saya!</Button>
 </div>
 );
}
eksporbawaan Aplikasi;

Contoh ini membuat a tombol bergaya komponen menggunakan bergaya fungsi. Ini menentukan nada pengalaman tombol, nada teks, bantalan, sapuan garis, dimensi teks, dan kursor.

Kondisi melayang yang mengubah warna latar belakang saat pengguna mengarahkan kursor ke tombol juga ditentukan. Tombol akhirnya dirender menggunakan komponen React.

5. Mengintegrasikan Dengan D3 untuk Visualisasi Data

D3 adalah perpustakaan JavaScript manipulasi dan visualisasi data. Anda dapat membuat visualisasi data yang kuat dan interaktif menggunakan React. Ilustrasi cara menggunakan D3 dengan React adalah sebagai berikut:

impor Bereaksi, { useRef, useEffect } dari'reaksi';
impor * sebagai d3 dari'd3';
fungsiGrafik batang({data}) {
const ref = gunakanRef();
 gunakanEfek(() => {
const svg = d3.pilih (ref.current);
const lebar = svg.attr('lebar');
const tinggi = svg.attr('tinggi');
const x = d3.scaleBand()
 .domain (data.peta((D) => d.label))
 .jangkauan([0, lebar])
 .lapisan(0.5);
const y = d3.scaleLinear()
 .domain([0, d3.max (data, (d) => d.nilai)])
 .range([tinggi, 0]);
 svg.pilihSemua('tepat')
 .data (data)
 .memasuki()
 .menambahkan('tepat')
 .attr('X', (d) => x (d.label))
 .attr('y', (d) => y (nilai d.))
 .attr('lebar', x.bandwidth())
 .attr('tinggi', (d) => tinggi - y (nilai d.))
 .attr('mengisi', '#007bff');
 }, [data]);
kembali (
400}>
 {/* sumbu pergi ke sini */}
 </svg>
 );
}
eksporbawaan Grafik batang;

Kode ini mendefinisikan a Grafik batang komponen yang menerima a data prop di cuplikan kode sebelumnya. Ini memanggil gunakanRef hook untuk membuat referensi ke komponen SVG yang akan menggunakannya untuk menggambar garis besar.

Setelah itu, itu merender batang grafik dan menentukan skala dengan useEffect() pengait, yang memetakan nilai data ke koordinat layar.

6. Menambahkan Fungsi Real-Time Dengan WebSockets

Menerapkan WebSockets menetapkan jalan dua arah yang beroperasi penuh yang memungkinkan komunikasi berkelanjutan antara klien dan server. Mereka mengaktifkan React untuk menambahkan kegunaan berkelanjutan ke aplikasi web, misalnya, papan diskusi, pembaruan langsung, dan peringatan.

Anda menggunakan WebSockets dengan cara berikut dengan React:

impor Bereaksi, { useState, useEffect } dari'reaksi';
impor io dari'socket.io-klien';
fungsiRuang obrolan() {
const [pesan, setMessages] = useState([]);
const [InputValue, setInputValue] = useState('');
const soket = io(' http://localhost: 3001');
 gunakanEfek(() => {
 soket.on('pesan', (pesan) => {
 setMessages([...pesan, pesan]);
 });
 }, [pesan, soket]);
const handleSubmit = (e) => {
 e.preventDefault();
 socket.memancarkan('pesan', nilaimasukan);
 setInputNilai('');
 };
kembali (




 {pesan.peta((pesan, saya) => (
{pesan}</li>
 ))}
 </ul>


 jenis="teks"
 nilai={nilaimasukan}
 onChange={(e) => setInputValue (e.target.nilai)}
 />
"kirim">Kirim</button>
 </form>
 </div>
 );
}
eksporbawaan Ruang obrolan;

Dalam contoh ini, Anda mendefinisikan a Ruang obrolan komponen yang menggunakan socket.io-klien perpustakaan untuk terhubung ke server WebSocket. Anda dapat menggunakan useState kait untuk menangani daftar pesan dan nilai informasi.

Setelah menerima pesan baru, the useEffect hook mendaftarkan pendengar untuk memicu pembaruan acara pesan ke daftar pesan. Untuk menghapus dan mengirim nilai masukan untuk pesan acara, ada a handleSubmit fungsi.

Selanjutnya, formulir dengan bidang input dan tombol serta daftar pesan yang diperbarui akan ditampilkan di layar.

Dengan setiap pengiriman formulir, memanggil handleSubmit fungsi tidak bisa dihindari. Untuk menyampaikan pesan ke server, metode ini memanfaatkan soket.

7. Mengintegrasikan Dengan React Native untuk Pengembangan Seluler

React Local adalah sistem untuk membangun aplikasi universal lokal menggunakan React, yang terhubung untuk mempromosikan aplikasi portabel untuk tahap iOS dan Android.

Menggunakan integrasi React Native dengan React, Anda dapat menggunakan desain berbasis komponen dan kode React yang dapat digunakan kembali di seluruh platform seluler dan web. Ini mengurangi siklus pengembangan aplikasi seluler dan waktu ke pasar. React Native adalah kerangka kerja populer untuk mengembangkan aplikasi seluler asli yang memanfaatkan pustaka React.

Memperkenalkan pemrograman dan pustaka vital, seperti Node.js, Tanggapi CLI Lokal, Dan Xcode atau Studio Android, sangat penting bagi desainer yang berurusan dengan iOS dan Android secara terpisah. Terakhir, komponen React Native yang sederhana memungkinkan pengembang membuat aplikasi seluler yang tangguh dan kaya fitur untuk platform iOS dan Android.

Gabungkan Bereaksi Dengan Teknologi Lain

React adalah perpustakaan yang populer dan efektif untuk membangun aplikasi online. React adalah pilihan yang bagus untuk membuat antarmuka pengguna, tetapi juga digunakan dengan teknologi lain untuk meningkatkan kemampuannya.

Dengan mengintegrasikan React dengan teknologi ini, pengembang dapat membuat aplikasi yang lebih rumit dan canggih yang menawarkan pengalaman pengguna yang lebih baik. React dan ekosistem alat dan perpustakaannya mencakup semua yang diperlukan untuk membuat situs web dasar atau aplikasi web yang kompleks.