How short is your life? Use React to find out. (Part 1)

#react #javascript #webapp

[DISCLAIMER: some of the pages might look odd because of the CodePen embedding, open the link to see them in all its glory]

Have you ever wondered how much time of your life some of your daily activities consume? In this article we're going to learn how to make a simple React app to visualize an estimate of it.

Let's start with the basic index.html file:

You'll see that there's an h1 asking what your name is and a button to submit it, but there is no input to actually write your name. That is where React kicks in!

We've created a simple NameInput component that stores the input's value in Local Storage with the name of "nameValue". The name is only used in this case to personalize the experience a little bit, but if you're replicating this, you can choose to give it some other use.

After the index.html file, we create a country.html file, for the user to submit the country where he/she lives. The logic for the React component is pretty much the same: the CountryInput component stores the value in LocalStorage as "countryValue" 👇

You'll see that we've now added two new components: EnglishTitle and SpanishTitle, which render the phrase "What is your country? + the name you submitted before (if you start from here and haven't submitted a name in the latter part, "nameValue" returns null)

Now comes the fun stuff

Next we create an age.html file where the user can submit his/her age.

We have the regular Input, EnglishTitle and SpanishTitle components, but we've also added a function. The function makes an XML HTTP request to the file lifeexpectancy.json, saved inside the data folder. The lifeexpectancy.json file stores the life expectancy for every nation on Earth. The XML request makes the data accesible to myFunction, which uses a for loop to look for the country value submitted as countryValue. Finally, it stores the life expectancy value corresponding to the user's country as lifeExpectancyValue using Local Storage.

Once the age is submitted, we go to the next page which is in this case just the instructions. There are no React components this time, just text (with the option to read in Spanish)

Starting the visualization

At this point, had you wondered why the app was named LifeDots? Now you are going to find out why. From instructions.html we pass to firstinstance.html. The file presents an amount of colored dots equal to the life expectancy of the user's country three times (every dot represents four months). You will see, because it's only the first instance, that the balls are either red or blue, but not green. It's explained down in the page that the blue balls represent the time you've already lived (your age), and the red balls represent the time you still have left (according to your country's life expectancy). Like in the prior stages, if you haven't submitted anything, the component doesn't render.

How do we achieve this using React? First we create a unique component called . This component's state has three values: num, for the stored lifeExpectancyValue, count (a counter) and items, an empty array. Inside componentWillMount(), we'll find the let arr (another empty array) and a for loop that executes a number of times equal to the life expectancy. Every time it executes, this loop pushes a div of classname "year", composed of three dots, into the items array in the component's state. Finally we find inside the return(), this very array. This way, the Life component will render an amount of "years" equal to the life expectancy value stored in LocalStorage.

In Part 2 we'll start adding green dots to represent the time you will spend in different activities like studying, sleeping, or working.

You can find the whole project in this github repo.

So, this was my first post in dev.to! Did you find this tutorial easy to follow? Did you learn something about React you didn't know before? Please leave your feedback in the comments, and if you liked it follow me here and on Twitter 👇👇