junanjunan - Tumblr blog

[junanjunan]

On React Router

React Router is a cool feature of React that allows us to build single page applications that lets the user navigate through different pages without having to reload the entire HTML document. React Router uses client-side routing - a process that handles all routing logic on the client-side and not on the server-side.

Server-side routing happens when a route requests data from the server. For example, each time we click on a webpage's navigation tab, our computer makes a request to the server to send over HTML data that translates to what we see on the screen. On the other hand, client-side routing handles the fetching and displaying of data internally, by the JavaScript that is loaded on the page.

One of its key benefits is speed since each time we move through different pages, our computer doesn't have to make data requests on the server, preventing a flash of white screen or blank page thus making a seamless user experience.

Installing React Router:

1) cd into a folder where your project is located and type:

npx create-react-app name-of-app

Say, if you're looking to name you app 'bubbles', type:

npx create-react-app bubbles

2) cd into your project folder and install React Router by typing:

npm install react-router-dom

Note: If we wanted to install React Router version 5 instead, type:

npm install react-router-dom@5

[junanjunan]

First Phase Project - DONE!

I am excited to finally arrive at an important milestone to my Flatiron Software Engineering program journey: creating my first webpage project. My webpage app is a repository of Star Wars planets and characters. My app will give the user a list of planets and characters and when clicked, returns some details of the selected item. I used a public Star Wars JSON restful API to make fetch requests of the planets and characters.

An essential concept illustrated by my project is asynchronous Javascript. Using asynchronous Javascript helped my code run efficiently especially when dealing with API's. To illustrate, let's first define synchronous code .

Synchronous code is code written in sequence and gets executed one step at a time.

Here is an example:

function secondLine() { console.log('This is second.') console.log('This is first'); }

secondLine(); console.log('This is third');

In this example each line of code has to be executed first before moving on to the next.

This is the output:

// -> This is first // -> This is second // -> This is third

If we are to run a program with just a synchronous code, there is the risk of blockage because every line of code needs to be executed first before proceeding. Imagine if we are to fetch data from the web, the browser gets blocked while the data is being downloaded. To the user, it would appear that the page load has frozen and is a bad user experience. This is where asynchronous code comes in handy. It gives us the ability to move to another task while waiting for another to finish therefore unblocking the main thread.

Let's illustrate with an example using setTimeout():

console.log('First line'); setTimeout(() => { console.log('After second line');

}, 3000); // Wait 3s to run

console.log('Second line');

// -> First line // -> Second line // -> After second line

Here, 'First line' runs first. When we got to setTimeout(), the code was set to run after three seconds. While we are waiting, we proceeded to run the next line that logs 'Second line'. After three seconds, we finally logged 'After second line'.

This is handy for code that fetches a good chunk of JSON from an API. In my first phase project, I created a webpage repository of Star Wars planets and characters. You could imagine that if not for asynchronous code, my web page would run AFTER it downloads all the files from the API. But with asynchronous code, the webpage was able to load the DOM before all the files get downloaded.

[junanjunan]

Working this weekend to catch up with my school’s first week study topics and labs. I’m getting a better grasp now at JS functions, arrays and objects. Let’s do this!

[junanjunan]

Meeting my coding cohort for the first time. So relieved to know I’m not alone in this #bootcamplife.

[junanjunan]

Today marks the first day of my coding bootcamp! We are all required to write about our life as a student and what we learned hence this blog. So far I’ve covered mostly basics of HTML, CSS and JavaScript. For someone who hasn’t coded before, JS came as a little bit of culture shock to me. Functions, loops, iterators and data structure feels like a road leading to Mordor. In Gandalf, I trust.