This chapter covers
- Reviewing a blockchain web client written with React.js
- How the React.js web client communicates with the WebSocket server
- Running a React app that works with two servers in dev mode
- Splitting the UI of a blockchain client into components, and arranging their communications
In the previous chapter, you learned the basics of React, and now we’ll review a new version of the blockchain app with the client portion written in React. The source code of the web client is located in the blockchain/client directory, and the messaging server is located in the blockchain/server directory.
The code of the server remains the same as in chapters 10 and 12, and the functionality of this version of the blockchain app is the same as well, but the UI portion of the app was completely rewritten in React.
In this chapter, we won’t be reviewing the blockchain functionality, because it was covered in the previous chapters, but we will review the code that’s specific to the React.js library. You may want to look back at chapter 10 to refresh your memory about the functionality of the blockchain client and messaging server.
First, we’ll start the blockchain messaging server and the React client. Then, we’ll introduce the code of the UI components, highlighting the difference between smart and presentation components. You’ll also see multiple code samples that demonstrate intercomponent communications via props.