I would like to implement a web application similar to messenger.com, also based on react framework. My problem is to manage the communication between List and Content components, as they're unrelated to each other. The render method of their parent component looks like this:
return ( "<" List "/>" "<"Content "/>" )
I want content component to refresh and load some data depending on selected list element, similar to messenger.com. Here's simple mockup
I've read a lot about redux, but I simply can't imaging how it should be implemented in this situation.
Here's also my whole react script running on the browser side: http://pastebin.com/ua928BEc
Sorry guys if it's a noob question I'm just starting with react :)
Many thanks for reading this,
Wojtek
Thinking in React is a great tutorial explaining state ownership in React and how components communicate. Once you get comfortable with it, you can try to implement this in vanilla React.
When you are comfortable in React but notice that some of your components get bloated because of all the state handling logic, you might want to check out a Flux implementation like Redux to offload the state handling to it. Getting Started with Redux is a set of free introductory videos to using Redux with React, and they are complemented well by the official basics tutorial.
But don’t rush into Flux or Redux until you understand React.