Pertama -tama, sebelum mempelajari kerangka kerja ini, Anda perlu memiliki beberapa pemahaman tentang pengetahuan berikut:
1. Dasar JS asli
2. Dasar CSS
3. NPM Dasar -dasar Manajemen Paket
4. Webpack membangun dasar -dasar proyek
5.es6 spesifikasi
Lima titik pengetahuan di atas juga merupakan pra-tugas yang harus dipahami dalam mempelajari kerangka kerja front-end lainnya.
Saya tidak akan banyak bicara tentang JS dan CSS. NPM adalah alat manajemen paket yang paling dianjurkan dan dominan saat ini. Anda dapat mempertimbangkannya jika Anda masih menggunakan bower atau alat lainnya. Sebagai generasi baru alat pengemasan, Webpack telah mendominasi alat pengemasan front-end dan memiliki keuntungan besar dibandingkan dengan Browserify. Adapun spesifikasi ES6, meskipun browser utama tidak kompatibel sekarang, mereka dapat dikonversi menggunakan konverter seperti Babel.
Menggabungkan beberapa kerangka kerja front-end utama lainnya, saya pribadi percaya bahwa ada tiga hal dasar untuk membangun aplikasi satu halaman: komponen, perutean, dan manajemen negara . Kemudian saya akan memperkenalkan Bereaksi berdasarkan ketiganya, tentu saja akan ada beberapa poin pengetahuan tambahan yang diselingi di sana.
Komponen
Penulisan dan panggilan komponen React terutama tergantung pada modularitas ES6 dan sintaks JSX. Inilah contohnya:
// main.jsimport React from 'react'import { render } from 'react-dom'import MyComponent from './component.js'import './main.css'// main component class MyDemo extends React.Component { render() { return ( <div className="box"> <MyComponent /> </div> ) }}render(( <MyDemo />), document.geteLementById ('app')) // component.js // subkomponen impor bereaksi dari 'react'export kelas default myComponent memperluas react.component {render () {return (<v> <p> Ini adalah komponen! </p> </div>)}} // Main.css.box!Dibandingkan dengan kerangka kerja Vue.js, saya pribadi berpikir bahwa cara reaksi komponen ditulis tidak senyaman VUE, dan gaya CSS komponen masih dipisahkan dari bagian luar komponen, sehingga tidak terlalu nyaman untuk dipertahankan.
Dari contoh ini, kita dapat melihat fitur -fitur DOM Virtual dan JSX. Dibandingkan dengan kerangka kerja lainnya, DOM Virtual React tidak hanya dapat meningkatkan kinerja halaman, tetapi juga mencegah serangan XSS, dll. Prinsip -prinsip spesifik DOM virtual tidak diperkenalkan di sini
Sedangkan untuk sintaks JSX, ini adalah semacam gula sintaks JS. Kami dapat dengan mudah menerapkan beberapa fungsi melalui gula sintaks ini. Di sini, JSX mengubah sintaks XML menjadi elemen JavaScript murni, dan XML, atribut dan node anak dikonversi menjadi parameter react.createelement. Gula sintaks JS serupa termasuk naskah dan jenis lainnya.
rute
Mekanisme perutean front-end adalah salah satu tautan terpenting dalam membangun aplikasi satu halaman (SPA). Melalui routing front-end, kami dapat mengoptimalkan pengalaman pengguna tanpa mendapatkan semua data dari server setiap saat, sehingga dapat dengan cepat menyajikan halaman kepada pengguna.
Routing bereaksi tergantung pada router bereaksi . React Router membuat UI dan URL disinkronkan. Ini memiliki API sederhana dan fitur -fitur kuat seperti pemuatan buffering kode, pencocokan perutean dinamis, dan membangun transisi lokasi yang benar.
Berikut adalah contoh dari routing bereaksi:
import React, { Component } from 'react'import { render } from 'react-dom'import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'const ACTIVE = { color: 'red' }class App extends Component { render() { return ( <div> <h1>My Router</h1> <ul> <li><Link to="/" activeStyle={ACTIVE}>Home</Link></li> <li><Link to="/users" activeStyle={ACTIVE}>User Page</Link></li> </ul> {this.props.children} </div> ) }}class Index extends React.Component { render() { return ( <div> <h2>Index!</h2> </div> ) }}class Users memperluas react.component {render () {return (<div> <h2> pengguna </h2> </div>)}} reender ((<router history = {browserhistory}> <route path = "/" component = {app}> <indextroute component = {index}} </"component = {app {component =" component {index {index} </"component =" component = "component = {route {{route-" component = "component =" component = "component =" </Router>), document.getElementById ('app'))Hanya satu metode perutean untuk React yang tercantum di sini. Dibandingkan dengan kerangka kerja lainnya, sintaks routing bereaksi lebih mudah dipahami.
Manajemen status
Manajemen negara bukan aplikasi satu halaman yang diperlukan. Menggunakannya dapat membantu kami mengelola perubahan di setiap negara bagian secara terpadu, membuat seluruh proses proyek jelas dan dapat dipelihara. Manajemen Negara Implementasi Bereaksi dapat menggunakan Redux yang direkomendasikan secara resmi.
Redux menggunakan aliran data satu arah yang ketat. Seluruh status aplikasi disimpan dalam pohon objek, dan pohon objek ini hanya ada di satu -satunya toko.
Contoh proyek
Di sini saya menulis satu situs web halaman menggunakan React, dan halamannya adalah sebagai berikut:
Mengambil
Karena saya menggunakan Fetch untuk interaksi AJAX dalam contoh di atas, saya akan memperkenalkan Fetch di sini secara singkat.
Kita dapat menggunakan Fetch sebagai generasi berikutnya dari teknologi AJAX, yang menggunakan metode janji populer saat ini.
Menggunakan fetch, kami dapat menulis Ajax untuk berinteraksi dengan data seperti ini:
// Dapatkan metode data fetchfn = () => {fetch ('../../ data.json') .then ((res) => {console.log (res.status); return res.json ()}) .then ((data) => {this.setState ({lists: data.listData {data) => {this.setState ({{{{{{{{{{{{{{{{{{{{{{{{{{listdata))))) console.log (e.message)})}Meringkaskan
Hal terpenting tentang mempelajari kerangka kerja adalah tidak mempelajari teknologinya, tetapi mempelajari ide-ide pemecahan masalah yang dibawanya. Melalui mempelajari kerangka kerja React, Anda dapat menemukan pola pikir baru dari fitur -fitur baru yang unik. Hanya ketika tingkat berpikir diperluas, Anda dapat terbang dengan bebas di lautan di ujung depan. Saya harap artikel ini akan membantu semua orang untuk belajar bereaksi.