How I “Reacted” to React

I will be honest(makes me cringe every time someone says that because all I can think about is whether he/she was dishonest the whole time before that), I am no front-end wizard and making things look nice is definitely not easy and not for everyone. That however does not mean I cannot take a shot at learning some awesome front-end frameworks created by some very smart people out there.

So I started my journey as dear old Frodo Baggins did, not to destroy the one ring that rules them all, but to find one Framework that I could potential understand, use and appreciate.

Frodo Baggins from the Lord of the Rings

Sadly I did not find my own Samwise Gamgee to go on this journey though however I did get help from a Gandalf in React that I found thanks to Udemy. His name is Maximilian Schwarzmüller, and I dub thee Maximilian The Great! His course on Udemy was for this date, the most comprehensive one I have come across. Took me ages to complete it and what a journey it was.

Coming from mainly a life in the backend, front-end and JavaScript always did elude me. The JS framework hell did not help make my case as well. One time I looked, it was jQuery at the helm and then wham in an instance it has gone into oblivion. Learning new things that challenge me was always a passion and hence my journey began with React. Why React? Well this picture did not paint a good picture for me to go with Angular ;)

Jokes apart, it was more of a logical decision to learn React first, mostly due to the fact that most of the work I was involved in on the backend had a React frontend so it complemented my work.

I am not going to go into details of what React is and what amazing features it encompasses as I would probably plagiarise most of the content out there. What I would like to go through on this post is a very small project I started to get myself acquainted with my new found React skills. My workplace is heavy advocates of GTD which stands for Get Things Done. You should Google it, was such a life saver in my day to day task prioritisation. Next time you forget what your wife asked or hinted as a gift for her birthday, you would be thankful you used GTD.

Getting back on track, this is a sample application with limited functionality for now to mimic a to do list using React. Spoiler alert…… the UI looks terrible apart from the batman logo I borrowed because Batman is always awesome and I do apologise for that. This does however focus on doing some cools tuff using React/Redux and I had so much fun doing this. Let us get into it. The GitHub link to this project can be found here for anyone interested(There are some commented code that I have left just to give a glimpse of what life would be if we did not use Redux).

As Maximilian the great advised, it is always good to do a small wireframe of what you are building and then build up a component design so you can better layout your React components before you get into the details. My brilliant design is as follows;

I used draw.io for this beautiful masterpiece

Next up, this is how I wanted to create my components to build up my application;

The only thing I wanted to highlight here is the task action component which I wanted to generalise so that I could use it across my task addition and then removal on the task list as well. As we think in terms of components in React, this was very intuitive and and the transition to code was almost seamless.

My package structure is as follows;

The container for my application is just one JavaScript file. The containers maintain state whereas the components are functional components that corresponds to different components highlighted earlier in the design(yes things have changed since React Hooks came about, but let usrun with this for now). The store is for all our Redux code used. I admit that Redux is overkill for this and I have left some code on what it looks like if we did not use Redux.

The entry point to this application is the Gtd.js where we will bind the Redux state to props after which we initialise the Task and TaskList components.

The Task.js contains the code for the input on adding tasks. Now although I could have kept the add button action within this components, I wanted to follow a more general approach and move it into its own component so that we can re-use the functionality in different parts of our application if need be(Or I just wanted to be fancy and showcase my new found skills with React.. who knows).

The TaskList.js also has a subcomponent for each row on the list called TaskListItem.js . I thought it made more sense to break it down to get more control on each row rather than leaving it on the TaskList itself.

Probably does not make sense for me to go into the code on each file. I did however want to go through how Redux was linked to the code as that was the place where I spent most of the time as it was a bit complicated for a React/Redux beginner like myself.

The store directory has two folders. One which holds the reducers and the other for the action creators. Everything is then hooked up on the index.js where the store is initialised as follows;

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(TaskReducer,composeEnhancers(applyMiddleware(thunk)));

ReactDOM.render(<Provider store={store}><Gtd /></Provider>, document.getElementById('root'));

The following code;

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

is used to activate the Redux dev tools chrome plugin I installed which can be found here. It just makes life so much better as you can see how the store is manipulated by your application. A glimpse of it as follows;

Love the black theme on it as well ;)

I have used Redux Thunk with this as well although I do not really need it right now. Redux Thunk is a middleware that allows you to do things like asynchronous calls for example to a server using Ajax prior to updating the state on the reducers. I used it because I plan to hook this into a backend at a later point in time. An example of how my actors would look like post hook up would be as follows;

export const myActor = () => {
    return dispatch => {
    axios.get('/details').then((response)=>{
     dispatch(details(response))
    });
};

You can do your asynchronous tasks and then call dispatch to continue updating the state via the reducers.

That is about it. Before we wind up, I wanted to list the components used within this project;

• redux
• react-redux
• redux-thunk
• prop-types
• css-modules

As mentioned above the GitHub project can be found here.

Thanks for reading folks and if you do find improvements I can make do kindly share your views here or better yet as an issue on GitHub :)

In the coming few days we will go more in detail on certain aspects of this project and dive deeper into why certain things were done that way.

Happy Friday all!