Week 3: React Router and SASS

React Router

This week was a continuation of last week with a deeper look into React.js and implementing the library Router. From there we took a very quick high-level view of design – CSS, SASS, UX, UI, Wireframing etc.

It should be stated that React is quite the beast to learn. There are a lot of different moving pieces to keep track of, and as such you can quickly lose your place in the code. This is what happened to me and many others this week.


Let’s just quickly breakdown what React router is and how we dealt with it. React router is a library that essentially lays down on top of your React application. It’s purpose is to do just what the name implies, it routes the user to different parts of your React application.

At a lower level Router is really just a component that loads other components based on the URL being used. Once you can grasp this concept it will become easier to get a full purchase on the power of Router and how to implement it in your app.

As stated previously, one of the things that makes Router so great is that it offers you links to other parts of your React app and it allows you to nest routes and then uses JavaScript to update the URL without making an HTTP request. That last big about not needing to have a POST or GET request to the server is really critical here.

Ok, what’s the big deal? If you go back to my Week 1 Post you will remember that when we were building a form and using a Sinatra server that we needed to have a POST request to the server once the user clicked submit, right? Well, React eliminates the need to send out that request in the first place. It will still validate the information provided but it will do it in real time, through the use of State. This is perfect for offering our users a more efficient and snappy experience.


Let’s examine this image above. You will notice that we have a series of components that are nested in one of 2 other components.

  • First, our top level component is Router. This takes a prop called browserHistory which is built into the Router library. browserHistory allows us to keep track of our users history and include some functionality, like back buttons into our app!
  • Second, we have our Route component which takes as a prop, the root directory '/' and a React Component (usually we call this one App). From there, at least in this case, we nest a series of components inside that Route component.

Our IndexRoute component will default to the passed in component prop of Index whenever the user hits the root directory of our App. Continuing on we have a series of other components that each explicitly state a path directory (e.g. path='/login'). This, much like in our Sinatra/ERB days, will initiate specific code when that URL is called on, in this case it will render the component Login.

Pro-Tip: It would likely be beneficial to drill on routing as a general practice and skill in programming before getting to launch. You don’t need to be a master but familiarizing yourself with the syntax, at a minimum, will shorten the learning curve and help you out quite a bit when you get to this in the curriculum.



Now, you would think that we would be spending a solid week on Router. Afterall, a good portion of the class was struggling with these concepts and having a hard time understanding how to implement them. This was not the case though, we spent Monday and Tuesday on React Router and then, rather quickly it felt like, moved right into Design.

We first covered the absolute basics. What is typography? What is color? After we got this out of the way we moved into some more interesting things like SASS. I have really been looking forward to getting into a more design oriented front-end experience but alas, it was short lived.

We barely covered anything of importance in SASS other than the basic gist of what it is and how it is implemented. Honestly, SASS is easy and very intuitive. It makes styling your content fun, at least to me. You are able to do things like write functions that will darken a color by a specific percentage. I like functionality like this because it has a lot of potential for maximizing the user experience.

I intend to really hammer home my skills in this department in the final few weeks of my time here at Launch. I want my breakable toy to really shine and while I do not intend to compromise on functionality or the quality of my code, I will put a healthy emphasis on its presentation. Afterall, it really doesn’t matter how good your code is, the surface is what the user sees, so make it worth their time and they will appreciate it.


One comment

Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s