Hands-On Full-Stack Web Development with GraphQL and React

The React file structure

We have already saved our Loading and Error components in the components folder. Still, there are many parts of our components that we did not save in separate files, to improve the readability of this book.

I will explain the most important solution for unreadable React code in one example. You can implement this on your own later, for all other parts of our application, as you should not read duplicate code.

Currently, we render the posts in our feed by mapping through all posts from the GraphQL response. There, we directly render the corresponding markup for all post items. Therefore, it is one big render function that does everything at once.

To make this a bit more intuitive, we should create a new Post component. ...