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
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
browserHistorywhich is built into the
browserHistoryallows us to keep track of our users history and include some functionality, like back buttons into our app!
- Second, we have our
Routecomponent 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
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
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.