przejście z gałązki do ReactJS: jak przedłużyć szablon/komponent do zbudowania pełnych stron reactJS? implementować router reagujący i redux w symfony?

Question

W mojej aplikacji gałązkowej mam kontroler renderujący widok.

Ten pogląd jest następujący:

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

{% block title_wrapper %} 
{% endblock %} 

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

W backend.html.twig, mam:

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

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

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

{% block body %} 
{% endblock %} 

Teraz, ta strona jest bardzo dynamiczna z wielu różnych technologii AJAX wywołuje aktualizację inną część dane. ReactJS wydaje się być dobrym sposobem na uproszczenie.

Rozumiem, jak umieścić jeden składnik w innym i nad nim pracować. Jednak w zależności od zawartości mojego paska nawigacyjnego i paska bocznego w zależności od zawartości mojej strony, jak mogę to zrobić?

Moje problemy to:

1. Gdybym czynią mój składnik ciała i jest oddzielona od moich bocznym pasku nawigacyjnym i komponentów (zachować istniejące struktury gałązka i obciążenia 3 komponenty), zmiana w jednym nie będzie zaktualizować inny jeden
2. Jeśli ładuję jeden komponent aplikacji, który obejmuje pasek nawigacyjny, elementy paska bocznego i części ciała, w jaki sposób utworzyć odmiany ciała, tj. w jaki sposób mogę replikować funkcję "rozszerzania" gałązki?
3. Muszę się poruszać krok po kroku, więc muszę nadal renderować części mojej aplikacji z gałązką
4. Wygląda na to, że potrzebowałbym poprawnie zaimplementować reux i routera reakcji w mojej aplikacji symfony, stworzyć pojedynczą aplikację i komponent aplikacji zawierający nawigację. Byłbym wdzięczny za pomoc!

Chciałbym trochę pomocy eksperta reactSS! Dzięki!

Answer 1

Proponuję zacząć od małej, aby dowiedzieć się, jak działa ReactJS. Możesz łatwo korzystać z ReactJS tylko dla ograniczonej części swojej aplikacji.

Załóżmy, że chcesz zmienić komponent aplikacji, który znajduje się wewnątrz elementu div o identyfikatorze "myComponent". Można umieścić skrypt na swojej stronie, że czyni to na składnik ReactJS (składni ES6):

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

W tym kodzie <MyComponent /> oznacza głównym Reaguj komponent w pliku mycomponent.js w tym samym folderze. Dla jednego małego komponentu nie będziesz potrzebował sklepów Redux; po prostu zapisz wszystkie stany w komponencie this.state. Podczas dodawania kolejnych składników, które ponownie używają tego samego stanu, Redux to bardzo dobry sposób na zrobienie tego.

Pamiętaj, że będziesz potrzebować dodatkowej konfiguracji, aby uzyskać prosty przykład działania. <MyComponent /> to JSX, a nie zwykły Javascript. Potrzebujesz transplatora takiego jak Babel, aby przekształcić go w zwykły js (i jako bonus, obsługuje on również zapisy ES6). Nie zapomnij także o React i React-Dom!

Answer 2

Spójrz na tę fiddle, z react-router możesz oddzielić każdą stronę i tworzyć komponenty, układy i widoki.

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

Utwórz dwa widoki, home i list, mogą one wyglądać tak:

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

Wewnątrz każdego widoku extends z układem i przekazać właściwości jak co komponent musimy być sidebar a 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> 
    ); 
    } 
} 

W układzie użyj właściwości, aby wyświetlić zawartość w taki sposób, jak w przypadku gałązki.

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

Może to trochę mylące, ale trzeba spojrzeć na skrzypcach, to im bliżej mogę zrobić w oparciu o przykład.