Search code examples
javascriptreactjsreduxflux

Need help structuring React app

I am designing/creating an application in React, but I need some help structuring the whole thing.

The app I want to create is built as follows: enter image description here

Now, I have a couple questions about how to structure this, and what react plugins or frameworks come in handy:

  1. Should the "filter" bar be part of the main layout ("master page")?
  2. I assume react-router is a good choice for routing in react?
  3. When working with data (both displaying and manipulating), is Flux a good thing to work with? Or has Flux nothing to do with data?

  4. I'd retrieve my data from an ASP.Net WebAPI. Is this something I'd typically do with "plain" XmlHttpRequest / jquery ajax? Or is there a more "React"-way?

  5. Extra: is there a specific reason to use Redux? I really don't understand the use of that :)

Thank you in advance for your help.

Solution

  • I guess you can have a layout like this:

    <App>
    <Navbar /> { /* Here you show the username also, this view will depend on props */ }
    <Layout /> { /* Here you may have the content and the sidenav */ }
</App>

    App is the top component, the main container that passes props for example in the render() you will have

    // You should treat this as a Page component, the one that grabs
// data and passes it as props to another components
export default class AppPage extends React.Component {
    render() {
        return (<AppLayout { ...this.props } />);
    }
}

export default class AppLayout extends React.Component {
    render() {
        return (
            <Navbar someProp={ this.props.someProp } />
            { this.props.children }
        );
    }
}

    Router can be for example: 

    <Router history={ browserHistory }>
  <Route path="/" component={ App }>
    <IndexRoute component={ Landing } />
    <Route path="/index" component={ Layout } />
  </Route>
</Router>

    The IndexRoute is '/' and you can say which components should be used on which route, for example if you route to /layout { this.props. children } on AppLayout will render as the <Layout /> component.

    I suggest you read this article: https://facebook.github.io/react/docs/thinking-in-react.html to better understand how react works... Hope it helped