Join Alex Banks for an in-depth discussion in this video Understanding application state, part of Building a Polling App with Socket IO and React.js.
- One of the benefits of React is that it handles state very elegantly. React makes it a bit easier for us to build large applications that deal with a lot of changing data. Combining React components with web sockets provides a graceful way to share real time data between the server and many clients. Lets think about what data types our application needs to manage. Our app is going to be used by speakers when they're giving a presentation. So everyone will want to know who the speaker is and what the presentation is called. We will need an object to store speaker information as well as a variable to hold the presentation title.
It will be our job to make sure this data stays in sync with each client and every user is viewing the most accurate and up to date data. Every client connection will have the same root component; the app. Information about the speaker, the presentation title and the audience members and all the questions and answers will be stored in the state of the app component. When a new client connects we will welcome them to the presentation by sending them current state data from the server. Every time a new member joins the presentation the state of the audience will change.
We will then broadcast that change to all connected clients. Each client app component will update its state based upon the change and pass those state values down to child components as properties. When a speaker asks a question that question will be broadcast to each of the clients. When each of the clients answer the question we will also broadcast their answers as well. Our job is to keep the state variables in sync between the client and the server. Using Socket IO with React makes our job a bit easier.
- Setting up the environment
- Connecting sockets
- Handling disconnects
- Setting up the React.js router
- Passing state to child components as properties
- Joining the presentation
- Starting and running the presentation
- Asking and answering questions
- Graphing results
- Upgrading to ES6