Coding In Components — My story about trying to learn React & Redux

Image source:

What even is React?

React is a very powerful JavaScript library that can do a lot of amazing things. A lot of websites and apps are using it these days, especially Facebook — after all, they are the ones who made it. Similar to Angular, React allows you to smoothly make changes to the DOM without having to refresh the entire page. It lets you to create an interactive UI and manage it seamlessly by updating only the components that to be updated as their data changes. It also makes your “code more predictable and easier to debug.”

Nitty Gritty

JavaScript on its own is already fairly great and powerful, but there are so many things that it can’t do on its own (at least without writing a lot more code than most developers would like to deal with), therefore requiring libraries, plug-ins, and the like. Thankfully, React is a library that is very easy to install. However, it is written in a slightly different flavour called JSX — JavaScript XML. As the name suggests, it adds XML syntax to JavaScript in order to write React. It can be easily “translated” to plain JavaScript using Babel.

It definitely takes a while to get used to it. I mean, on the one hand, JavaScript and XML on their own are fairly straight-forward, especially once you work with them for a while. However, when you put them together, and use React’s structure and syntax, it starts to get a bit complex. It definitely has a very different mindset than that of vanilla JavaScript or even JQuery.

As mentioned before, React makes use of components. Basically, everything is a component — input field, button, header, image, etc. That makes it great for each component updating its state individually, thus allowing React to render only the components that need to be updated as they change. That means you don’t need to refresh the entire page or document, and your website will smoothly rerender things on an as-needed basis.

It does get more complicated the more components you have in your project, which means you eventually want a way to manage all of them. This is where Redux comes in. Redux allows you to make a JavaScript object called Store, which manages and stores the states of all objects found in the project. That allows you to manage them more easily by changing the main state, which will automatically change only what needs to be changed, instead of you manually updating every component’s state yourself. Oh, and did I mention it also solves the problem of updating parent components’ states?

The more you look at React and Redux, the more you realize why it’s becoming more and more popular, and why it’s used so heavily in apps like Reddit and Twitter. With that much data, you want to be able to update and manage it all as seamlessly and easily as possible.

Final Thoughts

Although it can be somewhat daunting leaping into React and, eventually, Redux, it’s a very important skill to have. React is starting to be used in many places and serves as, arguably, a competitor to Angular. It can be very powerful and efficient, and allows you to speed your development up, especially for newcomers. Although it seems complicated at first, you eventually get the hang of it. You just have to change your mindset, which in my opinion, is the most difficult part.