How I made The Periodic Table with CSS Grid and React

I was looking into the periodic table and trying to memorize all the elements in order. One afternoon I thought, hey can I make the periodic table with my current CSS skills? The periodic table is a collection of elements arranged in an oddly structured way. It has already been built in the past, but the question is, can I do it myself without looking? Making the Layout The first task was to arrange all the elements in the peculiar order. The first idea that came into my mind was to make an HTML <table>, and put all the items inside …

Read More

React Redux Notes

Redux is not just for React, it’s a store system available for other frameworks like Angular, Jquery, Ember or vanilla JS. redux is the main package and react-redux is a supporting package for binding with react. Installation Store Create a store.js file to store all the state items in it. I did it on src/redux/store.js Import createStore which is a function from redux: Create a default state object to hold all of your state info: Create a reducer function which takes a state and an action object. Always return the default state from the reducer function. Destructure the type and …

Read More

Understanding React, My Talk at React Con Dhaka

So last week I had the chance to talk at my very first React and JavaScript event. In this talk I shared my journey of learning React + some of the inner workings of this JavaScript framework. If you would like to know more about this event, you can read my post on Medium (Opens in a new tab) I posted the live recording over at YouTube, you can check it out (The language is Bangla) For those who are reading my blog, I am going to share a few pointers which I discussed about Understanding React: My React Story …

Read More