moving from twig to ReactJS: how to extend a template/component to build full reactJS pages? implement react-router and redux into symfony?

Question

In my twig application, I have a controller rendering a view.

This view is as follows:

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

{% block title_wrapper %}
{% endblock %}

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

In backend.html.twig, I have :

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

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

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

{% block body %}
{% endblock %}

Now, this page is super dynamic with many different ajax calls updating different part of the data. ReactJS seems to be the good way to make it simpler.

I understand how to put one component inside another one and build up on that. However, with content of my navbar and my sidebar depending on the content of my page, how do I make it work ?

My issues are :

1. If I render my body component and it is separated from my navbar and sidebar components (keep existing twig structure and load 3 components), a change in one won't update the other one
2. If I load one single app component which includes navbar, sidebar and body components, how do I make variations of the body i.e. how do I replicate the 'extends' feature of twig?
3. I need to move step by step so I need to keep rendering parts of my application with twig
4. It looks like I would need to implement correctly reux and react-router in my symfony application, create a single page app and an app component which includes navbars. I'd appreciate some help ont that !

Would love some help from a reactJS expert! Thanks!

Answer 1

Take a look at this fiddle, with react-router you can separate each page and create components, layouts and views.

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

Create two views, home and list, they may look like this:

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

Inside each view extends from a layout and pass the properties like what component we need to be a sidebar and 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>
    );
  }
}

In the layout use that properties to display the content in as you do with twig.

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

Maybe it's a little bit confusing but you need to take a look at the fiddle, it's the closer I can do based on your example.