Pengenalan tentang React/Redux

Hai Hai Bertemu lagi bersama sayaa QueryRi Jadi disini saya akan membahas sedikir tentang React/Redux oke

===> Apa itu Pengembangan Front-End?

Pengembangan front-end mengacu pada apa yang dapat dilihat oleh pengguna akhir (juga biasa disebut sebagai "klien"). Dalam bentuk paling dasar, pengembangan front-end terdiri dari HTML, CSS, dan JavaScript.

Sebagai pengembang, Anda akan menemukan  web, dll.) Untuk menjadi sangat kompleks dan memiliki banyak bagian yang bergerak berbeda. Itu membuat menyelesaikan masalah jauh lebih sulit ketika Anda harus melalui labirin kode untuk menemukan masalah.

Akhirnya, pengembang memutuskan bahwa harus ada cara yang lebih baik untuk mengelola semua kode itu, sehingga mereka membuat perpustakaan yang bisa membuat hidup lebih mudah. React adalah salah satu perpustakaan itu.

===> Bereaksi adalah salah satu perpustakaan JavaScript paling populer untuk aplikasi web front-end.

Berikut adalah beberapa keuntungan dari Bereaksi:

Mempercepat

Situs web interaktif perlu memperbarui DOM (Document Object Model) setiap kali terjadi perubahan. Proses ini umumnya banyak akal dan lambat.

Dibandingkan dengan perpustakaan lain yang memanipulasi DOM, Bereaksi menggunakan DOM Virtual, memungkinkan untuk memperbarui hanya bagian-bagian situs web yang telah berubah. Ini meningkatkan kecepatan pembaruan secara dramatis, karena aplikasi web modern mungkin mengandung ribuan elemen.

 

===> Menambahkan Bereaksi

Bereaksi dapat ditambahkan ke situs web tanpa alat dan instalasi khusus.

Pertama, kita perlu menambahkan React library sebagai dua tag skrip ke kepala dokumen HTML kita:

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 

===> Selanjutnya, kita perlu menambahkan skrip lain, untuk mengaktifkan penggunaan JSX.

JSX adalah ekstensi sintaks untuk JavaScript, dan disarankan untuk digunakan dengan Bereaksi.

Jangan khawatir, kita akan belajar lebih banyak tentang BEJ di pelajaran selanjutnya. Untuk saat ini, mari kita tambahkan tag skrip berikut:

<script src="https://unpkg.com/babel-standalone@6/query.min.js"></script> 

===>Menambahkan Bereaksi

Setelah menambahkan tag skrip yang diperlukan, kita dapat mulai membangun aplikasi Bereaksi kita!

Kami menambahkan wadah, yang akan digunakan untuk menampilkan sesuatu menggunakan Bereaksi.

<div id="container"></div>

Sekarang, saatnya untuk kode Bereaksi pertama kami!

Mari kita tampilkan pesan sederhana sebagai tajuk:

<script type="text/babel">

ReactDOM.render(

  <h1>Hello, React!</h1>,

  document.getElementById('container')

) 

</script>

===> Buat Aplikasi Bereaksi

Dalam pelajaran sebelumnya, kami belajar cara menambahkan Bereaksi ke dokumen HTML sederhana menggunakan tag skrip.

Namun, aplikasi web nyata memiliki skala yang berbeda, berisi banyak file, menggunakan perpustakaan pihak ketiga, dll.

Facebook telah membuat alat praktis yang disebut [a href = "https://create-react-app.dev/"] Buat Aplikasi Bereaksi [/ a] yang membuatnya mudah untuk mengatur proyek Bereaksi hanya dengan perintah sederhana!

Untuk memulai, pastikan Anda memiliki versi terbaru [a href = "https://nodejs.org/en/"] Node [/ a] diinstal pada mesin Anda.

Jalankan perintah berikut di Terminal untuk membuat dan memulai aplikasi Bereaksi yang disebut "my-app":

npx create-react-app my-app

cd my-app

npm start 

===> Mengubah Output

Sekarang, ketika kita tahu cara membuat dan menjalankan proyek Bereaksi, mari kita ubah keluaran default menjadi pesan Hello yang sederhana.

Untuk melakukan itu, kita perlu membuka src / index.js dan mengubah kodenya sebagai berikut:

ReactDOM.render(

  <h1>Hello, React!</h1>,

  document.getElementById('root')

);

===>StackBlitz Untuk membuatnya lebih mudah untuk bermain-main dengan React, kami akan menggunakan StackBlitz sebagai taman bermain online kami untuk memungkinkan perubahan dan menjalankan kode Bereaksi nyata. Ini adalah proyek yang sama di StackBlitz: [a href = "https://stackblitz.com/edit/hello-react-example?file=index.js"] Cobalah di StackBlitz [/ a] Kami telah menghapus semua file tambahan, seperti gambar logo, untuk membuat struktur proyek lebih sederhana. Sekarang kita memiliki file-file berikut: index.html: Templat halaman HTML. index.js: Titik masuk aplikasi kami. style.css: stylesheet untuk proyek kami. package.json: memegang berbagai metadata yang relevan dengan proyek, seperti dependensi.

===> Proyek Kursus Sepanjang kursus ini, kami akan membantu Anda berlatih dan membuat aplikasi Contact Manager Anda sendiri menggunakan React, sehingga Anda akan mempertahankan apa yang telah Anda pelajari dan dapat menggunakannya. Manajer Kontak kami akan memungkinkan untuk melihat daftar kontak dan menambahkan yang baru ke daftar. Lihat sekilas aplikasi Contact Manager kami yang sedang beraksi di [a href = "https://stackblitz.com/edit/react-contact-manager-4"] StackBlitz [/ a].

===> Apa itu JSX? Dalam modul sebelumnya kami menggunakan kode berikut untuk menunjukkan output menggunakan Bereaksi:

ReactDOM.render(

  <h1>Hello, React!</h1>,

  document.getElementById('root')

);

===> Pengantar ke JSX

Mari kita lihat kode kita lagi:

ReactDOM.render(

  <h1>Hello, React!</h1>,

  document.getElementById('root')

); 

===> Ekspresi di JSX

Kita dapat menggunakan ekspresi JavaScript apa pun di dalam JSX menggunakan kurung kurawal.

Sebagai contoh:

const name = "David";

const el = <p>Hello, {name}</p>;

ReactDOM.render(

  el,

  document.getElementById('root')

); 

===> Atribut di JSX Kita dapat menentukan atribut menggunakan tanda kutip, seperti dalam HTML:

<div id="name"></div>

Saat menggunakan ekspresi JavaScript sebagai nilai atribut, tanda kutip tidak boleh digunakan:

<div id={user.id}></div> 

===> Hubungi Manajer Mari kita ubah [a href = "https://stackblitz.com/edit/react-contact-manager-4"] aplikasi Contact Manager [/ a] untuk menggunakan Redux! Kami membuat folder terpisah bernama komponen untuk komponen kami. Kami menggunakan Redux untuk menyimpan daftar kontak. Tindakan ADD_PERSON digunakan untuk menambahkan orang baru ke daftar. [a href = "https://stackblitz.com/edit/react-redux-contact-manager-final?file=index.js"] Periksa kode proyek lengkap tentang StackBlitz! [/ a] Perhatikan, bahwa kami mengelola status formulir kontak baru di Bereaksi, bukan Redux, karena data hanya digunakan oleh komponen AddPersonForm untuk sementara menyimpan nilai input. Anda dapat memindahkannya ke Redux, jika Anda mau; kami hanya menggunakan status komponen lokal untuk kesederhanaan.

Sekian dari saya maaf kalo ada yang salah:) By.QueryRi🌸Asalamualaikum🌻