Membina Aplikasi Blog React Universal: Melaksanakan Fluks

Tutorial ini menunjukkan membina aplikasi blog sejagat yang berskala menggunakan seni bina fluks. Bahagian dua memberi tumpuan kepada pengurusan kandungan dan skala aplikasi.

Konsep Utama:

• Corak fluks untuk Pengurusan Data: Memusatkan pengurusan negeri dalam satu "kedai," memastikan konsistensi data.
• Struktur laluan modular: Breaking Down ke dalam komponen yang lebih kecil, lebih mudah diurus untuk organisasi yang lebih baik. routes.js
• komponen pintar vs bodoh: komponen peringkat tinggi (pintar) mengendalikan manipulasi data, manakala komponen peringkat rendah (bodoh) menjadikan UI berdasarkan prop yang diterima, mempromosikan aliran data unidirectional.
AppDispatcher sebagai pengendali tindakan:
• Hab pusat untuk mengedarkan kemas kini data dari tindakan ke kedai.
Integrasi CMS CMS CMS:
• Menguruskan dan mengambil data aplikasi secara dinamik, meningkatkan skalabilitas dan kebolehkerjaan.
Rendering Server-Side (SSR):
• Meningkatkan SEO dan prestasi dengan memberikan aplikasi React pada kedua-dua pelayan dan klien.

Refactoring

: routes.js Untuk meningkatkan organisasi, fail refactored untuk memisahkan laluan halaman ke dalam komponen individu. Kod yang dikemas kini termasuk

untuk pengurusan data.

routes.js AppStore

Kedai: Sumber Kebenaran Tunggal

<code class="language-javascript">// routes.js
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import AppStore from './stores/AppStore'
import App from './components/App'
import Blog from './components/Pages/Blog'
import Default from './components/Pages/Default'
import Work from './components/Pages/Work'
import NoMatch from './components/Pages/NoMatch'

export default (
  <route path="/" data="{AppStore.data}" component="{App}">
    <indexroute component="{Blog}/">
    <route path="about" component="{Default}/">
    <route path="contact" component="{Default}/">
    <route path="work" component="{Work}/">
    <route path="/work/:slug" component="{Work}/">
    <route path="/blog/:slug" component="{Blog}/">
    <route path="*" component="{NoMatch}/">
  </route>
)</route></route></route></route></route></indexroute></route></code>

Flux bertindak sebagai sumber kebenaran tunggal untuk data permohonan. Prinsip -prinsip utama termasuk:

Store tidak ada manipulasi dom langsung.

ui adalah didorong data; Data tinggal di kedai.
perubahan ui berasal dari kemas kini data kedai.
Data mengalir secara unidirectional dari peringkat tinggi ke komponen peringkat rendah melalui prop.
4. fail
melaksanakannya:

AppStore.js

Komponen React: Pintar dan Dumb

<code class="language-javascript">// AppStore.js
import { EventEmitter } from 'events'
import _ from 'lodash'

export default _.extend({}, EventEmitter.prototype, {
  data: {
    ready: false,
    globals: {},
    pages: [],
    item_num: 5
  },
  emitChange: function(){ this.emit('change') },
  addChangeListener: function(callback){ this.on('change', callback) },
  removeChangeListener: function(callback) { this.removeListener('change', callback) }
})</code>

Tindakan yang mengubah data terhad kepada komponen peringkat tinggi (pintar), manakala komponen peringkat rendah (bodoh) menjadikan UI berdasarkan prop. Komponen menunjukkan ini:

App.js Komponen

dan

<code class="language-javascript">// App.js
import React, { Component } from 'react'
import AppDispatcher from '../dispatcher/AppDispatcher'
import AppStore from '../stores/AppStore'
import Nav from './Partials/Nav'
import Footer from './Partials/Footer'
import Loading from './Partials/Loading'

export default class App extends Component {
  componentDidMount(){ AppStore.addChangeListener(this._onChange.bind(this)) }
  componentWillUnmount(){ AppStore.removeChangeListener(this._onChange.bind(this)) }
  _onChange(){ this.setState(AppStore) }
  getStore(){
    AppDispatcher.dispatch({ action: 'get-app-store' })
  }
  render(){
    const data = AppStore.data
    if(!data.ready){
      document.body.className = ''
      this.getStore()
      let style = { marginTop: 120 }
      return (<div classname="container text-center" style="{style}"><loading></loading></div>)
    }
    const Routes = React.cloneElement(this.props.children, { data: data })
    return (
      <div>
        <nav data="{data}/">
        {Routes}
        <footer data="{data}/">
      </footer></nav>
</div>
    )
  }
}</code>

menggambarkan bagaimana data mengalir dari tahap yang lebih tinggi ke komponen peringkat rendah:

Blog.js BlogList.js (nota: Kod lengkap untuk komponen lain seperti

,

<code class="language-javascript">//Blog.js (excerpt)
getPageData(){
    AppDispatcher.dispatch({
      action: 'get-page-data',
      page_slug: 'blog',
      post_slug: this.props.params.slug
    })
  }
//BlogList.js (excerpt)
  render(){
    let data = this.props.data
    let articles = data.articles
    // ...rest of the component
    articles = _.take(articles, item_num)
    let articles_html = articles.map(( article ) => {
      // ...map through articles
    })
    return (
      <div>
        <div>{ articles_html }</div>
        { load_more }
      </div>
    )
  }</code>

,

, dan AppDispatcher.js ditinggalkan untuk keringkasan tetapi boleh didapati dalam repositori GitHub yang dirujuk.) actions.js config.js app-server.js konfigurasi JS COSMIC dan penyampai sisi pelayan

Fail config.js digunakan untuk menyambung ke CMS CMS CMS. Fail app-server.js mengendalikan rendering sisi pelayan menggunakan ReactDOMServer.renderToStaticMarkup. Skrip package.json dikonfigurasi untuk pembangunan dan pengeluaran pengeluaran.

Kesimpulan

Tutorial ini menyediakan asas untuk membina aplikasi Blog Universal React yang mantap dan berskala. Penggunaan seni bina fluks dan penyiaran sisi pelayan meningkatkan prestasi, SEO, dan pemeliharaan. Kod lengkap boleh didapati di GitHub. Seksyen Soalan Lazim menangani soalan umum mengenai aplikasi fluks, reaksi, dan sejagat.

Atas ialah kandungan terperinci Membina Aplikasi Blog React Universal: Melaksanakan Fluks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!