Week 11 Reacting to React and starting with the final project

Day 50: React basics, DOM interpretation, and homework

Another week begins 👩🏼‍🚀, and I am extremely happy to start using React, I totally see the advantages of using this library in JavaScript ☕️ and might improve the way we use to create our UI. We started the class with the idea of reusable components and how React renders and interacts with the DOM differently than Jquery.

No alt text provided for this image

After a little bit of theory that is basic to understand how React works ⚒, we jump into doing some simple yet interesting exercises, in order to understand how we connect with the different fields and how we will start writing in HTML.

No alt text provided for this image

We then were introduced to the idea of props that help us execute functions using components opening a lot of possibilities on how versatile the code is. After working in some exercises, such as a calculator 🧮, we were then introduced to how we should separate elements in order to organize our code if something I learned is that is better to divide everything into components, making your code really flexible and adaptable when needed

Also, the homework for the weekend was to create a webpage that will allow you to leave comments on a news website that we selected to scrape, you can see it HERE

Day 51: setting classes and working with APIS

Today we continue with React, as this library is full of features that can make developing our apps more interesting. One of these features is the possibility of setting states, really useful when using buttons and want to utilize an on click function 🕹.

No alt text provided for this image

We then continue class practicing with different exercises, such as creating forms or card components that have information that we retrieve from a .json file 📋. Also, put teacher show as the cool feature of … that fills our component with the information when we are mapping it

Finally, we were introduced to the idea of loading APIs, such as GIPHY 🤹🏻‍♀️ to search queries in react by using the package Axios. Definitely, there is a lot to learn and practice in relation to the structure that we need to follow when using this technology, so all our parts of the code are interconnected. 

Day 52: Axios, conditional rendering, and react-route

This week is going extremely fast and we have covered a lot of topics in regalarían to react. Today we started class by creating Ajax calls and how we combine 🌟 them with a form submit so it displays the information. Also, our teacher showed us how to display a loading page when it takes time to load the data by using &&, that select the first false statement.

No alt text provided for this image

We then continue the class with conditional rendering, that makes components encapsulate behavior ✍🏻. We use this feature to create routes for our navBar when it was clicked but we found some issues with the URL that was displayed 📡. To solve these issues we use a package name react-router-dom that allow us to create routes more easily, but there are some adjustments we need to do to our code to display the results.

No alt text provided for this image

After doing a couple of exercises to practice our new knowledge, we were introduced to how we should use a server when using react 🙌🏼. For doing so, we were introduced to a boilerplate that we can use a template as the structure of our folders that has scripts written with different commands. Having these scripts makes some steps, such as deploying to Heroku, much easier 😎. 

Day 52: setting classes and working with APIS

No alt text provided for this image

Thursday arrived and we started the class reviewing the boilerplate, this set of files will help us build any up in react 🚀 as it has a basic structure that we can use not only in develope mode but also when being in production.

We then continue class doing exercises were we practice connecting with third-party APIS and managing the front end so it will display the data 📖. One of the issues that I had when doing this exercise is that the response from the API 🎙 call has to be an array in order to be able to map it, therefore most of the times I need to put response.data

Then we created our own DB using mongo and displaying the results on the front end, for doing this we needed to create our API routes and update our server with the information necessary to connect with our database created 🗄. In the API routes we had lines of for each CRUD signal, Create, Read, Update and Delete. After doing this exercise and facing some problems with posting the data we got to the end of the class and we started to discuss our final project, which we are presenting in a week. Can’t wait for tomorrow and start working on the final project ✌🏼.

Day 53: starting the final project

… and the week came to an end, there is only one week more and two days and the Bootcamp is over 👩🏼‍💻. Is incredible how time flies when you are working on things that you love and I can’t wait to continue studying more these technologies.

No alt text provided for this image

As we are getting near to end we are starting our group projects today, so we can have our repositories and basic folder structure settle before the weekend. We decided to divide the team between front and backend and always create a pull request to our dev branch so we all have the last updates of the app working 🔦.

We also decided that rather than working in different files and then merging, as we all are going to have the basic structure of the functional app, we are going to edit just a part and then merge it to developer branch 📄. This will avoid, we think, a lot of merging conflicts on the future, and will let us all be on the same page

So, let’s get coding in this final sprint 🥇!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: