My Final React/Redux Project

How time flies, I cannot believe that I am here today doing my last bits of my final project for Flatiron School. The highlight of the project requirement is to have one HTML page to render the application, 5 stateless components, 3 routes, to make use of react-router and redux-thunk.

For the final project of my Flatiron School Software Engineering Program, I had to build a simple app called BookNet where readers can browse, search and add books to the book list and leave comments for recommendation to other readers.

For the back end I used Rails as an API and for the front end I have used React and Redux and implement thunk middleware to handle asynchronous fetch and dispatch get and post requests from an API.

Let’s explore the flow of my application.

Here is what my API looks like: — It has `has many and belongs to relationship`.

I have created my app using npx create-react-app followed by my app name which generates the required files and folders to start the React application and run it on the browser and that gives me the access to the index.html page and index.js that renders our react-redux application.

When the application starts the index.html page is the first page that loads. This will be the only html file in the entire application, as you can see on below snippet this file has a line of code `<div id=”root”></div>`, This line is very significant since all the application components are loaded into this div.

Then we have our index.js, It is a Javascript file corresponding to our index.html. This file has the the `ReactDOM.render(<App />, document.getElementById(‘root’))` which will be telling that App Component has to be loaded into our html element with the id root.

One of the requirements is to create 5 stateless components, what do we mean by stateless components vs stateful components?

The literal meaning is that one has a state and the other doesn’t. that means the stateful components are keeping track of changing data, while stateless components they simply accept data and display them in some form that is they are mainly responsible for rendering UI, here is an example of stateless function from my project snippet.

React Router is a standard library for routing in React. It enables the navigation through our components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

In order to use React router first we need to install `react-router-dom` by running npm install react-router-dom and the next step is to import {BrowserRouter as Router, Router} from ‘react-router-dom’ and you can see below code snippet that in my index.js, I wrapped up the App component in Router then I imported { Route, Routes } from ‘react-router’ in my App,js component where I use route to create my routes.

I have also implemented redux-thunk for my project, thunk is a tiny library, it is a middleware that will allow us to interact with our API in Redux and it allows us to pass dispatch as a call back rather than passing an action object and in order to have an access of thunk we need to run redux-thunk.

All what I have done is create the store, import thunk and applymiddleware that comes from redux library and pass it to our function.

I hope you enjoyed reading my blog.

Happy codding and stay safe!