Introducing Redux into an application - Redux for dummies

First things first, why use Redux? I mean, there is Context.js of course, and there are

props that we can pass among components, right?

Well, not quite. Passing props in React is usually done vertically (from parent to

child and vice versa), but not horizontally.

photo credit: https://techblog.appnexus.com/five-tips-for-working-with-redux-in-large-applications-89452af4fdcb

On the other hand, using context can make it difficult to reuse components

(which is the golden feature of React, remember?).

When we have a large application, managing state can get tedious and complex.

That is where Redux jumps in. Redux allows the state to be stored in a single file,

from which all of the components can use it, no matter where they are in the component tree.

It does sound complex, but when you think about it, it actually makes things easier for us.

When we want to introduce Redux into our application, we should know

that there are three building blocks to it:

• State
• Action
• Reducers

So, imagine state as a highly guarded treasure trove. No one can access this

precious trove with golden jewelry and gems aside from the guards who never

sleep or eat. They are the only ones to have the key and they always have

their eyes on the trove, protecting everyone else to get hold of it. The guards

are in our case reducers. Only they can actually make the change in the state

(rearrange the jewelry and gems), and no one else. 

But our guards unfortunately do not have a sense of beauty/esthetics and

no idea how to organize the treasure.  The only one who knows how to organize

the treasure is the commander. He has precise instructions how and what to do,

but he has no time to do it himself. He conveys the detailed instruction to the guards

and they complete the task then.

The commander in out story is the action. The action contains information that is

sent to the reducer to change the state. Actions are essentially Javascript

objects that must the type property and optionally it contains payload (the

part of information that should be worked on by the action). Payload can

be any valid JS data type.

So let's get back to our treasure story. When the commander (action)

sends the instructions to the guards (reducers) he is sending usually

a piece of information that is twofold: first, what exactly should they do,

how should they organize the treasure, or what type of action they are

required to undertake (how should the reducers change the state), and

second thing: information which part of the jewelry should be rearranged

(because every piece has its own stamp and code on it). Sometimes

we don't have this information if the commander asks the guards to

organize the whole treasure trove. This is some type of a "coded message".

Now let's go back to the computing world. Action type (in our
coded message) is actually the instruction on

what we want to do, and the action payload is the information that

will help us go there. For example if the action type is "LOGIN",

payload is username: "user" and password : "738292".

So these user information will help us log in, that is, enable the action we want to

complete. The Javascript object will look like this:

const someAction = {

type: 'LOGIN',
payload: {
username: 'Adam',
password: 'Adam123'
}

Sending the requested action goes through dispatch() method. So we can

consider this dispatch method as a messenger between our commander and

guards (Action and Reducers).

Okay folks, that's it for this time. The next time I will talk about examples on how to use it in code more precisely.

What you should know about React Components

What you should know about React Components

As I already said, components are building blocks of  a React app. No way you can make some React application without components. It's like quenching your thirst with no liquid -  it just won't happen. So if you want to build an app in React, you have to get familiarized with components.

However, the good news is: they are not that difficult to grasp at all!

So, we can define a component as a JavaScript class or a JavaScript function. In other words, there are two types of components you can make: a class component and functional (stateless) component. 

Now, what is the difference between the two and when should we use each of them?

The most visible difference between the two types of components in React is the syntax. 

If we want to write a functional component, we will write just a simple JavaScript function which accepts props as an argument and returns a React element. No worries, we will talk about props later.
Essentially, these components accept an argument and return some JSX (some weird type of HTML mixed with JavaScript, we will talk about it in detail in one of the following posts).
They are shorter and simpler to write (as compared to class components) and more concerned with UI. If you want just to present some content in a nice way, a functional component is the way to go.

In a class component we have to extend from React.Component and make a render function which will return a React element. This type of component requires a few more coding lines. but will in turn provide some benefits.

So what are those benefits? Why not just use functional components?

There are some things functional components cannot do. For example, if we want to have state in the components, we need a class component.

Now what is the state? State is actually an object which allows us to create a dynamic component; with content that may change if the state is changed.

For example, we have a class component and state = {
showPopUp: true;
}

When a user closes the pop up window, the state will be

state = {
showPopUp: false;
}

In this way, our user changed the state. Another example is filling out the form. When it comes to the forms, Initial state of the component is empty, for example:

state = {
name: ' ',
lastName:' ',
email: ' ',
}

After the user enters the data, the state will look like this:

state = {
name: 'Adam',
lastName: 'Black',
email: 'adamb@gmail.com'
}


So, the state is an object that can be changed and this change
will generate re-rendering of the component. Functional components cannot do this. Well, they actually can but not in this way. There is a way for functional components to get states (lifecycle hooks), but we will come to that later on. Class components are not so concerned with UI.

Aside from the state, class components offer a variety of properties and methods that can be used by the class component automatically (after extending React Component, of course). When we do need all these features, class components are just awesome!

Why do we need functional components, you might ask?

Sometimes you will not need as many features and benefits offered by React Components. 

In these cases,

functional components are an excellent solution. They are simple to read and test, and therefore easier to debug. In case you use these components, you have less code to write.

Best practice is: use functional components whenever you can, and use class components whenever you have to!

And to finish up the post nicely and elegantly, I am posting two examples of class and functional components. I hope that you can tell the difference by now, but still - Repetition is the mother of all learning - first, functional component example:

I took this one from https://www.robinwieruch.de/react-function-component - so, no I didn't type it.

Now here is an example for a class component

source: https://www.freecodecamp.org/news/how-to-write-your-first-react-js-component-d728d759cabc/

Thank you folks, till next time!

React - Introduction: how does it work?

React - Introduction: how does it work?

What is React actually? It is an open-source JavaScript library created by Facebook, used by Instagram and Netflix for building user interfaces. 

React is used to create dynamic web applications mainly single page applications (SPA).

So, what is a single-page application? That is a web application that does not require page reloading during use.  Maybe you're not aware of it, but you are most likely using this kind of applications every day. Here are some of the SPAs; Facebook, Gmail, GitHub or Google Maps.

Basically, SPAs allow the user to stay in a pleasant web space where information is presented to the user in a nice, workable and simple fashion.

Now, let's dive in!

The life force of React is components. We create components in React for different parts of our

application. For example,

in this photo, "Home" is a component, "Explore" is another component, "Notifications" is also a component, etc. And all of these components are nested in a single component such as a "navbar" component.

And here are some more examples of components: search box, footer, header, sidebar etc.  I hope you get the picture. 

These components create the JavaScript representation of the DOM (Document Object Model) that is called virtual DOM. 

(In case you don't know about the DOM, you can learn more by clicking here.)

Virtual DOM is what makes React fast. React uses the virtual DOM, renders it to the browser and

creates the actual DOM based on it. Essentially, every time we make a change to one of our components (the data or the UI state), React will note the change and update only the changed bits via virtual DOM, and then update it inside the actual DOM

in the browser and then we can see that change. This happens really quickly because of the virtual DOM.

When we make a change in the virtual DOM (in some of our components), React creates a new virtual DOM and compares it to the old one. It knows exactly where to make an update in the browser/DOM. It updated that changed part only, instead of updating the whole thing (which would of course take more time to complete). This happens every time one of our components state or data changes. It is continuously updating the DOM to reflect the change.

This is why we say that virtual DOM makes React fast.

Now that we've explained how components work, we should say something about components themselves. 

Components look like html templates. (usually using JSX - we will explain JSX in the next post).

They can be class-based or functional. Class-based components have a state that can be changed/ updated, and functional components are basically just that: a function that does something. Components can also contain JavaScript for functionality. 

Don't worry if you didn't figure out components yet, you can read more about components in this post.

Thanks for reading and  - happy coding!

Why React? 5 Reasons to learn/love React

Why React? 5 Reasons to learn/love React

Since its creation, you probably came across

this question over and over again.
Why do you need React for front end development?

Well, you don't absolutely need it. But here I will talk about several things I like about React, and if you don't get convinced by the end of the article, I didn't complete my mission...

1. Fast

Just like with other single page applications,

React application will not reload every time when you 

click on one of its components, and therefore is fast 

and reliable. Also, it uses Virtual DOM that makes the 

application fast. Virtual DOM  allows ReactJS to 

detect when exactly to re-render or when to ignore some pieces

of DOM, since it can detect when the data has changed. 

In addition, as compared to Angular, 

ReactJS yields better runtime performance. Just
wonderful!

2. Modular

A React app is made of parts called components.

Big or small, you can reuse them as many times

as you need, which is awesome. If you need

some code several times in different places, no need to 

rewrite or look it up and copy - you just nest your

React component inside and you're all set!

This is one of the best things about React - 

you can create bigger components out of smaller

components, use it as many time as you like, wherever

you like!

3. Simple

In React, we usually use JSX, instead of using regular JavaScript 

for templating. 

But if you don't like it, you can absolutely go for plain Javascript.

However if you do go for JSX, it's a lot of fun!

JSX is a syntax extension to JavaScript. Well, nicely put,

but what does it mean? JSX in a nutshell is HTML

intertwined with Javascript. You just need curly braces

if you want to write JavaScript expressions or

any dynamic content. Awesome, right?

4. It can be used to build mobile applications

React Native is used to build mobile applications, so

with a few adjustments, after getting the hang of React, 

you will be able to create mobile applications as well. Isn't 

that just perfect?

5. It can be tested easily

React applications are extremely easy to test.

I won't go into much detail here as my first post 

on React basics is on its way. But let's just say that you will

be able to test React components like you test any other

JavaScript code.

Of course, this list is a non-exhaustive one.

Why React for dummies?

If you're reading this article, don't feel offended by the title.
One is always a dummy before getting familiarized with a certain subject. On the other hand, if you can explain a concept that a dummy can understand, then you most likely understand it well too. (Feynman technique, you can look it up if you like).

Truth be told, on my path to learn React, those dummy articles were the most useful ones. It is those articles that, after days of searching for an answer, browsing Stackoverflow terrified that asking a question there will disable me to ask anything for the next month or two and getting just an explanation filled with complex technical terms, I come a cross a SIMPLE article. And it just 'clicked'! Suddenly I have no problems understanding the point and it basically made me so happy I wanted to share that with as many people I can. Therefore I decided to start this blog. I appreciate any comments or questions because like everyone else, I surely make mistakes. Don't be afraid to say it, I am not afraid of mistakes. I like them because they make me learn. In my next post I will write about why choose React at all. What are the features that makes it attractive, and when you can do without.

Thanks for reading!