passaggio da ramoscello a ReactJS: come estendere un modello/componente per creare pagine reactJS complete? implementare react-router e redux in symfony?

Question

Nella mia applicazione ramoscello, ho un controller che mostra una vista.

Questo punto di vista è la seguente:

{% extends ':Template/Backend:backend.html.twig' %} 

{% block title_wrapper %} 
{% endblock %} 

{% block body %} 
My code 
{% endblock %} 

In backend.html.twig, ho:

{% extends ':Template/base.html.twig' %} 

{% block navbar %} 
    {% render controller ... %} 
{% endblock %} 

{% block sidebar%} 
    {% render controller ... %} 
{% endblock %} 

{% block body %} 
{% endblock %} 

Ora, questa pagina è super dinamica con molti ajax diverse chiamate aggiornamento parte diversa i dati. ReactJS sembra essere il modo migliore per renderlo più semplice.

Capisco come inserire un componente in un altro e accumularlo. Tuttavia, con il contenuto della mia barra di navigazione e della mia barra laterale a seconda del contenuto della mia pagina, come faccio a farlo funzionare?

I miei problemi sono:

1. Se io rendo il mio componente del corpo ed è separato dai miei navbar e sidebar componenti (mantenere la struttura ramoscello e del carico 3 componenti esistenti), un cambiamento in uno non aggiornerà il altro
2. Se carico un singolo componente di app che include la barra di navigazione, la barra laterale e i componenti del corpo, come faccio a eseguire variazioni del corpo, ovvero come faccio a replicare la funzione "estende" del ramoscello?
3. Ho bisogno di muoversi passo dopo passo quindi ho bisogno di mantenere il rendering parti del mio applicazione con il ramoscello
4. Sembra che avrei bisogno di attuare correttamente Reux e reagire-router nella mia applicazione symfony, creare una pagina singola applicazione e un componente dell'app che include i navbar. Gradirei un po 'd'aiuto per quello!

Mi piacerebbe un po 'di aiuto da un esperto di reactJS! Grazie!

Answer 1

Ti suggerisco di iniziare in piccolo per capire come funziona ReactJS. Puoi utilizzare facilmente ReactJS solo per una parte limitata della tua app.

Diciamo che si desidera modificare un componente della propria app all'interno di un div con id "myComponent". È possibile inserire uno script nella pagina che rende questo in un componente ReactJS (sintassi ES6):

import MyComponent from './mycomponent'; 
ReactDOM.render(<MyComponent />, document.getElementById('myComponent')); 

In questo codice, <MyComponent /> significare l'principale Reagire componente nel file mycomponent.js nella stessa cartella. Per un piccolo componente, non avrai bisogno di negozi Redux; è sufficiente memorizzare tutti gli stati nel componente this.state. Quando si aggiungono più componenti che riutilizzano lo stesso stato, Redux è un modo molto carino per farlo.

Nota che avrai bisogno di alcune impostazioni extra per far funzionare il semplice esempio. <MyComponent /> è JSX, non semplice Javascript. Hai bisogno di un traspiatore come Babel per convertire questo in js semplice (e come bonus, supporta anche le notazioni ES6). Inoltre, non dimenticare di includere React e React-Dom!

Answer 2

Dai un'occhiata a questo fiddle, con react-router puoi separare ogni pagina e creare componenti, layout e viste.

ReactDOM.render(
    <Router> 
    <Route path="/" component={AppContainer}> 
     <IndexRoute component={HomeView} /> 
     <Route path="list" component={ListView} /> 
    </Route> 
    </Router>, 
    document.getElementById('root') 
); 

Creare due punti di vista, home e list, possono apparire come segue:

class HomeView extends Component { 
    render() { 
    return (
     <MainLayout 
     sidebarTitle="Links" 
     sidebar={<SidebarList />}> 
     Hello world! This is the HomeView! 
     </MainLayout> 
    ); 
    } 
} 

All'interno di ogni vista extends da un layout e passare le proprietà come quello dei componenti di cui abbiamo bisogno per essere un sidebar e un children.

class ListView extends Component { 
    render() { 
    return (
     <MainLayout 
     sidebarTitle="Text" 
     sidebar={<SidebarText />}> 
     <h1>List</h1> 
     <ul> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
     </ul> 
     </MainLayout> 
    ); 
    } 
} 

Nel layout utilizzare le proprietà per visualizzare il contenuto come si fa con il ramoscello.

class MainLayout extends Component { 
    render() { 
    return (
     <div> 
     <Navbar 
      title="APP" 
     /> 
     <div> 
      <div> 
      {this.props.children} 
      </div> 
      <div> 
      {this.props.sidebar} 
     </div> 
     </div> 
    ); 
    } 
} 

forse è un po 'di confusione, ma è necessario dare un'occhiata al il violino, è il più vicino che posso fare, sulla base di esempio.