First experience with React & Redux creating a SPA

My first experience with React and Redux and what I thought about the framework.

After reading up on the basics about React I wanted to create a application to learn more and start creating something myself using React. The application I was going to create where going to be a mobile first view of tasks and time tracking from Springloops API. I would use React to fetch from the API and create a summary of tasks and time in a simplistic view. 


First impressions of React

After learning the basics about React and the difference between React and other frameworks like Vue and Angular I was a bit skeptic about how I would use it and why they want to mix JavaScript with HTML and CSS. But after learning about more structuring and functional stateless components I got less skeptic and saw a good meaning to why you should use React as a frontend framework.

First impressions of Redux

I had already started building my application when I started learning the basics of Redux and why you should use it and when. When I first started learning Redux it was a bit hard to grasp how you should structure your project and how Redux works. But after looking through some simple projects built with Redux I started to understand the structure and how your state is stored in a single object passed down to all components that updates only when needed through actions and reducers.


Creating my first Application

Using React for this project was perfect and together with Redux it would create a good and fluent single page application where you can easily look over your time tracking in Springloops.

I first started to layout the structure of my application and decided I will do routes with React router to “pages” or “views” then pass down state from the view to smaller components like dropdowns and lists. But later I used these views to map state to props on my Redux state and then pass it down to smaller components.

When i first started the application i didn’t plan to use Redux to fetch from the api and save to state but after a while when i had 2 - 3 fetch requests in each component the loading time for each component was unacceptable. So i then decided to use Redux to have a single object with my whole state and update only when it’s needed. Instead of using more complex built in React lifecycles to detect when or when not to update the state.

I used Redux to create a store with actions and reducers. In the actions I fetched from the API and passed it down to a reducer that created a state that is available across the whole website and if the content didn’t match it would go back and do the action again then pass it down to create a new state updating the website with new content.

Later I had make my app usable by others i had to make an authentication with the Springloops API luckily Springloops have a simple API authentication with basic authorization username:password in base64. So after you have logged in your username:password will be saved in a cookie as a base64 string that I later use to fetch from the API.


My opinion on React

After using React for a while and building a relatively big application managing lots of data from a big API I think that React is a good tool to use for frontend if you need that extra functionality or if your building a single page application. It’s good at managing big amount of data and it’s fast. But coming from a backend perspective I don’t like the JavaScript style of coding especially for this project since the API wasn’t the best structured API and I had to make my own sort functions and filters. But this won’t be a problem if you have control of your backend and API where you can do sorting and filters directly from the database instead.

But overall I like the idea of React as the view in a MVC and if you spend time planning your application and have a good structure it will be one of the better JavaScript frameworks out there right now especially together with Redux and React router.

Vad kan vi göra för dig?

Har du en bra idé eller ett problem som du behöver hjälp att lösa?
Ta gärna kontakt med oss för att se vad vi kan göra för er, och hur vi kan hjälpa er!

Contact us