React.JS untuk boneka pemula, menggunakan perpustakaan semasa menulis robot dagangan

Apakah React JS untuk boneka pemula, apakah itu, tutorial, pemasangan, dokumentasi – cara memasang dan menggunakan perpustakaan React JS semasa menulis robot dagangan. Selalunya dalam iklan kerja untuk pakar komputer, anda boleh menemui keperluan yang mengatakan bahawa anda mempunyai kemahiran dalam pustaka JavaScript. Ya, dan mereka mengharapkan pengetahuan tentang React bukan sahaja daripada pembangun perisian, tetapi juga daripada pengaturcara yang terlibat dalam pembangunan dalaman tapak, dan bukan reka bentuk luaran. Apakah jenis perpustakaan ini, apakah peluang yang diberikannya dalam kerja, dan di manakah seorang pemula mula berkenalan? Mari kita fikirkan dalam artikel ini.

Pustaka JavaScript – React: apa itu

React.JS ialah perpustakaan
bahasa pengaturcaraan JavaScript yang popular , yang dibentuk oleh rangkaian sosial dalam talian Facebook untuk menambah baik dan memudahkan proses membangunkan cangkerang luaran tapak dan aplikasi – antara muka yang digunakan pengguna berinteraksi. Ciri utama perpustakaan ialah komponen dan negeri. Komponen ialah sebahagian daripada set digital yang bertanggungjawab untuk penampilan bahagian tertentu sistem yang direka bentuk.

Catatan! Bahagian komponen sedemikian boleh bersarang.

Keadaan ialah koleksi semua data tentang butiran antara muka, termasuk pemaparan perwakilannya. Menggunakan contoh, kita akan mengetahui dengan lebih terperinci dan jelas apa itu. Imej di bawah menunjukkan beberapa komponen besar – menyiarkan ke rangkaian sosial dalam talian, bahagian dengan maklumat umum dan menunjukkan foto. Setiap bahagian termasuk komponen yang lebih kecil, iaitu komponen. Contohnya, penerbitan mengandungi teks, gambar, nama pengguna yang menerbitkan maklumat, dsb. Bahagian imej termasuk gambar individu dan bahagian maklumat am mengandungi maklumat ringkas.
Setiap komponen (komponen) ini mempunyai keadaan. Iaitu, bahagian dengan maklumat umum akan kelihatan berbeza pada peranti yang berbeza, elemen “suka” berubah warna apabila ditekan dan nombor yang bertanggungjawab untuk jumlah suka; penerbitan, seterusnya, boleh memendekkan teks atau menghantarnya sepenuhnya.

Oleh itu, fleksibiliti React.JS dinyatakan – komponen antara muka ditulis sekali, dan selepas itu ia diberikan semua keadaan yang mungkin.

Mengapa perpustakaan React diperlukan?

React.JS ialah salah satu pilihan yang mungkin untuk menulis kod JS atau HTML dalam format yang mudah, membentuk salinannya dan menjadikannya visual. Komponen di sini ditulis dalam bahasa sistem khas – JSX, yang merangkumi unsur-unsur bahasa pengaturcaraan JavaScript dan bahasa penanda HTML piawai.
Kod yang ditulis dalam JSX agak khusus. Ia juga penting bahawa penyemak imbas web tidak perlu memahami bahasa sistem ini – kod React.JS dipindahkan ke JS, yang mana-mana pelayar merasakan tanpa masalah. Untuk melakukan ini, apa yang dibuat dalam perpustakaan disalurkan melalui penyusun khusus (salah satu yang lebih popular hari ini ialah Babel js), yang menukar kod dalam bahasa pengaturcaraan yang kurang dikenali kepada perwakilan JavaScript.
Pada mulanya nampaknya sistem penggunaan ini sangat tidak logik, tetapi selepas beberapa ketika anda terbiasa dengannya dan anda menyedari mengapa mekanisme itu direka sedemikian. Pustaka JavaScript mempunyai beberapa kelebihan yang kukuh:

• bahasa pengaturcaraan sistem lebih mudah dikenali daripada JavaScript yang terkenal, dan akibatnya, ia akan mengambil masa beberapa kali lebih sedikit untuk menyokong kod dan menghapuskan ralat padanya (kelajuan menulis kod dan program baharu akan meningkat dengan sewajarnya);
• sistem unsur konstituen yang mudah dan praktikal dibina di sini – mengulangi bahagian kod yang digunakan pada peringkat penulisan yang berbeza dan dalam program yang berbeza, dan juga berubah bergantung pada konteks;
• каждый составляющий элемент подчинен только своему состоянию, поэтому корректировать недочеты в коде проще, если вдруг обнаружена ошибка в его работе на практике; некорректные моменты всплывают на поверхность: элемент, который функционирует должным образом, будет продолжать стабильную работу в таком режиме, если, конечно, не использовать по отношению к нему неправильное состояние.

Oleh itu, kita boleh membuat kesimpulan bahawa pustaka React.JS boleh menjimatkan banyak masa, menjadikan kod lebih spesifik, menyusun urutan dalam susunan yang betul dan menggunakan blok besar sekali lagi. Kelebihan ini memungkinkan untuk mengurangkan kos proses mencipta antara muka pengguna, serta mempercepatkan masa proses ini. Mempunyai kemahiran menggunakan bahasa pengaturcaraan JS dan HTML, belajar menggunakan sistem JSX adalah mudah – hanya beberapa hari untuk menguasainya.

Catatan! Adalah rasional untuk menggunakan perpustakaan apabila bekerja dengan projek besar, apabila perlu menulis sejumlah besar halaman dinamik. Tapak perniagaan kecil tidak memerlukan kerumitan sedemikian.

Kursus asas JS bertindak balas dari A hingga Z: https://youtu.be/GNrdg3PzpJQ

Kenalan untuk pemula: konsep asas

Hai dunia!

Apabila mengakses halaman pertama perpustakaan, pengguna akan melihat tajuk alu-aluan sebagai contoh kecil – “Hello dunia!”.

Asas bahasa sistem JSX

JSX ialah bahasa pengaturcaraan sistem, lanjutan daripada JavaScript yang terkenal. Ia termasuk gabungan dua bahasa – pengaturcaraan JA dan bahasa penanda HTML piawai. Pembangun menggunakannya untuk melaraskan konsep untuk menunjukkan React dengan tepat bagaimana rupa antara muka pengguna. JSX mencipta “bahagian” perpustakaan.

Apakah JSX?

Pustaka React mematuhi logik bahawa intipati pemaparan berkaitan secara langsung dengan logik antara muka pengguna: cara peristiwa diproses, cara keadaan berubah dalam tempoh tertentu dan cara maklumat disediakan untuk pembentangan. Pustaka JS boleh digunakan tanpa bahasa sistemnya, tetapi sebilangan besar pembangun menganggapnya berharga kerana kejelasan dan kekonkretannya apabila bekerja dengan antara muka pengguna yang dijana daripada kod JavaScript. Selain itu, sambungan memudahkan React menjana pemberitahuan momen dan ralat yang tidak sah.

Pembentukan ungkapan dalam bahasa sistem

JSX membolehkan anda menggunakan mana-mana ungkapan JavaScript yang ditulis dengan baik di dalam pendakap kerinting dalam proses.

JSX juga merupakan ungkapan Sebaik sahaja kod sumber dikodkan bait, sebarang ungkapan JSX bertukar menjadi panggilan fungsi JS standard yang menyasarkan kategori JavaScript. Daripada ini dapat difahami bahawa sambungan sistem bahasa pengaturcaraan rasmi boleh digunakan di dalam manual if dan untuk tempoh.

JSX ialah Objek Objek yang diwakili oleh sambungan dipanggil elemen React. Mereka menjelaskan hasil yang ingin dilihat oleh pembangun pada paparan. Perpustakaan mengenali objek ini dan menggunakannya dalam proses menjana dan menyelenggara Model Objek Dokumen.

Penyampaian terperinci

Butiran adalah banyak blok binaan kecil yang membentuk program React.
Butiran adalah gambar yang ingin dilihat oleh pembangun pada akhirnya pada monitor. Berbanding dengan elemen Model Objek Dokumen, elemen perpustakaan adalah mudah dan tidak mengambil banyak sumber. Unsur ialah juzuk komponen.

Komponen dan prop

Komponen memungkinkan untuk membahagikan UI kepada bahagian bebas, yang lebih mudah untuk digunakan secara berasingan. Mereka boleh digabungkan dan digunakan beberapa kali. Untuk sebahagian besar, kefungsian komponen adalah serupa dengan kefungsian bahasa pengaturcaraan JavaScript itu sendiri. Mereka mengambil maklumat input, yang dipanggil prop, dan mengembalikan elemen React yang menunjukkan model pembangunan yang ingin dilihat oleh pembangun pada monitor.

Varieti komponen: berfungsi dan kelas

Ia paling mudah untuk merujuk kepada komponen perpustakaan sebagai fungsi.
Komponen juga boleh diwakili dalam format kelas ES6.

Menarik! Pustaka React mentakrifkan kedua-dua jenis komponen ini sebagai serupa.

alat peraga

Props ialah objek tidak berubah yang dibaca sahaja. Oleh itu, komponen tidak boleh menulis apa-apa pada propnya, tidak kira apa jenisnya.

Keadaan dan kitaran hayat

Mula-mula, mari kita fikirkan cara menggunakan keadaan di tempat kerja dengan betul. Terdapat tiga perkara penting yang perlu diketahui tentang keadaan komponen:

1. Jangan ubah keadaan secara langsung, gunakan kaedah setState. Ingat bahawa satu-satunya kawasan di mana anda boleh menukar keadaan secara langsung ialah pembina.
2. Kemas kini negeri mungkin tidak segerak.
3. Поток информации имеет одно направление. В построении компонентов ни один из них не знает, присвоено ли состояние другому компоненту. Не имеет значения и то, каким образом был сформирован тот или иной независимый функциональный элемент – с использованием функционального или классификационного инструмента. Это называется “нисходящим” потоком данных. Состояние всегда определено для какого-либо элемента, а структурные объединения это состояния могут оказывать влияния только на детали, что расположены “ниже” по иерархическому порядку.

Biasanya, negeri dirujuk sebagai “tempatan”, “dalaman”, atau tersembunyi. Ia hanya kelihatan kepada elemen berfungsi itu sendiri dan tidak kelihatan kepada bahagian lain React. Dalam program perpustakaan, sama ada elemen fungsi bebas dikurniakan keadaan tertentu atau tidak merupakan perkembangan dalaman bahagian ini, yang boleh berubah dari semasa ke semasa. Ia juga menarik bahawa dalam kerja anda boleh menggabungkan komponen dengan dan tanpa keadaan.

Analisis peristiwa

Proses menghuraikan peristiwa dalam komponen React adalah serupa dengan mengendalikan peristiwa dalam elemen model objek dokumen. Walau bagaimanapun, terdapat beberapa ciri yang membezakannya antara satu sama lain:

1. Acara dalam pustaka JavaScript dinamakan dalam gaya yang berbeza daripada yang standard.
2. Menggunakan Bahasa Pengaturcaraan Lanjutan Sistem, pembangun menghantar subrutin sebagai pengendali acara dan bukannya rentetan.

Penyampaian unsur bersyarat

Pustaka JavaScript memungkinkan untuk memecahkan logik untuk membangunkan elemen kepada komponen bebas. Mereka boleh dipaparkan untuk paparan umum atau tersembunyi, bergantung pada keadaan yang dikurniakan pada mereka pada masa ini. Penyampaian bersyarat bagi elemen berfungsi pada prinsip yang sama seperti ungkapan bersyarat berdasarkan bahasa pengaturcaraan JavaScript. Kadang-kadang ia berlaku bahawa perpustakaan memerlukan penjelasan tentang bagaimana keadaan mempengaruhi penyembunyian atau pemaparan beberapa elemen. Di sini adalah lebih logik untuk menggunakan pembantu JS bersyarat atau ungkapan yang serupa dengan if.

Menukar Komponen

Elemen perpustakaan bertindak balas boleh ditambah pada pembolehubah. Ini adalah penyelesaian praktikal apabila beberapa keadaan menunjukkan sama ada beberapa bahagian komponen perlu dilukis, atau ia tidak masuk akal, manakala bahagian yang lain kekal tidak berubah.

Senarai dan Kunci

Bahagian ini merangkumi beberapa komponen:

1. Melukis pelbagai elemen . Pengguna boleh membentuk satu set elemen dan membenamkannya dalam bahasa pengaturcaraan sistem menggunakan pendakap kerinting.
2. Senarai elemen asas . Selalunya, pengguna dan pembangun melaraskan senarai terus dalam bahagian komponen.

kunci

Kunci dalam perpustakaan React JavaScript menandakan alat khusus yang mesti dimasukkan semasa menjana senarai komponen. Kekunci membantu pustaka JavaScript mengenal pasti item yang telah dilaraskan, ditambah atau dialih keluar. Adalah penting untuk menandakannya supaya React boleh mengaitkan komponen data struktur selepas tempoh masa tertentu berlalu.

Borang

Dalam pustaka JS, elemen bahasa penanda piawai berfungsi sedikit berbeza daripada komponen model objek dokumen, kerana elemen bentuk pada mulanya mempunyai keadaan tersembunyi.

Item Terurus

Dalam bahasa penanda piawai, borang seperti input , pilih , textarea cenderung untuk mengekalkan keadaan mereka sendiri dan mengemas kininya apabila pembangun memasukkan maklumat baharu. Keadaan React.js sentiasa mentakrifkan nilai medan input dalam elemen mengarang terurus. Walaupun ini menunjukkan bahawa pengguna mesti menulis lebih sedikit daripada kod asal yang diberikan, kini adalah mungkin untuk menghantar nilai ini ke bahagian lain antara muka pengguna.

Kebangkitan negara

Pengangkatan negeri ialah templat piawai yang harus diketahui oleh setiap pembangun dan boleh digunakan dalam proses kerja. Menggunakannya akan menghapuskan corak pengurusan negeri yang kompleks dan biasanya tidak berguna.

Mengapakah perlu untuk mengawal kebangkitan negara?

Menaikkan negeri ke tahap komponen lepas bagi bahagian-bahagian yang memerlukannya adalah perlu supaya semua elemen boleh mengambil bahagian dalam negeri. Tahap keadaan yang stabil akan memudahkan untuk mengagihkannya antara semua komponen yang bergantung padanya.

Komposisi vs Warisan

React.js termasuk model gubahan yang kukuh, jadi anda disyorkan untuk menggunakan proses membina keseluruhan daripada bahagian dan bukannya warisan untuk menggunakan semula kod yang ditulis lebih awal antara elemen. Oleh itu, prop dan keupayaan untuk mencipta satu komposisi keseluruhan daripada bahagian komponen, memberikan pembangun dengan fleksibiliti yang diperlukan untuk mencipta cangkerang dan tingkah laku elemen dengan cara yang khusus dan selamat.

Peringatan! Bahagian komponen boleh mengambil prop yang tidak berkaitan, termasuk bahagian asas yang membentuk perpustakaan atau fungsi.

Sekiranya anda perlu menggunakan fungsi bebas rupa untuk bekerja dengan komponen buat kali kedua atau ketiga, tariknya keluar ke dalam modul JS yang berasingan. Pindahkannya ke dalam komponen dan gunakan fungsi yang dijana tanpa pengembangan selanjutnya. React atau Vue atau Angular, perkara yang perlu dipilih: https://youtu.be/Nm8GpLCAgwk

Prinsip React.js

Keseluruhan falsafah perpustakaan JavaScript tersembunyi dalam panduan React. Nampaknya ini panjang dan tidak begitu penting, bagaimanapun, ramai pengguna mendakwa bahawa selepas membaca semuanya jatuh ke tempatnya. Dokumentasi itu agak lama, tetapi masih mempunyai nilai dan perkaitan yang hebat –
https://ru.reactjs.org/docs/thinking-in-react.html . Tutorial React js https://ru.reactjs.org/tutorial/tutorial.html

Kefungsian perpustakaan React.js

Menggunakan perpustakaan JavaScript, pengguna mendapat peluang untuk memberikan semua perhatiannya secara langsung kepada proses pembangunan UI dan komponen aplikasi, paling tidak terganggu oleh pembentukan dan kemungkinan kekurangan kod bertulis. Perpustakaan membolehkan anda membangunkan program dengan lebih pantas, menjadikannya lebih mudah untuk mengkonfigurasi dan mengedit komponen dan proses keseluruhan projek secara keseluruhan. Oleh itu, React.js mengandungi elemen yang bertanggungjawab untuk komunikasi dalam rangkaian global, UI, kawalan keadaan program dan keupayaan untuk menyelesaikan isu kompleks yang lain. Perpustakaan juga mempunyai ciri fungsi berikut:

1. Kepraktisan . React.js tersedia dalam format kecil. Pakej padat ini tidak perlu dikonfigurasikan dengan jelas. Ia sudah termasuk ciri pemisahan kod yang mengurangkan masa yang diperlukan untuk membuka versi penyemak imbas tapak, memandangkan pilihan ini menghalang komponen daripada dipaparkan pada masa yang sama.
2. Ekosistem dipam dan pematuhan . Sebilangan besar alat tersedia di perpustakaan, disokong oleh tapak lain, yang membolehkan pengguna membangunkan program kompleks baharu untuk sebarang tujuan.
3. Fungsi penuh . Kelebihan utama pustaka JavaScript ialah semua versi baharu platform memenuhi keperluan yang lama, jadi anda boleh menggunakan kedua-dua versi lama dan yang dikemas kini, semuanya disokong dan relevan sehingga hari ini. Versi yang dikeluarkan sebelum ini tidak menjadi usang selepas kemas kini terkini.

Penggunaan praktikal

Pada halaman utama perpustakaan, dalam arahan untuk pengguna, terdapat beberapa contoh ilustrasi penggunaan React dalam amalan. Anda boleh membetulkannya secara manual dan cuba menjalankannya. Walaupun anda pengguna baharu dan tidak memahami intipati dan logik perpustakaan, laraskan kod mengikut keinginan anda dan lihat hasilnya.

Aplikasi praktikal React semasa menulis robot dagangan dalam JavaScript

Adalah penting untuk menyedari bahawa pembangun tidak memprogramkan JS, tetapi menulis skrip (skrip). oleh itu, menggunakan perpustakaan, pembangun boleh menulis kod untuk robot dagangan seterusnya yang digunakan untuk tujuan perdagangan, dan juga terus mereka bentuk penampilannya berdasarkan platform ini. Malah, robot dagangan untuk perdagangan juga merupakan aplikasi, yang mana sejumlah besar sedang dibangunkan menggunakan React.js. Walau bagaimanapun, beberapa fungsi dan bahagian dalaman bot masih perlu dilakukan pada tapak lain yang menyediakan alat yang sesuai untuk ini.

GitHub dan React.js

GitHub ialah platform yang mengehoskan semua versi projek. Pengguna menyambungkan pengehosan, melalui prosedur pendaftaran di laman web rasmi GitHub, dan kemudian mencipta repositori dalam talian di mana dia memindahkan semua fail daripada Git.
Git ialah perkhidmatan kawalan versi projek yang paling popular dan relevan hari ini, dan GitHub ialah repositori kod jauh.

Rujukan! Hanya pengguna yang telah menerima pautan yang sesuai dengan kebenaran mempunyai akses kepada mengedit dan memuat turun fail.

Dokumentasi

Semua tutorial dan bahan terkini mengenai perpustakaan JavaScript adalah terkini dengan kemas kini terkini. Pembangun juga menyusun dan menyiarkan untuk membaca umum versi lama dokumentasi, yang disiarkan pada halaman perpustakaan yang berasingan. Oleh itu, lebih mudah bagi pemula untuk menguasai kemahiran pengurusan tapak: kedua-dua bahan lama dan baharu – semuanya ada di sini, akses adalah percuma untuk semua orang.

Catatan! Jangan lupa baca manual. Sekurang-kurangnya lihat – sudah kebanyakan perkara yang kelihatan tidak dapat difahami akan jatuh ke tempatnya.

Pustaka React ialah platform yang popular dan relevan hari ini. Fleksibilitinya membolehkan pembangun membuat projek dengan kualiti yang lebih baik dan dalam masa yang lebih singkat. Di samping itu, mengetahui platform dan mempunyai kemahiran untuk menggunakannya menjadikan pakar lebih diminati dalam pasaran buruh.