Bermula dengan React.js

React.js ialah fleksibel dan berasaskan komponen Perpustakaan JavaScript untuk membina antara muka pengguna interaktif. Ia adalah dicipta dan sumber terbuka oleh Facebook dan digunakan oleh banyak syarikat teknologi terkemuka seperti Dropbox, AirBnB, PayPal, dan Netflix. React membolehkan pemaju untuk mewujudkan aplikasi berat-data yang boleh dikemaskini secara tidak terurus oleh membuat semula hanya komponen yang diperlukan.

Bertindak balas adalah Lihat lapisan dari MVC corak reka bentuk perisian, dan ia terutamanya menumpukan pada manipulasi DOM. Sebagai hari ini semua orang bercakap tentang React, dalam post ini kita sedang melihat bagaimana anda boleh mulakan dengannya.

Pasang reaktif

Anda boleh memasang React sama ada dengan pengurus pakej npm atau oleh menambah perpustakaan yang diperlukan secara manual ke halaman HTML anda. Ia disyorkan menggunakan React dengan Babel yang membolehkan anda gunakan sintaks ECMAScript6 dan JSX dalam kod Reaktik anda.

Jika anda mahu memasang React secara manual, dokumen rasmi mengesyorkan kepada gunakan fail HTML ini. Anda boleh memuat turun halaman dengan mengklik Fail> Simpan Halaman Sebagai ... menu dalam pelayar anda. Skrip yang anda perlukan (React, React DOM, Babel) juga akan dimuat turun ke dalam bertindak balas-contoh_files / folder. Kemudian, tambahkan tag skrip berikut kepada seksyen dokumen HTML anda:

Daripada memuat turunnya, anda boleh menambah skrip React dari CDN juga.

Anda juga boleh menggunakan versi minified fail JavaScript di atas:

Jika anda lebih suka memasang React dengan npm, cara terbaik adalah menggunakan Buat React App Repo Github dicipta oleh Facebook Incubator - ini juga merupakan penyelesaian yang direkomendasikan oleh dokumen React. Selain dari React, ia juga mengandungi Webpack, Babel, Autoprefixer, ESLint, dan alat pemaju lain. Untuk memulakan, gunakan arahan CLI berikut:

 npm install -g create-react-app create-react-app my-app cd my-app npm start

Apabila anda sudah bersedia, anda boleh akses apl React baru anda pada localhost: 3000 URL:

Sekiranya anda mahu membaca lebih lanjut bagaimana untuk memasang React, semak garispanduan pemasangan daripada dokumen.

React dan JSX

Walaupun tidak wajib, anda boleh gunakan sintaks JSX dalam aplikasi React anda. JSX bermaksud JavaScript XML, dan ia transpile menjadi JavaScript biasa. Kelebihan besar JSX ialah ia membolehkan anda menyertakan HTML dalam fail JavaScript anda, oleh itu ia membuat elemen React mendefinisikan lebih mudah.

Berikut adalah perkara yang paling penting untuk mengetahui tentang JSX:

Teg itu mulakan dengan huruf kecil (kes bawah unta) diberikan sebagai elemen HTML biasa.
Teg itu mulakan dengan huruf besar (kes atas unta) diberikan sebagai komponen Reaktik.
Mana-mana kod ditulis dalam pendakap kerinting ... ditafsirkan sebagai JavaScript literal.

Jika anda ingin mengetahui lebih lanjut tentang bagaimana untuk menggunakan JSX dengan React semak halaman ini dari dokumen, dan untuk dokumentasi JSX lalai anda boleh lihat di wiki JSX.

Buat elemen Reaktif

React mempunyai a seni bina berasaskan komponen di mana pemaju membuat komponen boleh diguna semula untuk menyelesaikan masalah yang berbeza. Komponen Reaksi dibina daripada beberapa atau lebih banyak Elakkan unsur-unsur yang unit React yang paling kecil.

Di bawah, anda boleh lihat contoh mudah elemen React yang menambah butang Klik saya ke halaman HTML. Dalam HTML, kami menambah

bekas dengan "myDiv" ID yang akan menjadi dihuni dengan unsur Reaktik. Kami mencipta elemen Reaktak kami dalam a

   Kami menjadikan elemen React kami dengan ReactDOM.render () kaedah yang mana mengambil dua parameter yang diperlukan, yang Elakkan elemen () dan bekasnya (document.getElementById ('myDiv')). Anda boleh membaca lebih lanjut bagaimana elemen React berfungsi di dalam “Elemen Rendering” seksyen dokumen.
 Buat komponen
 Reaksikan komponen adalah boleh digunakan semula, unit UI bebas di mana anda boleh mengemas kini data dengan mudah. Komponen boleh dibuat daripada satu atau banyak elemen Reaktik. Prop adalah input sewenang-wenangnya anda boleh gunakan untuk menyampaikan data kepada komponen. Komponen React berfungsi sama seperti fungsi JavaScript-setiap kali ia digunakan, ia menghasilkan beberapa jenis output.
 Anda boleh menggunakan sama ada sintaks fungsi klasik atau yang baru Sintaks kelas ES6 kepada mentakrif komponen React. Dalam artikel ini, saya akan menggunakannya sebagai Babel yang membolehkan kami menggunakan ECMAScript 6. Jika anda berminat untuk membuat komponen tanpa ES6, lihat halaman Komponen dan Props dokumen.
 Di bawah, anda boleh melihat komponen React yang mudah kita akan buat sebagai contoh. Ini adalah pemberitahuan asas yang pengguna lihat selepas log masuk ke tapak. Terdapat tiga keping data yang akan perubahan dari kes ke kes: nama pengguna, bilangan mesej, dan bilangan pemberitahuan, kami akan menyampaikannya sebagai alat peraga.
  
Setiap komponen React adalah kelas JavaScript yang memanjangkan React.Component kelas asas. Komponen kami akan dipanggil Statistik kerana ia menyediakan pengguna dengan statistik asas. Pertama, kita buat Statistik kelas dengan kelas Statistik memanjangkan React.Component ... sintaks, maka kita menjadikannya pada skrin dengan memanggil ReactDOM.render () kaedah (kami telah menggunakannya di bahagian sebelumnya).
  Statistik kelas memanjangkan React.Component render () return (  Hai this.props.name, anda mempunyai this.props.notifications notifikasi baru dan this.props.messages mesej baru. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Hujah pertama ReactDOM.render () kaedah terdiri daripada nama komponen React kami (), dan alat perangsangnya (nama, pemberitahuan, dan mesej) dengan nilai mereka. Apabila kita mengisytiharkan nilai-nilai alat peraga itu, tali akan menjadi tertutup dalam tanda petikan (seperti "John Doe") dan nilai angka dalam kurungan kurungan (seperti 3).
 Perhatikan bahawa kerana JavaScript, kami digunakan className bukannya kelas untuk lulus atribut kelas kepada tag HTML (className = "ringkasan").
 Halaman HTML yang sepadan adalah yang berikut:
          
    
 Dalam dokumen Reacts, terdapat banyak contoh keren yang lain bagaimana untuk membina & mengurus komponen Reaktik, dan apa lagi yang perlu diketahui tentang alat.
 Bacaan lanjut
 Dengan React, Facebook diperkenalkan rangka kerja baru ke dalam pembangunan front-end itu mencabar corak reka bentuk MV *. Jika anda ingin memahami dengan lebih baik bagaimana ia berfungsi dan apa yang anda boleh dan tidak dapat mencapai dengannya, berikut adalah beberapa artikel menarik yang dapat membantu:
 Siaran blog Facebook pada mengapa mereka membina React.
 Siaran blog brilian Andrew Ray pada yang baik dan buruk React.
 Codementor pada bagaimana React dan AngularJS bandingkan.
 Memikirkan apa yang difikirkan FreeCodeCamp sama ada MVC mati di hadapan.
 Artikel HackerNoon pada bagaimana untuk mengoptimumkan prestasi yang berkaitan dengan React.