Earthquakes?
No, not real earthquakes. Just another web application! I'm not entirely solid on React yet (still on shaky ground) but I've taken my first few steps. Set up is not as difficult as I anticipated. Rather than starting every project from scratch our activities are now set up in a way that simulates a more realistic situation. We're given a set of files and basically told to fix it.
For this application that is covering how to map over an array (loop or iterate over a list in order to apply a function to each item) we are using a government API to access data about earthquakes. This data updates in real time and only the last hour's activity is displayed. This is possible through React! As mentioned before, React allows a page's components to update without a page refresh. It immediately creates a better user experience because it isn't up to the user to make sure the page is properly loaded or displaying the newest data.
The biggest learning curve is organizing all of those files. On the left hand side here we have all of our code broken into styles, components, and data. On the right I have one of my components, the EarthquakeList.js file, that is doing the mapping. In all components it is important to first import React and any other data that is required for the task at hand - in this case moment is a package that handles time and Earthquakes is my data that I want to use.
What I'm exporting is that same data in the format I want to see it in. Another unique aspect of React is that it combines HTML with JavaScript. In layman's terms: I can both create the visual aspect of my data and use logic to pull that specific data from a file on one page. In other languages these are separate entities and require their own file.
I struggled with this project in particular because the data itself was a little more complicated than I was giving it credit for. Earthquakes.js is a file that exports an object, not an array, so my map was not working and the whole app was crashing. Once I realized there was an array in the object called features I knew I needed to map over that specifically instead of all of earthquakes. After that I only had a few styling errors that were fixed by moving references to these components properly!
For this application that is covering how to map over an array (loop or iterate over a list in order to apply a function to each item) we are using a government API to access data about earthquakes. This data updates in real time and only the last hour's activity is displayed. This is possible through React! As mentioned before, React allows a page's components to update without a page refresh. It immediately creates a better user experience because it isn't up to the user to make sure the page is properly loaded or displaying the newest data.
The biggest learning curve is organizing all of those files. On the left hand side here we have all of our code broken into styles, components, and data. On the right I have one of my components, the EarthquakeList.js file, that is doing the mapping. In all components it is important to first import React and any other data that is required for the task at hand - in this case moment is a package that handles time and Earthquakes is my data that I want to use.
What I'm exporting is that same data in the format I want to see it in. Another unique aspect of React is that it combines HTML with JavaScript. In layman's terms: I can both create the visual aspect of my data and use logic to pull that specific data from a file on one page. In other languages these are separate entities and require their own file.
I struggled with this project in particular because the data itself was a little more complicated than I was giving it credit for. Earthquakes.js is a file that exports an object, not an array, so my map was not working and the whole app was crashing. Once I realized there was an array in the object called features I knew I needed to map over that specifically instead of all of earthquakes. After that I only had a few styling errors that were fixed by moving references to these components properly!
Comments
Post a Comment