My Reads React App

 

This is one of my first react apps. The concept is pretty simple and is also explained in the video above. Basically you have three book shelves that have different books in them. You can move the books from shelf to shelf with a drop down. You can also go to a search page and search for all of the books in the DB based on the key phrase you enter into the search bar and all of the states from this page and the main page are preserved.

In this project I basically learned about Components, State, the basics of managing state and React Router.

Components

The project involved creating 4 components (and the base component). Book, BookCase, Search and Shelf.

The Book component is responsible for the display of the book and is where some of the functionality of changing the books state is stored. When changing the books state we pass the book up the components until we reach the base of the app where moveBookShelf method handles the actual changing of the state, once setState is completed the app automatically refreshes the elements it needs to change of course.

The BookCase Component simply is a place to store the three different Shelf components, it does have a method to handle book shelf state changes (to hand it up to the base component) but this shouldn’t be necessary soon once I get a hang of Redux.

The Search Component essentially takes care of all of the search functionality. It has a method to search the DB for books that match the search parameters in the search bar on search bar change. It also has a couple of methods to for when the state of the book changes on the search page. For this project the call that does search does not include the shelf state from the DB so I actually had to carry all of this info from the base component into this component and do some filtering to make sure the state was the same both on the search page and the base page.

The Shelf Component is much like the BookCase Component except it takes in all of the books assigned to that book shelf and maps them into the Book component. Again there is a state change handler method which is essentially just used to pass the state up to the base component when state is changed on individual books.

React Router

React Router was super easy, essentially just wrapping the <BrowserRouter> around the base component then wrapping the different pages with the Route Component. Even easier still was the Link component which is used by essentially replacing where you would normally put the anchor tags with the Link component and assigning the path property to the Link component.

The Code

If you would like to take a look at the actual code you can check it out at my github here: https://github.com/djarrin/MyReads