Day 50: React basics, DOM interpretation, and homework
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.
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 🕹.
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.
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.
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
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.
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 🥇!