1. Pengantar reaksi
React adalah kerangka pengembangan front-end yang sangat populer baru-baru ini. React berasal dari proyek internal Facebook, karena perusahaan tidak puas dengan semua kerangka kerja JavaScript MVC di pasaran, jadi ia memutuskan untuk menulis satu set sendiri untuk membuat situs web Instagram. Setelah saya berhasil, saya menemukan bahwa serangkaian hal ini sangat berguna, dan dibuka pada Mei 2013. Karena ide desain React sangat unik, revolusioner dan inovatif, dengan kinerja yang luar biasa, tetapi logika kodenya sangat sederhana. Oleh karena itu, semakin banyak orang mulai memperhatikan dan menggunakannya, percaya bahwa itu mungkin alat utama untuk pengembangan web di masa depan.
ReactJS Alamat Situs Web Resmi: http://facebook.github.io/react/
Alamat GitHub: https://github.com/facebook/react
Reactjs Alamat Cina: http://reactjs.cn/react/docs/getting-started.html
Apa itu React?
React adalah perpustakaan JS yang dikembangkan oleh programmer luar biasa yang bekerja di Facebook untuk mengembangkan antarmuka interaksi pengguna. Kode sumbernya dikelola oleh programmer yang sangat baik dari Facebook dan masyarakat, sehingga memiliki tim teknis yang sangat kuat di belakangnya untuk memberikan dukungan teknis. React membawa banyak hal baru, seperti komponen, JSX, DOM virtual, dll. DOM virtual yang disediakannya membuat komponen rendering kami sangat cepat, membebaskan kami dari pekerjaan berat yang sering mengoperasikan DOM. Siapa pun yang tahu bereaksi tahu bahwa itu lebih fokus pada lapisan V di MVC. Dikombinasikan dengan hal -hal lain seperti fluks, Anda dapat dengan mudah membangun aplikasi yang kuat.
2. Fitur ReactJS
1. Dom virtual
Melalui algoritma DOM Diff, hanya bagian yang dibedakan yang akan diperbarui tanpa membuat seluruh halaman, sehingga meningkatkan efisiensi
2. Komponen
Bagilah halaman menjadi beberapa komponen, termasuk struktur dan gaya logis
Komponen hanya berisi logika mereka sendiri, yang dapat diprediksi saat memperbarui komponen, yang kondusif untuk pemeliharaan.
Halaman ini membagi beberapa komponen, dan dapat digunakan kembali
3. Aliran data satu arah
Data diteruskan dari komponen tingkat atas ke subkomponen
Data dapat dikendalikan
3. Memulai dengan Bereaksi. Tulis halo, dunia. Pertama, mari kita mengerti apa itu JSX.
Salah satu mekanisme inti React adalah virtual DOM: elemen DOM virtual yang dapat dibuat dalam memori. React menggunakan DOM virtual untuk mengurangi operasi pada DOM aktual dan meningkatkan kinerja. Mirip dengan DOM asli nyata, DOM virtual juga dapat dibuat melalui JavaScript, misalnya:
var child1 = react.createElement ('li', null, 'konten teks pertama'); var child2 = react.createElement ('li', null, 'konten teks kedua'); var root2 = react.createElement ('ul', {classname: 'my-list'}, child1, child2); react.render (<div> {root2} </div>, document.geteLementById ('container5'));Dengan menggunakan mekanisme ini, kita dapat menggunakan JavaScript untuk membangun pohon DOM antarmuka yang lengkap, sama seperti kita dapat menggunakan JavaScript untuk membuat DOM nyata. Namun, kode seperti itu tidak dapat dibaca dengan baik, jadi bereaksi menemukan JSX dan menggunakan sintaks HTML kami yang akrab untuk membuat dom virtual:
var root = (<ul classname = "my-list"> <li> Konten teks pertama </li> <li> Konten teks kedua </li> </ul>); react.render (<verv> {root} </div>, document.geteLementById ('container6'));4. 5 cara untuk memulai dengan Hello in React
Metode 1
<Div id = "example1"> </div> <script type = "text/jsx"> react.render (// langsung html <h1 classname = "classn1"> 1 hellow html world direct </h1>, document.geteLementById ('example1')); </skripMetode 2
<Div id = "example2"> </div> <script type = "text/jsx"> react.render (// buat elemen langsung react.createElement ('h1', {classname: 'classn2'}, '2 halo, buat elemen langsung dunia!'), document.geteLementById ('example2')); </script>Metode 3
<Div id = "example3"> </div> <script type = "text/jsx"> var createel = react.createClass ({render: function () {// return <h1> component creation html world </h1> // return dengan atau tanpa brackets (<h1 classname = 'classn'> 3 </h1>);}}); react.render (// buat elemen <createel //, // atau braket ganda <createel> </createel> document.geteLementById ('example3')); </script>Metode 4
<Div id = "example4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createClass ({// buat render dalam mode jsx secara langsung: function () {return (react.createElement ('h1', {classname: "classn4"}, "4 Hello, 'create in world in js.") elemen dalam metode komponen react.createElement (jsxcreateel, null), document.geteLementById ('example4')); </script>Metode 5
<Div id = "example5"> </div> <script type = "text/jsx"> var hello = react.createClass ({// templat hello render: function () {return (<span> {this.props.data} </span>}}); var world = react.createClass ({{span/worldate ({span) {{{span) {{{{{span) {{{span) {{{{span) {{{span) {{{span) {{{{span) {{{{span) ({{{span); Jahitan </span>)}}); react.render (// Buat elemen dalam 2 komponen template <h1 classname = "classn5"> <hello data = '5 halo'/> <world/> </h1>, document.geteLementById ('contoh5')); </skrip5. Gambar hasil di atas
Kode terlampir:
<!doctype html><html><head><meta charset="utf-8"><title>Unt titled document</title><meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /></head><body><style>*{ margin:0; padding: 0;} body {latar belakang:#333;}#box {latar belakang: url (loveimg/qioa-fxehfqi8208393.jpg) no-rePeat center top; Lebar: 550px; Perbatasan: 8px solid #ffff; -webkit-box-ukuran: kotak perbatasan; margin: 50px auto;}#example1,#example2,#example3,#example4,#example5 {margin: 20px auto; Lebar: 100%; Latar belakang: RGBA (255.255.255, .3); padding: 5px 10px; font-size: 13px; Warna:#f1f1f1; -webkit-box-ukuran: boord-box; } </style> <div id = "box"> <div id = "example1"> </div> <script type = "text/jsx"> react.render (// langsung html <h1 classname = "classn1"> 1 hellow html world </h1, document.geteLementByD ('example1'); type = "text/jsx"> react.render (// langsung membuat elemen react.createElement ('h1', {classname: 'classn2'}, '2 Halo, langsung membuat dunia elemen!'), document.geteLementById ('example2')); </skrip> <div id = "example3"> </div> type = " Createel = react.createClass ({render: function () {// return <h1> komponen hellow menciptakan html world </h1> // return dengan atau tanpa tanda kurung (<h1 classname = 'classn3'> 3 komponen hellow membuat html world </h1>);}}); react. <createel> </createel> document.getElementById ('example3')); </script> <div id = "example4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createClass ({// buat render di jsx langsung: function () {react.createEclass ({// Buat render di jsx langsung: function () {react.createEclass ({// Buat render di jsx langsung: function () {react.createEclass ({// Buat render di JSX Langsung: function () {react.createEclass ({// Halo, buat dunia di jsx secara langsung! "))}}); React.render (// buat elemen dalam metode komponen react.createelement (jsxcreateel, null), document.geteLementById ('contoh4')); </script> <div id =" example5 "> </div> <script type =" text/js/jsxx. render:function(){return (<span>{this.props.data}</span>)}});var World=React.createClass({ // Template world render:function(){return (<span> and World template stitching</span>)}});React.render( // Create elements in 2 template components<h1 className="classN5" > <Hello data = '5 halo'/> <world/> </h1>, document.geteLementById ('example5')); </script> </div> <script src = "build/react.min.js"> </script> <script src = "build/jsxtransformer.js"> </script> </script = ”Berikut adalah beberapa pengetahuan tambahan untuk Anda:
Istilah Bereaksi
Elemen Bereaksi
Objek JavaScript yang mewakili elemen HTML. Objek JavaScript ini akhirnya dikompilasi ke dalam elemen HTML yang sesuai.
Komponen
Merangkum elemen bereaksi, termasuk satu atau lebih elemen bereaksi. Komponen digunakan untuk membuat modul UI yang dapat digunakan kembali seperti paging, navigasi sidebar, dll.
JSX
JSX adalah ekstensi sintaks JavaScript yang ditentukan oleh React, mirip dengan XML. JSX adalah opsional, kita dapat menggunakan JavaScript untuk menulis aplikasi bereaksi, tetapi JSX memberikan cara yang lebih sederhana untuk menulis aplikasi React.
DOM virtual
Virtual DOM adalah objek JavaScript yang mensimulasikan pohon DOM. React menggunakan DOM virtual untuk membuat UI, sambil mendengarkan perubahan data pada DOM virtual dan secara otomatis memigrasi perubahan ini ke UI.