React.JS untuk boneka pemula, menggunakan perpustakaan saat menulis robot perdagangan

Apa itu React JS untuk pemula, apa itu, tutorial, instalasi, dokumentasi – cara menginstal dan menggunakan perpustakaan React JS saat menulis robot perdagangan. Seringkali dalam iklan pekerjaan untuk spesialis komputer, Anda dapat menemukan persyaratan yang mengatakan bahwa Anda memiliki keterampilan di perpustakaan JavaScript. Ya, dan mereka mengharapkan pengetahuan tentang React tidak hanya dari pengembang perangkat lunak, tetapi juga dari programmer yang terlibat dalam pengembangan internal situs, dan bukan desain eksternal. Perpustakaan macam apa ini, peluang apa yang diberikannya dalam bekerja, dan dari mana seorang pemula mulai berkenalan? Mari kita cari tahu di artikel ini.

Pustaka JavaScript – Bereaksi: apa itu

React.JS adalah perpustakaan
bahasa pemrograman JavaScript populer , dibentuk oleh jejaring sosial online Facebook untuk meningkatkan dan menyederhanakan proses pengembangan cangkang eksternal situs dan aplikasi – antarmuka yang berinteraksi dengan pengguna. Fitur utama dari perpustakaan adalah komponen dan status. Komponen adalah bagian dari set digital yang bertanggung jawab atas penampilan bagian tertentu dari sistem yang dirancang.

Catatan! Bagian komponen tersebut dapat disarangkan.

Status adalah kumpulan semua data tentang detail antarmuka, termasuk rendering representasionalnya. Dengan menggunakan contoh, kita akan mencari tahu lebih detail dan jelas apa itu. Gambar di bawah menunjukkan beberapa komponen besar – memposting ke jejaring sosial online, bagian dengan informasi umum dan menampilkan foto. Setiap bagian mencakup komponen yang lebih kecil, yang merupakan komponen. Misalnya, publikasi berisi teks, foto, nama pengguna yang menerbitkan informasi, dll. Bagian gambar mencakup gambar individu, dan bagian informasi umum berisi informasi singkat.
Masing-masing komponen (components) ini memiliki state. Artinya, bagian dengan informasi umum akan terlihat berbeda pada perangkat yang berbeda, elemen “suka” berubah warna saat ditekan dan nomor yang bertanggung jawab atas jumlah suka; publikasi, pada gilirannya, dapat mempersingkat teks atau mengirimkannya secara penuh.

Dengan demikian, fleksibilitas React.JS diekspresikan – komponen antarmuka ditulis satu kali, dan setelah itu diberikan semua kemungkinan status.

Mengapa perpustakaan Bereaksi diperlukan?

React.JS adalah salah satu opsi yang memungkinkan untuk menulis kode JS atau HTML dalam format yang nyaman, membentuk salinannya dan menjadikannya visual. Komponen di sini ditulis dalam bahasa sistem khusus – JSX, yang mencakup elemen bahasa pemrograman JavaScript dan bahasa markup HTML standar.
Kode yang ditulis di BEJ cukup spesifik. Juga penting bahwa browser web tidak harus memahami bahasa sistem ini – kode React.JS ditransfer ke JS, yang dirasakan oleh browser mana pun tanpa masalah. Untuk melakukan ini, apa yang dibuat di perpustakaan dilewatkan melalui kompiler khusus (salah satu yang lebih populer saat ini adalah Babel js), yang mengubah kode dalam bahasa pemrograman yang kurang dikenal menjadi representasi JavaScript.
Pada awalnya mungkin tampak bahwa sistem penggunaannya sangat tidak logis, tetapi setelah beberapa saat Anda terbiasa dan Anda menyadari mengapa mekanismenya dirancang seperti itu. Pustaka JavaScript memiliki sejumlah keunggulan kuat:

• bahasa pemrograman sistem lebih mudah dikenali daripada JavaScript yang terkenal, dan akibatnya, diperlukan waktu beberapa kali lebih sedikit untuk mendukung kode dan menghilangkan kesalahan di dalamnya (kecepatan penulisan kode dan program baru akan meningkat sesuai);
• sistem elemen konstituen yang nyaman dan praktis dibangun di sini – mengulangi bagian kode yang digunakan pada berbagai tahap penulisan dan dalam program yang berbeda, dan juga berubah tergantung pada konteksnya;
• setiap elemen konstituen hanya tunduk pada keadaannya , oleh karena itu lebih mudah untuk memperbaiki kekurangan dalam kode jika tiba-tiba ditemukan kesalahan dalam pekerjaannya dalam praktik; momen yang salah melayang ke permukaan: elemen yang berfungsi dengan baik akan terus bekerja secara stabil dalam mode ini, kecuali, tentu saja, status yang salah digunakan terkait dengannya.

Dengan demikian, kita dapat menyimpulkan bahwa library React.JS dapat menghemat banyak waktu, membuat kode lebih spesifik, mengatur urutan dalam urutan yang benar, dan menggunakan blok besar lagi. Keuntungan ini memungkinkan untuk mengurangi biaya proses pembuatan antarmuka pengguna, serta mempercepat waktu proses ini. Memiliki keterampilan menggunakan bahasa pemrograman JS dan HTML, belajar menggunakan sistem JSX itu mudah – hanya beberapa hari untuk menguasainya.

Catatan! Adalah rasional untuk menggunakan perpustakaan saat bekerja dengan proyek besar, ketika perlu untuk menulis sejumlah besar halaman dinamis. Situs bisnis kecil tidak memerlukan kerumitan seperti itu.

Bereaksi kursus dasar JS dari A hingga Z: https://youtu.be/GNrdg3PzpJQ

Kenalan untuk pemula: konsep dasar

Halo Dunia!

Saat mengakses halaman pertama perpustakaan, pengguna akan melihat judul selamat datang sebagai contoh kecil – “Halo dunia!”.

Dasar-dasar bahasa sistem BEJ

JSX adalah bahasa pemrograman sistem, perpanjangan dari JavaScript yang terkenal. Ini mencakup kombinasi dua bahasa – pemrograman JA dan bahasa markup HTML standar. Pengembang menggunakannya untuk menyesuaikan konsep untuk menunjukkan kepada React bagaimana tampilan antarmuka pengguna. BEJ membuat “bagian” dari perpustakaan.

Apa itu BEJ?

Pustaka React menganut logika bahwa esensi rendering berhubungan langsung dengan logika antarmuka pengguna: bagaimana peristiwa diproses, bagaimana keadaan berubah dalam periode tertentu, dan bagaimana informasi disiapkan untuk presentasi. Pustaka JS dapat digunakan tanpa bahasa sistemnya, tetapi sejumlah besar pengembang menganggapnya berharga karena kejelasan dan konkritnya saat bekerja dengan antarmuka pengguna yang dihasilkan dari kode JavaScript. Selain itu, ekstensi memudahkan React untuk menghasilkan notifikasi kesalahan dan momen yang tidak valid.

Pembentukan ekspresi dalam bahasa sistem

JSX memungkinkan Anda untuk menggunakan ekspresi JavaScript yang ditulis dengan baik di dalam kurung kurawal dalam suatu proses.

JSX juga merupakan ekspresi Setelah kode sumber di-bytecode, ekspresi JSX apa pun berubah menjadi panggilan fungsi JS standar yang menargetkan kategori JavaScript. Dari sini dapat dipahami bahwa ekstensi sistem bahasa pemrograman resmi dapat digunakan di dalam if manual dan untuk periode.

JSX adalah Objek Objek yang diwakili oleh ekstensi disebut elemen React. Mereka mengklarifikasi hasil yang ingin dilihat pengembang di layar. Pustaka mengenali objek-objek ini dan menggunakannya dalam proses menghasilkan dan memelihara Model Objek Dokumen.

Render detail

Detail adalah banyak blok bangunan kecil yang membentuk program React.
Detail adalah gambar yang ingin dilihat pengembang pada akhirnya di monitor. Dibandingkan dengan elemen Model Objek Dokumen, elemen perpustakaan sederhana dan tidak memakan banyak sumber daya. Unsur adalah penyusun komponen.

Komponen dan Alat Peraga

Komponen memungkinkan untuk membagi UI menjadi bagian-bagian independen, yang lebih mudah untuk dikerjakan secara terpisah. Mereka dapat digabungkan dan digunakan beberapa kali. Untuk sebagian besar, fungsionalitas komponen mirip dengan fungsionalitas bahasa pemrograman JavaScript itu sendiri. Mereka mengambil informasi input, yang disebut props, dan mengembalikan elemen React yang menunjukkan model pengembangan yang ingin dilihat pengembang di monitor.

Varietas komponen: fungsional dan kelas

Paling mudah untuk merujuk ke komponen perpustakaan sebagai fungsi.
Komponen juga dapat direpresentasikan dalam format kelas ES6.

Menarik! Pustaka React mendefinisikan dua jenis komponen ini sebagai serupa.

Atribut

Alat peraga adalah objek yang tidak dapat diubah yang bersifat hanya-baca. Oleh karena itu, sebuah komponen tidak boleh menulis apapun pada props-nya, apapun jenisnya.

Keadaan dan siklus hidup

Pertama, mari kita cari tahu cara menerapkan keadaan di tempat kerja dengan benar. Ada tiga hal penting yang perlu diketahui tentang status komponen:

1. Jangan mengubah status secara langsung, gunakan metode setState. Ingat bahwa satu-satunya area di mana Anda dapat mengubah status secara langsung adalah konstruktor.
2. Pembaruan status mungkin tidak sinkron.
3. Arus informasi memiliki satu arah. Dalam konstruksi komponen, tidak satu pun dari mereka yang tahu jika status ditugaskan ke komponen lain. Tidak masalah bagaimana elemen fungsional independen ini atau itu dibentuk – menggunakan alat fungsional atau klasifikasi. Ini disebut aliran data “hilir”. Suatu keadaan selalu didefinisikan untuk beberapa elemen, dan asosiasi struktural dari keadaan ini hanya dapat mempengaruhi bagian-bagian yang terletak “di bawah” dalam urutan hierarkis.

Biasanya, negara disebut sebagai “lokal”, “internal”, atau tersembunyi. Itu hanya terlihat oleh elemen fungsional itu sendiri dan tidak terlihat oleh bagian lain dari React. Dalam program perpustakaan, apakah elemen fungsional independen diberkahi dengan keadaan tertentu atau tidak, merupakan pengembangan internal dari bagian ini, yang dapat berubah seiring waktu. Menarik juga bahwa dalam pekerjaan Anda dapat menggabungkan komponen dengan dan tanpa status.

Analisis acara

Proses parsing event di komponen React mirip dengan penanganan event di elemen model objek dokumen. Namun, ada beberapa fitur yang membedakan mereka satu sama lain:

1. Acara di perpustakaan JavaScript diberi nama dengan gaya yang berbeda dari yang standar.
2. Menggunakan Bahasa Pemrograman yang Diperluas Sistem, pengembang melewati subrutin sebagai pengendali peristiwa, bukan string.

Render elemen bersyarat

Pustaka JavaScript memungkinkan untuk memecah logika pengembangan elemen menjadi komponen independen. Mereka dapat ditampilkan untuk tampilan umum atau disembunyikan, tergantung pada status apa yang mereka miliki saat ini. Render elemen bersyarat bekerja dengan prinsip yang sama seperti ekspresi bersyarat berdasarkan bahasa pemrograman JavaScript. Kadang-kadang terjadi bahwa perpustakaan memerlukan penjelasan tentang bagaimana keadaan mempengaruhi penyembunyian atau rendering beberapa elemen. Di sini lebih logis untuk menggunakan pembantu JS bersyarat atau ekspresi yang mirip dengan if.

Mengubah Komponen

Elemen library React dapat ditambahkan ke variabel. Ini adalah solusi praktis ketika beberapa kondisi menunjukkan apakah beberapa bagian dari komponen harus digambar, atau tidak masuk akal, sedangkan bagian lainnya tetap tidak berubah.

Daftar dan Kunci

Bagian ini mencakup beberapa komponen:

1. Menggambar beberapa elemen . Pengguna dapat membentuk satu set elemen dan menyematkannya dalam bahasa pemrograman sistem menggunakan kurung kurawal.
2. Daftar elemen dasar . Seringkali, pengguna dan pengembang menyesuaikan daftar secara langsung di dalam bagian komponen.

Kunci

Sebuah kunci di perpustakaan React JavaScript menunjukkan alat khusus yang harus dimasukkan saat membuat daftar komponen. Kunci membantu pustaka JavaScript untuk mengidentifikasi item mana yang telah disesuaikan, ditambahkan, atau dihapus. Penting untuk menandainya sehingga React dapat mengkorelasikan komponen data struktural setelah beberapa waktu berlalu.

Formulir

Di perpustakaan JS, elemen bahasa markup standar bekerja sedikit berbeda dari komponen model objek dokumen, karena elemen formulir awalnya memiliki status tersembunyi.

Item yang Dikelola

Dalam bahasa markup standar, formulir seperti input , pilih , textarea cenderung mempertahankan statusnya sendiri dan memperbaruinya saat pengembang memasukkan informasi baru. Status React.js selalu mendefinisikan nilai bidang input dalam elemen penulisan terkelola. Meskipun ini menunjukkan bahwa pengguna harus menulis sedikit lebih banyak daripada kode asli yang diberikan, sekarang dimungkinkan untuk meneruskan nilai ini ke bagian lain dari antarmuka pengguna.

Kebangkitan negara

Pengangkatan negara adalah template standar yang harus diketahui dan dapat diterapkan oleh setiap pengembang dalam proses pekerjaan. Menggunakannya akan menghilangkan pola manajemen negara yang kompleks dan biasanya tidak berguna.

Mengapa begitu penting untuk mengontrol kebangkitan negara?

Menaikkan negara ke tingkat komponen masa lalu untuk bagian-bagian yang membutuhkan itu diperlukan agar semua elemen dapat berpartisipasi dalam negara. Tingkat keadaan yang stabil akan memudahkan untuk mendistribusikannya di antara semua komponen yang bergantung padanya.

Komposisi vs Warisan

React.js menyertakan model komposisi yang kuat, jadi disarankan untuk menggunakan proses membangun keseluruhan dari bagian daripada pewarisan untuk menggunakan kembali kode yang ditulis sebelumnya di antara elemen. Dengan demikian, props dan kemampuan untuk membuat satu komposisi utuh dari bagian-bagian komponen, memberikan fleksibilitas yang dibutuhkan pengembang untuk membuat cangkang dan perilaku elemen dengan cara yang spesifik dan aman.

Pengingat! Bagian komponen dapat mengambil alat peraga yang tidak terkait, termasuk bagian dasar yang membentuk perpustakaan atau fungsi.

Jika Anda perlu menggunakan fungsi yang terlihat bebas untuk bekerja dengan komponen untuk kedua atau ketiga kalinya, tarik keluar ke modul JS yang terpisah. Pindahkan ke dalam komponen dan gunakan fungsi yang dihasilkan tanpa ekspansi lebih lanjut. React atau Vue atau Angular, apa yang harus dipilih: https://youtu.be/Nm8GpLCAgwk

Prinsip React.js

Seluruh filosofi library JavaScript disembunyikan di panduan React. Tampaknya ini panjang dan tidak terlalu penting, namun, banyak pengguna mengklaim bahwa setelah membaca semuanya jatuh pada tempatnya. Dokumentasinya cukup lama, tetapi masih memiliki nilai dan relevansi yang tinggi –
https://ru.reactjs.org/docs/thinking-in-react.html . Bereaksi tutorial js https://ru.reactjs.org/tutorial/tutorial.html

Fungsi dari library React.js

Dengan menggunakan perpustakaan JavaScript, pengguna mendapat kesempatan untuk memberikan semua perhatiannya langsung ke proses pengembangan UI dan komponen aplikasi, apalagi terganggu oleh pembentukan dan kemungkinan kekurangan kode tertulis. Pustaka memungkinkan Anda untuk mengembangkan program lebih cepat, membuatnya lebih mudah untuk mengonfigurasi dan mengedit komponen dan proses keseluruhan proyek secara keseluruhan. Dengan demikian, React.js berisi elemen yang bertanggung jawab untuk komunikasi di jaringan global, UI, kontrol status program, dan kemampuan untuk memecahkan masalah kompleks lainnya. Perpustakaan juga memiliki fitur fungsional berikut:

1. Kepraktisan . React.js tersedia dalam format yang diperkecil. Paket ringkas ini tidak perlu dikonfigurasi dengan jelas. Ini sudah menyertakan fitur pemecahan kode yang mengurangi waktu yang diperlukan untuk membuka versi browser situs, karena opsi ini mencegah komponen dirender secara bersamaan.
2. Ekosistem dan kepatuhan yang dipompa . Sejumlah besar alat tersedia di perpustakaan, didukung oleh situs lain, yang memungkinkan pengguna untuk mengembangkan program kompleks baru untuk tujuan apa pun.
3. Fungsionalitas penuh . Keuntungan utama dari perpustakaan JavaScript adalah bahwa semua versi baru dari platform memenuhi persyaratan yang lama, sehingga Anda dapat menggunakan versi lama dan yang diperbarui, semuanya didukung dan relevan hingga hari ini. Versi yang dirilis sebelumnya tidak menjadi usang setelah pembaruan terbaru.

Penggunaan praktis

Di halaman utama perpustakaan, dalam instruksi untuk pengguna, ada beberapa contoh ilustrasi penggunaan React dalam praktik. Anda dapat memperbaikinya secara manual dan mencoba menjalankannya. Bahkan jika Anda adalah pengguna baru dan tidak memahami esensi dan logika perpustakaan, sesuaikan kode sesuai keinginan Anda dan lihat hasilnya.

Aplikasi praktis React saat menulis robot trading di JavaScript

Penting untuk disadari bahwa pengembang tidak memprogram JS, tetapi menulis skrip (scripts). oleh karena itu, dengan menggunakan perpustakaan, pengembang dapat menulis kode untuk robot perdagangan berikutnya yang digunakan untuk tujuan perdagangan, dan juga terus mendesain tampilannya berdasarkan platform ini. Faktanya, robot trading untuk trading juga merupakan aplikasi, yang sebagian besar sedang dikembangkan menggunakan React.js. Namun, beberapa fungsi dan bagian internal bot masih harus dilakukan di situs lain yang menyediakan alat yang cocok untuk ini.

GitHub dan React.js

GitHub adalah platform yang menampung semua versi proyek. Pengguna menghubungkan hosting, melalui prosedur pendaftaran di situs resmi GitHub, dan kemudian membuat repositori online tempat ia mentransfer semua file dari Git.
Git adalah layanan kontrol versi proyek yang paling populer dan relevan saat ini, dan GitHub adalah repositori kode jarak jauh.

Referensi! Hanya pengguna yang telah menerima tautan yang sesuai dengan izin yang memiliki akses untuk mengedit dan mengunduh file.

Dokumentasi

Semua tutorial dan materi terbaru tentang perpustakaan JavaScript diperbarui dengan pembaruan terbaru. Pengembang juga mengkompilasi dan memposting untuk membaca umum versi lama dari dokumentasi, diposting di halaman terpisah dari perpustakaan. Oleh karena itu, akan lebih mudah bagi pemula untuk menguasai keterampilan manajemen situs: baik materi lama maupun baru – semuanya ada di sini, akses gratis untuk semua orang.

Catatan! Jangan lupa baca manualnya. Setidaknya lihatlah – sebagian besar dari apa yang tampaknya tidak dapat dipahami akan jatuh pada tempatnya.

Pustaka React adalah platform yang populer dan relevan saat ini. Fleksibilitasnya memungkinkan pengembang untuk membuat proyek dengan kualitas yang lebih baik dan dalam waktu yang lebih singkat. Selain itu, mengetahui platform dan memiliki keterampilan untuk menggunakannya membuat spesialis lebih diminati di pasar tenaga kerja.