Learning React

Kelvin Acosta — Tue, 11 Jul 2023 01:39:18 +0000

It's been my first time learning about this technology. I will not lie about this. It has been super hard learning for me. One thing that was not getting into my mind its states.
"A state represents the current condition or state of the component, which can change over time due to user interaction, data updates, or other factors". Best definition I got it when I was doing my research.

When I got to this point I was confused but I get now:

const [recipe, setRecipe] = useState(null);

.Declaring a constant variable

.[recipe, setRecipe] uses array destructuring syntax to declare two variables.

.It assigns the first value returned by the useState hook to the recipe variable and the second value to the setRecipe variable.
.By using setRecipe, you can later update the recipe state by invoking it with a new value.
."null" In this case it is just the initial value as argument given.

This line of code initializes a state variable called recipe with an initial value of null and provides a function setRecipe that can be used to update the recipe state.

As a key to remember: " useState, the first element of the returned array (recipe in this case) represents the current value of the state variable, while the second element (setRecipe) is a function that allows you to update the state value"

On my way!! my coding journey.

Kelvin Acosta — Mon, 15 May 2023 02:52:45 +0000

I was working on my first project in my life. This is the first time I was actually doing code by myself. Meaning that I used to see code since I was 19 but I never paid fully attention to it. I usually just coded to pass the class but I never really put effort on it. I had a super little basic knowledge of syntax before I enjoyed FlatIron.
I enrolled to this amazing bootcamp because I have friends who actually work in this area.

I did not know what to do for a project until I saw one of my favorite cartoons when I was a kid which it was digimon so I tried to think on what to code. It was like a flash on my head. I remember I used to have digimon cards and I really enjoyed with them.

A big problem for me was when I had to learn about api. It was a little confusing for me. Before I picked digimon I was checking on all those publics api where they have a lot of data. One of the main reason about getting public digimon api was because it only has name, image and level. It really helped me a lot to understand where and how to use an api. How to really use fetch. The data obtained from an API can be further processed, analyzed, displayed, or utilized in various ways within your application or system.

Working on my project with api and fetch helped me to understand that are both related to making HTTP requests from a client side application to a server to retrieve data or perform actions which is really cool.

const digimonContainer = document.getElementById("digimon-container");

fetch("https://api.example.com/digimon")
.then(response => response.json())
.then(data => {

const digimons = data;


digimons.forEach(digimon => {
  const digimonCard = document.createElement("div");
  digimonCard.classList.add("digimon-card");

  const digimonName = document.createElement("h2");
  digimonName.textContent = digimon.name;

  const digimonImage = document.createElement("img");
  digimonImage.src = digimon.image;

  const digimonLevel = document.createElement("p");
  digimonLevel.textContent = `Level: ${digimon.level}`;

  digimonCard.appendChild(digimonName);
  digimonCard.appendChild(digimonImage);
  digimonCard.appendChild(digimonLevel);

  digimonContainer.appendChild(digimonCard);
});

})
.catch(error => {
console.error("Error:", error);
});

This code only get Digimon api and returns an array of Digimon objects.Each object contains properties like name, image, and level. It makes a GET request to the api endpoint using fetch, processes the retrieved JSON data, and it creates HTML elements to display the digimon information on the page.
I am excited to keep going on this journey and share my experiences with you. I want to keep learning and I will be keep posting about my coding journey.

DEV Community: Kelvin Acosta

Learning React

On my way!! my coding journey.