A Scoop of React and a Sprinkle of Redux

Leaving Vanilla JavaScript for a better flavor. An intro to React/Redux

REACT: What is it?

React is one of the most popular JavaScript libraries available. React is an open-source library that is used for building user interfaces. Mostly for single-page applications. It’s used for handling what the user sees on their end, for both mobile and desktop application. React was created by Jordan Walke, a former software engineer for Facebook.

React allows developers to create large applications that can dynamically change data without reloading the page! React is know to be very fast and simple to use. It is also scalable. It can be used with a combination of other JavaScript libraries and frameworks. One of the reasons for its massive popularity.

Getting the most from React

React is well known to most developers as being very simple and quite fun to use. React allows the developer to create separate components to write in that will all come together to create the full application. Because React uses components, readability of code is massively improved. This allows the developer to keep up with where most things are and how they are working together.

React has its own state management, which helps to deepen the functionality of your app to allow certain states to be triggered throughout, causing the one page app to change dynamically and seamlessly. Some of the best apps known today have been created using react: Facebook, Walmart, Bloomberg, Instagram, Wix, SoundCloud, etc…

React Data Flows and the DOM

In React, a set of immutable values are passed to the components renderer as properties in its HTML tags with the help of JSX. The component cannot modify any properties but can pass a call back function that help with better functionality and allow that component to render changes.

DOM stands for “Document Object Model” and is one of the most important parts to understand within React. React creates an in-memory data structure cache which figures out any changes made and updates the browser before your eyes. This allows the Virtual DOM to allow the programmer to code like the whole page is rendered on each change. React library only renders components that change.

What the Heck is Redux?

Redux, like React, is an open-source JavaScript library that specializes in state management. So if react already uses state, why go with Redux? Redux is simply easier…If you understand.

Redux can be very tricky to learn and really grasp at first. Redux makes it much easier than normal to help change the state of your application with the use of a reducer. A reducer is made to store all of the states that your app may contain, for instance, a user or a comment or maybe a username input for a login field? The options are endless.

Redux is NOT for everyone, sure it can help with a large scale application that needs to manage many many states. But, small scale projects are mostly better off with React built in state management.

It is very normal to be confused over Redux. There is so much lingo out there with Redux that it is hard to take it all in.

While were talking about state, lets talk about Hooks.

React Hooks

When I first started using hooks, I was utterly confused. But I was determined. The longer I spent on a project and MADE myself use hooks, the clearer it became. Hooks make your development SO MUCH EASIER!

What are they? React Hooks are functions that let us get into the React state and lifecycle features. By this, I mean that hooks allow you to easily and conveniently manipulate the state of your component as a functional component without having to use class components. Hence, better and easier. I truly recommend researching Hooks for your next project!

I hope you enjoyed this brief intro into the basics of React/Redux and React Hooks. Each of these topics hold very well maintained docs to look up through your coding journey. I highly recommend checking them out. On top of that, YouTube is an amazing resource for ReactJs follow alongs and tutorials. The real joy is discovering for yourself just how fun and useful React is! Also be sure to checkout React Native, which is React mobile development language.

Until Next time, Good luck and Happy Coding!