React.JS kanggo pamula, nggunakake perpustakaan nalika nulis robot dagang

Apa React JS kanggo pamula, apa iku, tutorial, instalasi, dokumentasi – carane nginstal lan nggunakake perpustakaan React JS nalika nulis robot dagang. Asring ing iklan proyek kanggo spesialis komputer, sampeyan bisa nemokake syarat sing nyatakake yen sampeyan duwe katrampilan ing perpustakaan JavaScript. Ya, lan dheweke ngarepake kawruh babagan React ora mung saka pangembang piranti lunak, nanging uga saka programer sing melu pangembangan internal situs kasebut, lan dudu desain eksternal. Apa jenis perpustakaan iki, kesempatan apa sing diwènèhaké ing karya, lan ing ngendi pemula miwiti kenalan? Ayo dipikirake ing artikel iki.

Pustaka JavaScript – React: apa iku

React.JS minangka perpustakaan
basa pemrograman JavaScript sing populer , dibentuk dening jaringan sosial online Facebook supaya bisa nambah lan nyederhanakake proses ngembangake cangkang eksternal situs lan aplikasi – antarmuka sing bisa digunakake kanggo interaksi pangguna. Fitur utama perpustakaan yaiku komponen lan negara. Komponen minangka bagéan saka set digital sing tanggung jawab kanggo tampilan bagean tartamtu saka sistem sing dirancang.

Wigati! Bagean komponen kasebut bisa dipasang.

Negara minangka kumpulan kabeh data babagan rincian antarmuka, kalebu rendering representasional. Nggunakake conto, kita bakal mangerteni sing luwih rinci lan cetha apa. Gambar ing ngisor iki nuduhake sawetara komponen gedhe – ngirim menyang jaringan sosial online, bagean kanthi informasi umum lan nuduhake foto. Saben bagean kalebu komponen sing luwih cilik, yaiku komponen. Contone, publikasi ngemot teks, foto, jeneng pangguna sing nerbitake informasi, lsp. Bagean gambar kalebu gambar individu, lan bagean informasi umum ngemot informasi singkat.
Saben komponen (komponen) kasebut nduweni status. Yaiku, bagean kanthi informasi umum bakal katon beda ing piranti sing beda-beda, unsur “kaya” ngganti warna nalika dipencet lan nomer sing tanggung jawab kanggo jumlah seneng; publikasi, ing siji, bisa shorten teks utawa ngirim ing lengkap.

Mangkono, keluwesan React.JS ditulis – komponen antarmuka ditulis sapisan, lan sawise iku diwenehi kabeh negara bisa.

Napa perpustakaan React dibutuhake?

React.JS minangka salah sawijining pilihan kanggo nulis kode JS utawa HTML kanthi format sing trep, nggawe salinan lan nggawe visual. Komponen ing kene ditulis ing basa sistem khusus – JSX, sing kalebu unsur basa pemrograman JavaScript lan basa markup HTML standar.
Kode sing ditulis ing JSX cukup spesifik. Sampeyan uga penting yen browser web ora kudu ngerti basa sistem iki – kode React.JS ditransfer menyang JS, sing dianggep browser tanpa masalah. Kanggo nindakake iki, apa sing digawe ing perpustakaan kasebut liwat kompiler khusus (salah sawijining sing paling populer saiki yaiku Babel js), sing ngowahi kode ing basa pamrograman sing kurang dikenal dadi perwakilan JavaScript.
Kaping pisanan, bisa uga katon manawa sistem panggunaan kasebut ora logis, nanging sawise sawetara wektu sampeyan wis biasa lan ngerti kenapa mekanisme kasebut dirancang kaya ngono. Pustaka JavaScript nduweni sawetara kaluwihan sing kuat:

• basa program sistem luwih gampang kanggo ngenali saka JavaScript kondhang, lan akibate, bakal njupuk kaping pirang-pirang kurang wektu kanggo ndhukung kode lan ngilangke kasalahan ing (kacepetan nulis kode anyar lan program bakal nambah patut);
• sistem unsur konstituen sing trep lan praktis dibangun ing kene – mbaleni bagean kode sing digunakake ing macem-macem tahapan nulis lan ing macem-macem program, lan uga owah-owahan gumantung konteks;
• saben unsur konstituen subordinate mung kanggo sawijining negara , mulane iku luwih gampang kanggo mbenerake shortcomings ing kode yen kesalahan dumadakan ketemu ing karya ing laku; moments salah ngambang menyang lumahing: unsur sing fungsi mlaku bakal terus bisa stabil ing mode iki, kajaba, mesthi, negara salah digunakake ing hubungan kanggo.

Mangkono, kita bisa nyimpulake yen perpustakaan React.JS bisa ngirit wektu akeh, nggawe kode luwih spesifik, ngatur urutan ing urutan sing bener, lan nggunakake blok gedhe maneh. Kaluwihan kasebut bisa nyuda biaya proses nggawe antarmuka pangguna, uga nyepetake wektu proses iki. Nduwe katrampilan nggunakake basa pemrograman JS lan HTML, sinau nggunakake sistem JSX gampang – mung sawetara dina kanggo nguwasani.

Wigati! Iku nyoto nggunakake perpustakaan nalika nggarap proyek gedhe, nalika perlu kanggo nulis nomer akeh kaca dinamis. Situs bisnis cilik ora mbutuhake kerumitan kasebut.

React kursus fundamental JS saka A nganti Z: https://youtu.be/GNrdg3PzpJQ

Kenalan kanggo pamula: konsep dhasar

Hello World!

Nalika ngakses kaca pisanan perpustakaan, pangguna bakal weruh judhul sambutan minangka conto cilik – “Hello world!”.

Dasar-dasar basa sistem JSX

JSX minangka basa pemrograman sistem, tambahan saka JavaScript sing kondhang. Iki kalebu kombinasi rong basa – pemrograman JA lan basa markup HTML standar. Pangembang digunakake kanggo nyetel konsep kanggo nuduhake React persis carane antarmuka panganggo kudu katon kaya. JSX nggawe “bagean” perpustakaan.

Apa JSX?

Pustaka React netepi logika yen inti saka rendering langsung ana hubungane karo logika antarmuka panganggo: carane acara diproses, carane owah-owahan negara ing wektu tartamtu, lan carane informasi disiapake kanggo presentation. Pustaka JS bisa digunakake tanpa basa sistem, nanging akeh pangembang nemokake iku penting amarga kajelasan lan konkrit nalika nggarap antarmuka panganggo sing digawe saka kode JavaScript. Kajaba iku, ekstensi nggampangake React kanggo ngasilake kabar sing ora bener lan kabar kesalahan.

Pembentukan ekspresi ing basa sistem

JSX ngidini sampeyan nggunakake ekspresi JavaScript sing ditulis kanthi apik ing kurung kriting ing sawijining proses.

JSX uga minangka ekspresi Sawise kode sumber bytecoded, ekspresi JSX apa wae dadi panggilan fungsi JS standar sing ngarahake kategori JavaScript. Saka iki bisa dimangerteni manawa ekstensi sistem saka basa pamrograman resmi bisa digunakake ing jero if manual lan kanggo periode.

JSX minangka Obyek Obyek sing diwakili dening ekstensi diarani unsur React. Dheweke njlentrehake asil sing pengin dideleng dening pangembang ing tampilan. Perpustakaan ngenali obyek kasebut lan digunakake ing proses ngasilake lan njaga Model Obyek Dokumen.

Rendering rinci

Rincian minangka blok bangunan cilik sing nggawe program React.
Rincian minangka gambar sing pengin dideleng dening pangembang ing pungkasan ing monitor. Dibandhingake karo unsur Model Obyek Dokumen, unsur perpustakaan prasaja lan ora njupuk akeh sumber daya. Unsur inggih menika unsur unsur.

Komponen lan Peraga

Komponen ndadekake iku bisa kanggo dibagi UI menyang bagean sawijining, kang luwih gampang kanggo bisa ing dhewe. Padha bisa digabungake lan digunakake kaping pirang-pirang. Umume, fungsi komponen padha karo fungsi basa pamrograman JavaScript dhewe. Dheweke njupuk informasi input, sing diarani prop, lan ngasilake unsur React sing nuduhake model pangembangan sing pengin dideleng dening pangembang ing monitor.

Macem-macem komponen: fungsional lan kelas

Paling gampang kanggo nyebut komponen perpustakaan minangka fungsi.
Komponen uga bisa dituduhake ing format kelas ES6.

menarik! Pustaka React nemtokake rong jinis komponen kasebut minangka padha.

peraga

Props minangka obyek sing ora bisa diganti sing mung diwaca. Mulane, komponen ngirim ora nulis apa-apa kanggo peraga sawijining, ora ketompo apa jenis belongs kanggo.

Negara lan siklus urip

Pisanan, ayo ngerteni carane ngetrapake negara kanthi bener ing karya. Ana telung perkara penting sing kudu dingerteni babagan negara komponen:

1. Aja ngganti negara langsung, gunakake metode setState. Elinga yen mung wilayah sing bisa ngganti negara langsung yaiku konstruktor.
2. Nganyari negara bisa uga ora sinkron.
3. Aliran informasi nduweni siji arah. Ing konstruksi komponen, ora ana sing ngerti yen negara ditugasake menyang komponen liyane. Ora ketompo carane iki utawa unsur fungsional independen kasebut dibentuk – nggunakake alat fungsional utawa klasifikasi. Iki diarani aliran data “downstream”. A negara tansah ditetepake kanggo sawetara unsur, lan asosiasi struktural negara iki mung bisa mengaruhi bagean sing dumunung “ngisor” ing urutan hirarki.

Biasane, negara kasebut diarani “lokal”, “internal”, utawa didhelikake. Iku mung katon kanggo unsur fungsi dhewe lan ora katon kanggo bagean liyane React. Ing program perpustakaan, apa unsur fungsi sawijining endowed karo negara tartamtu utawa ora iku pangembangan internal saka bagean iki, kang bisa diganti liwat wektu. Sampeyan uga menarik yen ing karya sampeyan bisa gabungke komponen karo lan tanpa negara.

Analisis acara

Proses parsing acara ing komponen React padha karo nangani acara ing unsur model obyek document. Nanging, ana sawetara fitur sing mbedakake saben liyane:

1. Acara ing perpustakaan JavaScript dijenengi kanthi gaya sing beda tinimbang sing standar.
2. Nggunakake System Extended Programming Language, pangembang ngliwati subrutin minangka pengendali acara tinimbang string.

Rendering unsur kondisional

Pustaka JavaScript ndadekake iku bisa kanggo break logika ngembangaken unsur dadi komponen sawijining. Padha bisa ditampilake kanggo tampilan umum utawa didhelikake, gumantung ing negara apa lagi endowed karo ing wayahe. Rendering unsur bersyarat dianggo kanthi prinsip sing padha karo ekspresi kondisional adhedhasar basa pamrograman JavaScript. Kadhangkala kedaden sing perpustakaan mbutuhake panjelasan carane negara mengaruhi ndhelikake utawa Rendering sawetara unsur. Ing kene luwih logis nggunakake helper JS kondisional utawa ekspresi sing padha karo yen.

Ngganti Komponen

Unsur perpustakaan React bisa ditambahake menyang variabel. Iki minangka solusi praktis nalika sawetara kondisi nuduhake manawa sawetara bagean komponen kudu digambar, utawa ora ana gunane, dene bagean liyane tetep ora owah.

Dhaptar lan Keys

Bagian iki kalebu sawetara komponen:

1. Nggambar macem-macem unsur . Pangguna bisa mbentuk sakumpulan unsur lan nglebokake ing basa pemrograman sistem nggunakake kurung kriting.
2. Dhaptar unsur dhasar . Asring, pangguna lan pangembang nyetel dhaptar langsung ing bagean komponen.

Kunci

Tombol ing perpustakaan React JavaScript nuduhake alat khusus sing kudu dilebokake nalika nggawe dhaptar komponen. Tombol mbantu perpustakaan JavaScript kanggo ngenali item sing wis disetel, ditambahake, utawa dibusak. Penting kanggo menehi tandha supaya React bisa nggandhengake komponen data struktural sawise sawetara wektu wis liwati.

Formulir

Ing perpustakaan JS, unsur basa markup standar dianggo rada beda tinimbang komponen model obyek dokumen, amarga unsur wangun wiwitane nduweni negara sing didhelikake.

Item Ngatur

Ing basa markup standar, formulir kaya input , pilih , textarea cenderung njaga negarane dhewe lan nganyari nalika pangembang ngetik informasi anyar. Negara React.js tansah nemtokake nilai kolom input ing unsur pengarang sing dikelola. Sanajan iki nuduhake yen pangguna kudu nulis luwih sithik tinimbang kode asli sing diwenehake, saiki bisa ngirim nilai kasebut menyang bagean antarmuka pangguna liyane.

Munggah negara

Ngangkat negara minangka cithakan standar sing kudu dingerteni saben pangembang lan bisa ditrapake sajrone proses kerja. Nggunakake bakal ngilangi pola manajemen negara sing rumit lan biasane ora ana guna.

Kenging punapa kemawon prelu ngendhaleni bangkitipun nagari?

Ngunggahake negara menyang tingkat komponen kepungkur kanggo bagean sing mbutuhake supaya kabeh unsur bisa melu ing negara. Tingkat negara sing stabil bakal luwih gampang disebarake ing antarane kabeh komponen sing gumantung.

Komposisi vs Warisan

React.js kalebu model komposisi sing kuwat, mula disaranake nggunakake proses mbangun kabeh saka bagean tinimbang warisan kanggo nggunakake maneh kode sing ditulis sadurunge antarane unsur. Mangkono, peraga lan kemampuan kanggo nggawe komposisi siji saka bagean komponen, nyedhiyakake pangembang kanthi keluwesan sing dibutuhake kanggo nggawe cangkang lan prilaku unsur kasebut kanthi cara sing spesifik lan aman.

Pangeling-eling! Bagean komponen bisa njupuk peraga sing ora ana gandhengane, kalebu bagean dhasar sing nggawe perpustakaan utawa fungsi.

Yen sampeyan kudu nggunakake fungsi katon-free kanggo nggarap komponen kaping pindho utawa kaping telune, narik metu menyang modul JS kapisah. Pindhah menyang komponèn lan nggunakake fungsi kui tanpa expansion luwih. React utawa Vue utawa Angular, apa sing kudu dipilih: https://youtu.be/Nm8GpLCAgwk

Prinsip React.js

Filosofi kabeh perpustakaan JavaScript didhelikake ing pandhuan React. Iku misale jek sing iki dawa lan ora wigati banget, Nanging, akeh kedhaftar pratelan sing sawise maca kabeh tiba ing panggonan. Dokumentasi kasebut cukup lawas, nanging isih ana regane lan relevansi –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Fungsi perpustakaan React.js

Nggunakake perpustakaan JavaScript, pangguna entuk kesempatan kanggo menehi perhatian langsung marang proses pangembangan UI lan komponen aplikasi, paling ora bisa diganggu dening pembentukan lan kemungkinan kekurangan kode sing ditulis. Perpustakaan ngidini sampeyan ngembangake program luwih cepet, nggampangake ngatur lan ngowahi komponen lan proses kabeh proyek kanthi wutuh. Mangkono, React.js ngemot unsur sing tanggung jawab kanggo komunikasi ing jaringan global, UI, kontrol negara program lan kemampuan kanggo ngatasi masalah rumit liyane. Perpustakaan uga nduweni fitur fungsional ing ngisor iki:

1. Praktis . React.js kasedhiya ing format minified. Paket kompak iki ora perlu dikonfigurasi kanthi jelas. Wis kalebu fitur pamisah kode sing nyuda wektu kanggo mbukak versi browser situs, amarga pilihan iki ngalangi komponen saka Rendering ing wektu sing padha.
2. Ekosistem pompa lan kepatuhan . Ana akeh alat sing kasedhiya ing perpustakaan, didhukung dening situs liyane, sing ngidini pangguna ngembangake program kompleks anyar kanggo maksud apa wae.
3. Fungsi lengkap . Kauntungan utama saka perpustakaan JavaScript yaiku kabeh versi anyar saka platform nyukupi syarat-syarat sing lawas, supaya sampeyan bisa nggunakake versi lawas lan sing dianyari, kabeh didhukung lan relevan nganti saiki. Versi sing dirilis sadurunge ora dadi lungse sawise nganyari paling anyar.

Panggunaan praktis

Ing kaca utama perpustakaan, ing pandhuan kanggo pangguna, ana sawetara conto ilustrasi babagan nggunakake React ing praktik. Sampeyan bisa kanthi manual mbenerake lan nyoba kanggo mbukak. Sanajan sampeyan pangguna anyar lan ora ngerti inti lan logika perpustakaan, atur kode sing dikarepake lan ndeleng asil.

Aplikasi praktis React nalika nulis robot dagang ing JavaScript

Iku penting kanggo éling sing pangembang ora program JS, nanging nulis skrip (skrip). mulane, nggunakake perpustakaan, pangembang bisa nulis kode kanggo robot dagang sakteruse digunakake kanggo tujuan dagang, lan uga terus ngrancang tampilan adhedhasar platform iki. Nyatane, robot dagang kanggo dagang uga minangka aplikasi, sing akeh dikembangake nggunakake React.js. Nanging, sawetara fungsi lan bagean internal bot isih kudu ditindakake ing situs liya sing nyedhiyakake alat sing cocog kanggo iki.

GitHub lan React.js

GitHub minangka platform sing dadi tuan rumah kabeh versi proyek. Pangguna nyambungake hosting, ngliwati prosedur registrasi ing situs web GitHub resmi, banjur nggawe repositori online ing ngendi dheweke nransfer kabeh file saka Git.
Git minangka layanan kontrol versi proyek sing paling populer lan relevan saiki, lan GitHub minangka repositori kode remot.

Referensi! Mung pangguna sing wis nampa link sing cocog kanthi ijin sing duwe akses kanggo nyunting lan ngundhuh file.

Dokumentasi

Kabeh tutorial lan materi sing paling anyar babagan perpustakaan JavaScript dianyari karo nganyari paling anyar. Pangembang uga ngumpulake lan ngirim kanggo maca umum versi lawas saka dokumentasi, dikirim ing kaca kapisah saka perpustakaan. Mulane, bakal luwih gampang kanggo pamula kanggo nguwasani katrampilan manajemen situs: materi lawas lan anyar – kabeh ana ing kene, akses gratis kanggo kabeh wong.

Wigati! Aja lali maca manual. Paling ora, deleng – sing paling akeh sing ora bisa dingerteni bakal kedadeyan.

Pustaka React minangka platform populer lan relevan saiki. Versatility ngidini pangembang nggawe proyek kanthi kualitas sing luwih apik lan ing wektu sing luwih sithik. Kajaba iku, ngerti platform lan duwe katrampilan nggunakake nggawe spesialis luwih dikarepake ing pasar tenaga kerja.