React.JS pikeun dummies pemula, ngagunakeun perpustakaan nalika nulis robot dagang

Naon React JS pikeun dummies pemula, naon éta, tutorial, instalasi, dokuméntasi – kumaha masang sareng nganggo perpustakaan React JS nalika nyerat robot dagang. Sering dina iklan padamelan pikeun spesialis komputer, anjeun tiasa mendakan sarat anu nyarios yén anjeun gaduh kaahlian dina perpustakaan JavaScript. Leres, sareng aranjeunna ngarepkeun pangaweruh React henteu ngan ukur ti pamekar parangkat lunak, tapi ogé ti programer anu kalibet dina pamekaran internal situs, sanés desain éksternal. Jenis perpustakaan ieu, kasempetan naon anu masihan dina damel, sareng dimana pemula mimiti kenal? Hayu urang ngartos dina artikel ieu.

Perpustakaan JavaScript – Réaksi: naon éta

React.JS mangrupikeun perpustakaan
basa pamrograman JavaScript anu populer , dibentuk ku jaringan sosial online Facebook pikeun ningkatkeun sareng nyederhanakeun prosés ngembangkeun cangkang éksternal situs sareng aplikasi – antarmuka anu berinteraksi sareng pangguna. Fitur utama perpustakaan nyaéta komponén sareng nagara. Komponén mangrupikeun bagian tina set digital anu tanggung jawab pikeun penampilan bagian tina sistem anu dirarancang.

Catetan! bagian komponén misalna bisa nested.

Kaayaan mangrupikeun kumpulan sadaya data ngeunaan detil antarbeungeut, kalebet rendering representasional. Ngagunakeun conto, urang bakal manggihan leuwih jéntré tur jelas naon naon. Gambar di handap ieu nunjukkeun sababaraha komponén ageung – ngeposkeun ka jaringan sosial online, bagian kalayan inpormasi umum sareng nunjukkeun poto. Tiap bagian ngawengku komponén leutik, nu mangrupakeun komponén. Salaku conto, publikasi ngandung téks, foto, nami pangguna anu nyebarkeun inpormasi, jsb. Bagian gambar kalebet gambar individu, sareng bagian inpormasi umum ngandung inpormasi ringkes.
Unggal komponén ieu (komponén) boga kaayaan. Nyaéta, bagian kalayan inpormasi umum bakal béda dina alat anu béda, unsur “kawas” robah warna nalika dipencet sareng jumlah anu tanggung jawab kana jumlah anu resep; publikasi, kahareupna bisa shorten téks atawa ngirimkeun eta lengkep.

Ku kituna, kalenturan React.JS dinyatakeun – komponén panganteur ditulis sakali, sarta sanggeus éta dibéré sagala kaayaan mungkin.

Naha perpustakaan React diperyogikeun?

React.JS mangrupikeun salah sahiji pilihan anu mungkin pikeun nyerat JS atanapi kode HTML dina format anu merenah, ngabentuk salinan sareng ngajantenkeun visual. Komponén di dieu ditulis dina basa sistem husus – JSX, nu ngawengku unsur basa programming JavaScript jeung basa markup HTML standar.
Kode ditulis dina JSX cukup husus. Éta ogé penting yén browser wéb henteu kedah ngartos basa sistem ieu – kode React.JS ditransferkeun ka JS, anu katingali ku browser naon waé tanpa masalah. Jang ngalampahkeun ieu, naon anu dijieun di perpustakaan ngaliwatan compiler husus (salah sahiji nu pang populerna kiwari nyaéta Babel js), nu ngarobah kodeu dina basa programming Lesser-dipikawanoh kana Répréséntasi JavaScript.
Awalna sigana yén sistem pamakean pisan teu logis, tapi saatos sababaraha waktos anjeun biasa sareng anjeun sadar naha mékanisme dirancang ku cara éta. Perpustakaan JavaScript ngagaduhan sababaraha kaunggulan anu kuat:

• basa programming sistem leuwih gampang pikeun mikawanoh ti JavaScript well-dipikawanoh, sarta akibatna, éta bakal butuh sababaraha kali kirang waktos ngarojong kode jeung ngaleungitkeun kasalahan dina eta (laju nulis kode anyar jeung program baris ngaronjatkeun sasuai);
• Sistem unsur konstituén anu merenah sareng praktis diwangun di dieu – ngulang bagian-bagian kode anu dianggo dina tahap tulisan anu béda sareng dina program anu béda, sareng ogé robih gumantung kana kontéksna;
• unggal unsur konstituén ngan ukur aya dina kaayaanana , ku kituna langkung gampang pikeun ngabenerkeun kakurangan dina kode upami aya kasalahan anu ujug-ujug kapanggih dina karyana dina prakna; moments lepat ngambang ka beungeut cai: unsur anu fungsina leres bakal terus dianggo stably dina modeu ieu, iwal, tangtosna, kaayaan salah dipaké dina hubungan eta.

Ku kituna, urang tiasa nyimpulkeun yén perpustakaan React.JS tiasa ngahemat seueur waktos, ngajantenkeun kode langkung spésifik, ngatur sekuen dina urutan anu leres, sareng nganggo blok ageung deui. Kaunggulan ieu ngamungkinkeun pikeun ngurangan biaya prosés nyieun interfaces pamaké, kitu ogé nyepetkeun waktu prosés ieu pisan. Mibanda kaahlian ngagunakeun JS jeung basa programming HTML, diajar ngagunakeun sistem JSX gampang – ngan sababaraha poé ngawasaan eta.

Catetan! Éta rasional ngagunakeun perpustakaan nalika damel sareng proyék-proyék ageung, nalika perlu nyerat sajumlah ageung halaman dinamis. Situs bisnis leutik henteu peryogi kompleksitas sapertos kitu.

React kursus fundamental JS ti A nepi ka Z: https://youtu.be/GNrdg3PzpJQ

Kenalan pikeun beginners: konsép dasar

Halo Dunya!

Nalika ngaksés halaman mimiti perpustakaan, pangguna bakal ningali judul wilujeng sumping salaku conto leutik – “Halo dunya!”.

Dasar tina basa sistem JSX

JSX mangrupikeun basa pamrograman sistem, penyuluhan JavaScript anu terkenal. Éta kalebet kombinasi dua basa – pemrograman JA sareng basa markup HTML standar. Pamekar ngagunakeun éta pikeun nyaluyukeun konsép pikeun nunjukkeun React persis kumaha antarmuka pangguna kedah katingali. JSX nyiptakeun “bagian” perpustakaan.

Naon JSX?

Perpustakaan React taat kana logika yén hakekat rendering langsung patali jeung logika antarbeungeut pamaké: kumaha kajadian diolah, kumaha kaayaan robah dina periode nu tangtu, sarta kumaha informasi disiapkeun pikeun presentasi. Perpustakaan JS tiasa dianggo tanpa basa sistemna, tapi sajumlah ageung pamekar mendakan éta berharga kusabab kajelasan sareng konkretna nalika damel sareng antarmuka pangguna anu dihasilkeun tina kode JavaScript. Salaku tambahan, ekstensi ngagampangkeun pikeun React ngahasilkeun bewara momen sareng kasalahan anu teu sah.

Formasi éksprési dina basa sistem

JSX ngidinan Anjeun pikeun ngagunakeun sagala éksprési JavaScript well-ditulis jero braces Curly dina prosés.

JSX ogé mangrupa éksprési Sakali kode sumber ieu bytecoded, sagala éksprési JSX robah jadi panggero fungsi JS baku nu nargétkeun kategori JavaScript. Ti ieu bisa dipikaharti yén extension sistem tina basa programming resmi bisa dipaké di jero lamun manual tur pikeun période.

JSX nyaéta Objék Objék anu diwakilan ku ekstensi disebut unsur Réaksi. Aranjeunna netelakeun hasil anu pamekar hoyong ningali dina tampilan. Perpustakaan mikawanoh objék ieu sareng ngagunakeunana dina prosés ngahasilkeun sareng ngajaga Modél Objék Dokumén.

Detil rendering

Rincian mangrupikeun seueur blok wangunan anu ngawangun program React.
Rincian mangrupikeun gambar anu hoyong ditingali ku pamekar dina tungtung monitor. Dibandingkeun jeung elemen Dokumén Objék Modél, elemen perpustakaan basajan tur teu butuh nepi loba sumber. Unsur-unsur mangrupa komponén-komponén.

Komponén jeung prop

Komponén ngamungkinkeun pikeun ngabagi UI kana bagian anu mandiri, anu langkung gampang dianggo nyalira. Éta bisa digabungkeun jeung dipaké sababaraha kali. Kanggo sabagéan ageung, pungsionalitas komponénna sami sareng pungsionalitas basa pamrograman JavaScript sorangan. Éta nyandak inpormasi input, anu disebut prop, sareng ngabalikeun unsur React anu nunjukkeun modél pamekaran anu hoyong ditingali ku pamekar dina monitor.

Rupa-rupa komponén: fungsional sareng kelas

Panggampangna pikeun ngarujuk kana komponén perpustakaan salaku fungsi.
Komponén ogé bisa digambarkeun dina format kelas ES6.

matak pikabitaeun! Pustaka React netepkeun dua jinis komponén ieu sami.

alat peraga

Prop mangrupikeun objék anu teu tiasa dirobih anu ngan ukur dibaca. Ku alatan éta, komponén teu kudu nulis nanaon ka prop na, euweuh urusan naon jenis eta milik.

Kaayaan sareng siklus kahirupan

Mimiti, hayu urang terang kumaha leres nerapkeun kaayaan di tempat kerja. Aya tilu hal penting pikeun terang ngeunaan kaayaan komponén:

1. Ulah ngarobah kaayaan langsung, make metoda setState. Émut yén hiji-hijina daérah dimana anjeun tiasa ngarobih kaayaan langsung nyaéta konstruktor.
2. apdet kaayaan bisa jadi teu sinkron.
3. Aliran informasi boga hiji arah. Dina konstruksi komponén, taya sahijina weruh lamun kaayaan ditugaskeun ka komponén séjén. Henteu janten masalah kumaha ieu atanapi éta unsur fungsional mandiri kabentuk – nganggo alat fungsional atanapi klasifikasi. Ieu disebut aliran data “hilir”. Hiji kaayaan salawasna dihartikeun pikeun sababaraha unsur, sarta asosiasi struktural kaayaan ieu ngan bisa mangaruhan bagian anu lokasina “handap” dina urutan hirarki.

Biasana, nagara disebut “lokal”, “internal”, atanapi disumputkeun. Éta ngan katingali ku unsur fungsional sorangan sareng teu katingali ku bagian séjén React. Dina program perpustakaan, naha unsur fungsional bebas dikurniakeun kaayaan anu tangtu atanapi henteu mangrupikeun pamekaran internal bagian ieu, anu tiasa robih kana waktosna. Éta ogé pikaresepeun yén dina karya anjeun tiasa ngagabungkeun komponén sareng sareng tanpa kaayaan.

Analisis acara

Prosés parsing acara dina komponén Réact téh sarupa jeung nanganan acara dina elemen model objék dokumén. Nanging, aya sababaraha fitur anu ngabédakeunana masing-masing:

1. Kajadian di perpustakaan JavaScript ngaranna dina gaya béda ti nu baku.
2. Ngagunakeun System Extended Programming Language, pamekar ngalirkeun subrutin salaku panangan acara tinimbang string.

Rendering kondisional unsur

Perpustakaan JavaScript ngamungkinkeun pikeun megatkeun logika ngembangkeun elemen jadi komponén bebas. Éta bisa ditampilkeun pikeun tampilan umum atawa disumputkeun, gumantung kana naon kaayaan aranjeunna endowed kalawan di momen. Rendering kondisional elemen jalan dina prinsip anu sarua sakumaha ekspresi kondisional dumasar kana basa programming JavaScript. Kadang-kadang kajadian yén perpustakaan merlukeun penjelasan kumaha kaayaan mangaruhan nyumputkeun atawa Rendering sababaraha elemen. Di dieu éta leuwih logis ngagunakeun JS helper kondisional atawa ekspresi sarupa lamun.

Ngarobah komponén

elemen perpustakaan meta bisa ditambahkeun kana variabel. Ieu leyuran praktis lamun sababaraha kaayaan nunjukkeun naha sababaraha bagian tina komponén kudu digambar, atawa teu make akal pikiran, sedengkeun sesa bagian tetep unchanged.

Daptar jeung kenop

Bagian ieu ngawengku sababaraha komponén:

1. Ngagambar sababaraha elemen . Pangguna tiasa ngabentuk sakumpulan elemen sareng nampilkeunana dina basa program sistem nganggo kurung keriting.
2. Daptar unsur dasar . Seringna, pangguna sareng pamekar nyaluyukeun daptar langsung dina bagian komponén.

Konci

Konci dina perpustakaan React JavaScript nunjukkeun alat khusus anu kedah diasupkeun nalika ngahasilkeun daptar komponén. Tombol mantuan perpustakaan JavaScript pikeun ngaidentipikasi item nu geus disaluyukeun, ditambahkeun, atawa dihapus. Penting pikeun nyirian aranjeunna supados React tiasa ngahubungkeun komponén data struktural saatos sababaraha waktos waktos.

Bentuk

Dina perpustakaan JS, elemen basa markup standar dianggo saeutik béda ti komponén model objék dokumen, sabab elemen formulir mimitina boga kaayaan disumputkeun.

Item Diurus

Dina basa markup standar, formulir kawas input , pilih , textarea condong ngajaga kaayaan sorangan jeung ngamutahirkeun lamun pamekar asupkeun informasi anyar. kaayaan React.js salawasna nangtukeun nilai widang input dina unsur nyusun junun. Sanajan ieu nunjukkeun yén pamaké kudu nulis saeutik leuwih ti kode aslina dibikeun, éta ayeuna mungkin mun lulus nilai ieu ka bagian séjén tina panganteur pamaké.

Bangunna nagara

Ngangkat kaayaan mangrupakeun citakan standardized yén unggal pamekar kudu sadar tur bisa nerapkeun dina prosés gawé. Ngagunakeun éta bakal ngaleungitkeun pola manajemén kaayaan rumit sarta biasana gunana.

Naha perlu pisan ngadalikeun kebangkitan nagara?

Ngangkat kaayaan ka tingkat komponén kaliwat pikeun maranéhanana bagian anu merlukeun éta diperlukeun ku kituna sakabeh elemen bisa ilubiung dina kaayaan. Tingkat kaayaan anu stabil bakal ngagampangkeun nyebarkeunana ka sadaya komponén anu ngandelkeunana.

Komposisi vs Warisan

React.js kalebet modél komposisi anu kuat, janten disarankeun pikeun ngagunakeun prosés ngawangun sadayana tina bagian sanés warisan pikeun nganggo deui kode anu ditulis sateuacana antara elemen. Ku kituna, prop sarta kamampuhan pikeun nyieun hiji sakabéh komposisi tina bagian komponén, nyadiakeun pamekar jeung kalenturan diperlukeun pikeun nyieun cangkang jeung paripolah unsur dina cara husus tur aman.

Pangeling-eling! Bagian komponén tiasa nyandak prop anu teu aya hubunganana, kalebet bagian dasar anu ngawangun perpustakaan atanapi fungsi.

Upami anjeun kedah nganggo fungsi tanpa katingal pikeun dianggo sareng komponén kadua atanapi katilu kalina, tarik kaluar kana modul JS anu misah. Mindahkeun kana komponén tur nganggo fungsi dihasilkeun tanpa perluasan salajengna. React atanapi Vue atanapi Angular, naon anu kedah dipilih: https://youtu.be/Nm8GpLCAgwk

React.js Prinsip

Sakabéh filosofi perpustakaan JavaScript disumputkeun dina pituduh React. Sigana yén ieu panjang sareng henteu penting pisan, kumaha ogé, seueur pangguna ngaku yén saatos maca sadayana murag kana tempatna. Dokuméntasi anu cukup heubeul, tapi tetep tina nilai hébat sarta relevansi –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Fungsionalitas perpustakaan React.js

Ngagunakeun perpustakaan JavaScript, pamaké meunang kasempetan pikeun nengetan sagala langsung kana prosés ngembangkeun UI jeung komponén tina aplikasi, sahenteuna sakabeh keur kacau ku formasi jeung shortcomings mungkin tina kode ditulis. Perpustakaan ngamungkinkeun anjeun pikeun ngembangkeun program langkung gancang, ngagampangkeun pikeun ngonpigurasikeun sareng ngédit komponén sareng prosés sakabéh proyék sacara gembleng. Ku kituna, React.js ngandung elemen jawab komunikasi dina jaringan global, UI, kontrol kaayaan program jeung kamampuhan pikeun ngajawab masalah kompléks séjénna. Perpustakaan ogé ngagaduhan fitur fungsional ieu:

1. Kapraktisan . React.js sayogi dina format anu diminified. Paket kompak ieu henteu kedah dikonpigurasikeun sacara jelas. Éta parantos kalebet fitur pamisah kode anu ngirangan waktos pikeun muka versi browser situs, sabab pilihan ieu nyegah komponén tina rendering dina waktos anu sami.
2. Ékosistem pompa sareng patuh . Sajumlah ageung alat sayogi di perpustakaan, dirojong ku situs anu sanés, anu ngamungkinkeun para pangguna pikeun ngembangkeun program kompléks énggal pikeun tujuan naon waé.
3. fungsionalitas pinuh . Kauntungan utama pustaka JavaScript nyaéta yén sadaya vérsi platform énggal nyumponan sarat anu lami, ku kituna anjeun tiasa nganggo versi anu lami sareng anu diropéa, sadayana dirojong sareng relevan dugi ka ayeuna. Versi anu dileupaskeun saacanna henteu janten lungse saatos apdet panganyarna.

Pamakéan praktis

Dina kaca utama perpustakaan, dina parentah pikeun pamaké, aya sababaraha conto illustrative ngagunakeun React dina prakna. Anjeun tiasa sacara manual ngabenerkeunana sareng nyobian ngajalankeunana. Sanaos anjeun pangguna énggal sareng henteu ngartos hakekat sareng logika perpustakaan, saluyukeun kodeu anu dipikahoyong sareng ningali hasilna.

Aplikasi praktis React nalika nyerat robot dagang dina JavaScript

Kadé nyadar yén pamekar teu program JS, tapi nulis Aksara (naskah). kituna, ngagunakeun perpustakaan, pamekar a bisa nulis kode pikeun robot dagang saterusna dipaké pikeun tujuan dagang, sarta ogé neruskeun ngarancang penampilan na dumasar kana platform ieu. Nyatana, robot dagang pikeun dagang ogé mangrupikeun aplikasi, anu sajumlah ageung dikembangkeun nganggo React.js. Nanging, sababaraha fungsi sareng bagian internal bot masih kedah dilakukeun dina situs sanés anu nyayogikeun alat anu cocog pikeun ieu.

GitHub jeung React.js

GitHub mangrupikeun platform anu nyayogikeun sadaya vérsi proyék. Pangguna nyambungkeun hosting, ngalangkungan prosedur pendaptaran dina situs wéb GitHub resmi, teras nyiptakeun gudang online dimana anjeunna mindahkeun sadaya file tina Git.
Git mangrupikeun jasa kontrol versi proyék anu paling populér sareng relevan ayeuna, sareng GitHub mangrupikeun gudang kode jauh.

Rujukan! Ngan jalma-jalma anu parantos nampi tautan anu cocog sareng idin anu gaduh aksés kana ngédit sareng ngaunduh file.

Dokuméntasi

Kabéh tutorials jeung bahan up-to-date ngeunaan perpustakaan JavaScript up to date jeung update panganyarna. Pamekar ogé compile na pos pikeun bacaan umum versi heubeul tina dokuméntasi, dipasang dina kaca misah perpustakaan. Ku alatan éta, bakal leuwih gampang pikeun beginners ngawasaan kaahlian manajemén situs: duanana bahan heubeul jeung anyar – sagalana aya di dieu, aksés bébas for everyone.

Catetan! Tong hilap maca manualna. Sahenteuna nyandak katingal – geus lolobana naon seemed teu kaharti bakal tumiba kana tempat.

Perpustakaan React mangrupikeun platform anu populer sareng relevan ayeuna. Versatility na ngamungkinkeun pamekar nyieun proyék kualitas hadé tur dina waktos kirang. Salaku tambahan, terang platform sareng gaduh kaahlian ngagunakeun éta ngajantenkeun spesialis langkung paménta di pasar tenaga kerja.