Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Menggunakan JSX dan React

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React

Malay (Melayu) translation by Neurion (you can also view the original English article)

Final product image
What You'll Be Creating

JSX mirip dengan campuran XML dan HTML. Anda menggunakan JSX dalam kode React untuk membuat komponen mudah untuk aplikasi anda. JSX bertukar menjadi JavaScript apabila React menyusun kode tersebut.

Keindahan React ialah anda boleh membuat kod yang boleh diguna semula dan dengan mudah strukturkan aplikasi anda dari minda berasaskan komponen. Akhirnya, jurang antara mengolok-olok wireframe idea-idea semantik yang dibentuk dan melaksanakannya tidak pernah dekat.

Rasa Pertama Anda pada JSX

Berikut adalah contoh JSX yang digunakan untuk menjadikan HTML:

Untuk membuat komponen, gunakan pemboleh ubah setempat yang bermula dengan huruf besar, contohnya:

Nota: Terdapat kata-kata tersimpan dalam JSX, kerana ia pada dasarnya adalah JavaScript selepas semua — jadi kata kunci seperti class dan for tidak digalakkan sebagai nama atribut. Sebaliknya, komponen React mengharapkan nama property React seperti nama className dan htmlFor, contohnya.

Tag Nesting

Tentukan anak-anak di dalam JSX anda seperti:

Menguji JSX

Gunakan Babel REPL untuk menguji JSX.

Sub-Komponen dan Namespaces

Penciptaan borang adalah mudah dengan JSX dan sub-komponen, contohnya:

Untuk membuat kerja ini, anda mesti membuat sub-komponen sebagai atribut komponen utama:

Expressions

Untuk menggunakan beberapa JavaScript untuk membuat keputusan untuk digunakan dalam nilai atribut, Reaktik hanya memerlukan anda untuk membungkusnya dalam {} keriting kerinting seperti itu:

Anda juga boleh lulus nilai boolean untuk atribut bentuk seperti disabled, checked dan sebagainya. Nilai-nilai ini juga boleh dikekalkan jika anda suka dengan hanya menulis HTML biasa.

Atribut Penyebaran

Apabila anda ingin menetapkan pelbagai atribut, pastikan anda melakukan ini pada deklarasi komponen anda dan tidak pernah selepas. Pengisytiharan kemudian menjadi anti-corak yang berbahaya yang bermakna anda mungkin tidak mempunyai data harta sehingga lebih lewat dalam pelaksanaan.

Tambah beberapa sifat ke komponen anda dengan demikian, menggunakan operator penyebaran baru ... ES6.

Komen dalam JSX

Anda boleh menggunakan komen gaya gaya // dan / * ... * / berbilang baris di dalam JSX anda. Sebagai contoh:

Kesalahan biasa dengan JSX

Terdapat beberapa perkara yang boleh mengelirukan sesetengah orang dengan JSX, contohnya apabila menambah atribut kepada elemen HTML asli yang tidak wujud dalam spesifikasi HTML.

React tidak akan menyebabkan sebarang sifat pada elemen HTML asli yang tidak berada dalam spec melainkan anda menambah awalan data- seperti:

Juga, penyebaran HTML dalam kandungan dinamik dapat mengelirukan kerana melarikan diri dan perlindungan XSS yang React telah dibina. Atas sebab ini, React menyediakan dangerouslySetInnerHTML.

Contoh Aplikasi Chat

Anda mungkin melihat Gitter aplikasinya. Ia adalah aplikasi sembang web masa nyata yang terutamanya bertujuan untuk pemaju. Ramai orang menggunakannya untuk membincangkan projek mereka di GitHub, kerana integrasi mudah dengan GitHub dan dapat membuat saluran untuk repositori anda.

Aplikasi jenis ini dengan mudah boleh dibuat dengan React dengan melaksanakan API WebRTC untuk membuat sembang p2p dalam penyemak imbas. Untuk ini kita akan menggunakan mod PeerJs dan socket.io untuk Node.

Untuk memberi anda idea jelas seni bina aplikasi, berikut adalah gambarajah UML peringkat rendah asas:

file

ChatServer menerima mesej isyarat dengan PeerJS, dan setiap pelanggan akan menggunakannya sebagai proksi untuk menjaga perjalanan NAT.

Kami akan memulakan aplikasi dari bawah untuk memberikan anda perasaan yang baik bagaimana membuat permohonan React. Pertama buat direktori baru untuk aplikasi anda, dan di dalamnya buat package.json.

Fle package.json ini digunakan oleh npm untuk memudahkan konfigurasi aplikasi anda. Kami menyatakan kebergantungan kami: express, kerangka web yang akan kami gunakan untuk melayani aplikasi kami; peer, pelayan peerjs yang akan kita gunakan untuk memberi isyarat; socket.io yang akan digunakan untuk pengundian dan pelaksanaan webRTC. react-bootstrap dan bootstrap adalah pakej untuk menggunakan rangka kerja CSS Twitter untuk gaya aplikasi kami.

Kami juga akan memerlukan beberapa pakej tambahan, dan untuk itu kita akan menggunakan bower.

Buat bower.json dan tambahkan yang berikut:

Dengan konfigurasi ini, kami akan bertindak react, jQuery, bootstrap, eventEmitter untuk acara penembakan dan pustaka Pelanggan peerJS untuk membungkus WebRTC.

Akhir sekali, tentukan di mana untuk memasang ini dengan menetapkan fail .bowerrc:

Dari sini, hanya duduk dan pasang dependencies anda melalui:

Apabila arahan ini selesai, anda akan melihat node_modules direktori baru dan src/lib. Ini mengandungi modul sedia untuk digunakan.

Sekarang buat app.js di direktori utama bersama package.json anda, jsb. Ini akan menjadi titik masuk utama permohonan anda.

Ini hanya akan mewujudkan pelayan Express, menjadikan src/ fail yang baru kita dapatkan dengan bower kini boleh diakses melalui HTTP. Kemudian, socket.io dicipta untuk mendengar objek expressServer. Ini digunakan untuk mengundi dan memudahkan langkah seterusnya untuk PeerServer, yang sebenarnya akan melakukan bahagian chat WebRTC.

Untuk mengkonfigurasi PeerServer, semua yang anda perlu lakukan ialah menentukan port dan path server  akan berjalan, dan kemudian mula mengkonfigurasi acara dengan kaedah .on. Kami menggunakan fail berasingan yang dinamakan Events.js untuk menentukan peristiwa aplikasi kami.

Di sini kita menggunakan persitiwa events.CONNECT untuk menentukan apabila pengguna telah disambungkan ke aplikasi kami. Ini akan digunakan oleh komponen komponen pandangan kami untuk mengemas kini paparan mereka dalam masa nyata.

Untuk melakukan ini, kita perlu mencipta Pelayan untuk sambungan rakan sebaya ke proksi melalui.

Buat fail di src/Server.js dan tambahkan yang berikut:

Ini adalah keberanian utama permohonan itu. Di sini kita mengkonfigurasi objek ChatServer dengan semua fungsinya.

Mula-mula kita menggunakan socket.io untuk menubuhkan isyarat pengguna baru yang disambungkan melalui events.CONNECT seperti:

Kemudian, untuk menyambung ke PeerServer, kami menggunakan perkara berikut:

Kami kemudian mendengar peristiwa melalui kaedah on:

Kami juga mempunyai bahagian dalam JSX kami dalam direktori component/chat. Luangkan masa anda untuk melihat semua mereka dalam repositori. Saya akan memberi tumpuan kepada komponen ChatBox untuk sekarang:

Kelas ini mengambil penggunaan ChatServer yang kami buat sebelum ini, menggunakannya sebagai proksi untuk komponen ChatBox.

Komponen dan pustaka akhirnya semua dipaparkan pada halaman dengan index.html dan disampaikan melalui ekspresi simpul.

Untuk memulakan aplikasinya, jalankan npm start dan arahkan penyemak imbas anda ke http://localhost:3001 untuk melihat sembang.

Pergi secara langsung di Heroku

Berkhidmat dari awan sangat mudah dengan Heroku. Mendaftar untuk akaun percuma dan kemudian anda boleh memasang tooloku heroku ke sistem anda. Baca lebih lanjut mengenai mendapatkan Heroku ditubuhkan di Heroku Dev Center.

Sekarang bahawa anda mempunyai Heroku yang tersedia, log masuk dan buat projek baru seperti itu:

Di sini anda akan mendapat nama rawak dari Heroku dan URL aplikasi anda—dalam contoh kami, http://sharp-rain-871.herokuapp.com/. Heroku juga membuat git repo untuk aplikasi ini.

Sekarang ini semudah menekan kod anda ke heroku:

Setelah menolak selesai, anda akan dapat memulakan perkhidmatan web anda dengan yang berikut:

Sekarang lawati URL yang disediakan, atau sebagai jalan pintas gunakan arahan open seperti:

Kesimpulan

Anda telah belajar bagaimana membuat komponen JSX dan menyatukannya dengan React, dengan contoh terperinci aplikasi sembang. Luangkan sedikit masa untuk melalui kod dan lihat bagaimana React dan direktori components/chat berfungsi.

Digabungkan dengan penempatan ke Heroku, anda boleh memulakan penggodaman dan membuat aplikasi React anda sendiri untuk awan!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.