Firstly, I'm new to React so please go easy on me, I have looked for duplicate questions.

I understand React is ponent based and how to initialize a ponent but where does code go that runs when the app bootstraps?

For example, I am trying to make a small app which uses PusherJS for websocket based munication. When the app loads I need to connect to a pusher channel via an ajax call and store some data. When Pusher sends events I need to municate to ponents lower down (like a MessageList ponent) that a new message has been received and what the new data is.

For those of you familiar with AngularJS I would have done this in .config() blocks and stored data in a service or in $rootScope but what is "The React Way"?

Firstly, I'm new to React so please go easy on me, I have looked for duplicate questions.

I understand React is ponent based and how to initialize a ponent but where does code go that runs when the app bootstraps?

For example, I am trying to make a small app which uses PusherJS for websocket based munication. When the app loads I need to connect to a pusher channel via an ajax call and store some data. When Pusher sends events I need to municate to ponents lower down (like a MessageList ponent) that a new message has been received and what the new data is.

For those of you familiar with AngularJS I would have done this in .config() blocks and stored data in a service or in $rootScope but what is "The React Way"?

• javascript
• reactjs

2 Answers 2

A good place to start is wherever you call ReactDOM.render() to render your React tree.

Here's pseudo-code for how you might tackle your use case:

function render(data) {
  ReactDOM.render(rootElement, <MyApp data={data} />);
}

// connect to socket, then listen for data and re-render whenever data is received
connectSocket()
  .then(socket => {
     render({ status: "connected", data: null });
     socket.on("event", ev => {
       // new data!!
       render({ status: "connected", data: ev.data });
     });
   }, err => render({status "error", data: { error: err } }));

// do an initial render with "connecting" status
render({status: "connecting", data: null });

This is a bit of a "toy" example. For more plicated flows, you'd probably have your socket connection dispatching events to a redux store (or mobX or whatever state solution you are using).

You might also kick off the socket connecting logic in the ponentDidMount method of your root React ponent.

For a very simple application it is possible to utilize ponent state

import React, { Component } from 'react'

class App extends Component {
    state = { receivedEvent: null };

    render() {
        return (
            <div>
                (this.state.receivedEvent ? (
                    <div><Event event={this.state.receivedEvent}/></div>
                ) : (
                    <div>display some connecting activity here...</div>
                ))
            </div>
        )
    }
    ponentDidMount() {
        connectToSocket().then(receivedEvent => this.setState({receivedEvent}))
    }
}

export default App

So, App ponent can pass event to it's child ponents as a property. But, it is not a "React" way and it is not remended to go this way. The "React" way is to use a state container(like Redux). In this way ponentDidMount shall call reducer and data from state shall be passed to App ponent with properties.