Props: how do we pass them?

Props, how do we pass them?


Hey people, it's me again. This time I am trying to share some tips on passing the props in React.
Last time I wrote about props and what they are (more precisely here).

Now I want to write about passing them (or sending them). Let's dive in!

Props can be passed only from parent to child component, so it is all about the vertical flow.

Now I hope by now you realized how much I like comparisons...Comparisons make things easy to grasp, that is why I use them so much..

Imagine this like passing genetic information from mother to a child. Child cannot pass her/his mother any genetic information to their mum (or say just 'parent' to be politically correct). A child cannot pass genetic information to his sister or brother, either. It's always vertical - just like props!

We have talked about functional and class based components. So let's put the story into perspective.

First, we make a functional (child) component, for example. We destructure the name of those props and set it equal to this.props. You can learn more about destructuring here.

In this way, props have no value but are destructured so they can receive value from the parent component. Then, we can render props within the functional/ child component in the form we prefer to do that. Afterwards, in the parent component we import the functional component, set the state containing the value of the props we want to pass to the child (our functional) component. 

We destructure the this.state (we set the {name} equal to this.state and in the render, we insert our functional / child component and assign the props from this.state to the component, and render it. The next step is for you to open the Visual Studio Code, or any other text editor you may be using for writing your code, and try to do this thing I just talked about. We can talk, read and write all we want, but until we do it ourselves, we will never learn!

Also, for more details, look here: React documentation.

Thanks for reading and stay tuned!

Destructuring in React - what is that?

Destructuring in React

Wondering what destructuring in React is?

It is taking a certain value out of the many other values stored together.

Or, go back to my favorite way of explaining things: comparison!

Imagine you have a basket full of eggs, and each egg has a name written on it. 

So when you want an egg, you just want this precise egg, not any egg from the basket.

Therefore, you take it out and sort it by alphabet. Every time you need a certain egg from the basket, you don't need to take out all the eggs one by one. You know exactly where to look to get

the egg with the right name!

Photo credit: someone from Pinterest

Destructuring is similar. 

It means taking a certain prop out of the basket of props so you can use it whenever you like.

For example, your prop (among others) is:

 name: 'Adam'

In case we are in a class based component, before destructuring, we will access this prop like this: this.props.name. And than we do the destructuring: 

const {name} = this.props;

and now we can use {name} every time we want to access this prop.

On the other hand, if we are in a functional component, our prop will look like this:

name: 'Adam'

and we access it like this: props.name

now destructuring in functional component will look like this:

const {name}  =  props;

Because we don't have problems with "this" keyword in functional components. This little "issue" is related to class based components only. 

Now if we are in our class based components where we want to pass props to our child component (and of course we have state), how do we do the destructuring then?

we do it like this:

const {name} = this.state; (because we are in the class that we refer to as "this". No worries, I will write more about "this" in one of my next posts.

I hope you managed to grasp the point here: getting a certain thing from a bunch of things without breaking a sweat.

Thanks for reading, stay tuned!

React for dummies: React props and state; what the heck are they?

React props and state

Now you decided to learn React, and you know what the components are by now (hopefully).

The next thing you should get familiarized with are props. Yeah right, but what are they exactly?

Well, props is short for properties: in a way you can compare it to variables in JavaScript (or some other programming language). They come in pairs that look like that: name: value.

To take it a bit further, props are like function arguments in JavaScript that we pass into the components. When we pass them to another component, we can do things we need to do with it.

But what is the state then? Well, imagine a cake made of dough and glaze. Like on the photo:

The lower brown part is name - the one that received the value. Dough is usually not particularly tasty, but you need something to carry the glaze. In our case, the glaze is the value of our props.
And what is the state in this story? State is like a pack of  all the 10 cakes in a box. You can add 2 or 6 more pieces of cake to it, or you can remove some pieces. But when you do it, you shouldn't to it directly: the original state of the cake should always be the same. Since we don't want to mess with the original state, we usually make a copy of it and do whatever we like with its copy. It's like, you don't want to test a new flu medicine on your dog, but you find some stray dog and try to see what happens. If you give it to your own dog, you could soon be a petless walker.

So how do we change state without risking the life of our pet?

We use setState() method, which changes our state by changing  the state of a copy of the genuine state. This method takes an object as an argument, and changes it as we wish / set.

We can also think of setState() as a request to update the component, to change the part of it that we want to change.

Now if you want an additional explanation on how to pass the props, check this post out!
Of course, for much more details, refer to reactjs documentation. This is just introduce those new concepts to you in a simple way, and it is up to you to take it from here!

In the next posts I will write about other basic important concepts of React. Please send questions and comments if you have any. Thanks for reading!

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.