"Props and States in React JS"

jpabloc17 — Sat, 07 Oct 2023 03:28:02 +0000

React is a JavaScript library that we can use to build User Interfaces and separate the structure of the app into components. When working with React, we have different ways to pass data between parent and child components: Props and state.

What is a component?

A component is basically a function that takes data (props) as an argument and returns JSX. Components are dynamic and enable us to think about each piece in isolation, helping us keep our code organized.

Props (Properties):

Props are pieces of information passed from a parent component to a child component as objects that store the values of attributes of a tag. They can hold any kind of data, such as strings, numbers, objects, and even functions. They can be accessed in the child component as parameters of the component function.

State:

A state is essentially a variable used to contain information about the component that can change over the time as users interact with the application. State provides us with a way to maintain and update information within a component without requiring its parent to send the new information. The "change in the state" can happen as a response to user actions or system events. To use state, first, we need to import a hook from React called "useState." The useState hook will return an array with two variables inside of it: a reference to the current value and a set function so we can update that value."

In this example, we have a Counter component that uses state to Increment the value when the button is clicked, the state changes, and the component re-renders every time the we updated count.

In conclusion, props can pass data from parent to child components, while states can manage dynamic data within a component, allowing the user to update it while interacting.

For Loop, Use & Syntax

jpabloc17 — Sat, 22 Jul 2023 01:19:03 +0000

Sometimes we find that we have to write the same code many times. For example, having to print the numbers from 1 to 100 on the console would be very tedious nor would it be very efficient.

Here is when loops become handy:

Loops allow us to execute the same code a certain number of times. We can use a "for" loop instead of writing a console.log() 100 times.

For loop syntax:

The syntax consists of the keyword "for" followed by parentheses and curly braces (for(){})

Inside the braces we have the loop-body which is the code to be executed. Inside the parentheses we have the number of times our code is going to be executed. This is made up of several parameters separated by semicolons ";".

Initialization: This will be our starting point, here we can define a variable that will be used as our counter. Conts should not be used since its value will be changing, typically the initial value is 0 or 1.

Condition: Here we write the ending point. We must define how many times we want our code to be executed. This means that our loop will be executed while the condition is true.
It is important to have an ending point if we do not want our loop run an infinite number of times.

Iteration: The iteration is what is executed at the end of each loop. Here we will define what we want to happen with our variable. For example, increase or decrease its value.

Loop Body: This will be the code to execute for each time while the condition is true.

In this example we define our variable "i" equal to 1 since we want to print the numbers from 1 to 100. This would be our counter.

The condition would be that as long as the value of our variable "i" is less than or equal to 100, our loop will continue to execute.

For the iteration, each time our code is executed, one will be added to "i". In JS, we can do this using '++'.

For the body, we are using "i" inside the parentheses to print its value after each cycle.

As we can see using the "for" loop, we can get the same result without having to write 100 separate "console.log()". Loops are powerful tools that help us simplify and improve our code.

DEV Community: jpabloc17

"Props and States in React JS"

What is a component?

Props (Properties):

State:

For Loop, Use & Syntax