score:11

Accepted answer

I think your best option is to indeed make some kind of network request from the client. If you aim to keep the app simple and do not want a State Management library (e.g. Redux), you could do something like

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    fetch('/') // or whatever URL you want
      .then((response) => response.json())
      .then((posts) => this.setState({
        posts: posts,
      });
  }

  render() {
    return (
      <div>
        <Posts posts={this.state.posts} />
      </div>
    );
  }
}

In your response there should be a JSON representation of the posts collection.

Also note the render method and accessing the posts.

For more on Fetch API see MDN (please also note that you will need a polyfill for older browsers for it).

EDIT: For socket.io I'd store the instance of it somewhere and pass it as a prop to the component. Then you can do something like

class IndexPage extends React.Component {
  ...
  componentDidMount() {
    this.props.socket.on('postReceived', this.handleNewPost);
  }
  handleNewPost = (post) => {
    this.setState({
      posts: [
        ...this.state.posts,
        post,
      ],
    });
  }
  ...
}

The server-side part is similar, see for example Socket.io Chat example.


Related Query

More Query from same tag