Archive for category react
When I started to work on some Ruby on Rails projects almost 8 years ago, I knew zero about it. Instead of jumping head-first into learning the language (Ruby) and the framework (Rails), I started by learning how to write unit tests for it. That was the tiniest thing I could do to get my feet wet (passing tests give me that instant gratification we all crave for).
Learning how to write unit tests in whatever language should be relatively easy; if it’s not, I probably would not consider working in such language to begin with!
After learning the basics of writing tests, I can implement simple things in the language however I can, which back then, it meant I was “speaking Ruby with a C# accent”. That’s ok, because once I see my tests passing, I can poke someone who knows a lot more about the language than I do to teach me the better ways to both write the implementation, as well as the test.
More recently, as I started getting my feet wet on ReactJS, one of my first questions was: “how do I write tests for this thing?”.
That gets the ball rolling for me…
A few weeks ago I mentioned I was starting to learn React. I’ve finally finished a few days ago the PluralSight course mentioned in that post. The course was good for me to get my feet wet in React. However, as I stumble across React code in the Real World, I just knew I’d continue to see Spanglish in Programming.
See this example:
As I read the code above, specifically the bit indicated with red arrows, this how it sounds in my mind:
“if page type is greater than or equals to this constant and… wait, does the thing following that && actually evaluate to a boolean?!”
I have no sympathy for code that mixes different language in the same file. It gets even worse when the code mixes different languages in the same function, method, etc.
That reminds of the day XML literals were added to VB, and of course, people start using it in the worst possible ways. The ability to mix different languages can be very powerful, but to me, there should some separation so that the brain doesn’t have to deal with so much context-switching.
Anyway, the example above doesn’t look like clean code to me. I’ve asked a fellow co-worker who’s more experienced in React, and he showed me how the code above could be cleaned up: simply extract the bits that create HTML into its own functions.
I believe every developer should always ask: “Is this readable? Is this clean? Is there anyway I can make it better?”.
Much like there’s a hybrid between English and Spanish called Spanglish, there’s also one between Porguese (Português) and Spanish (Espanhol) called Portunhol. It seems like the same happens with programming languages!
Here are some cases:
- C# and T-SQL
- C# and XML
- C# and HTML
- HTML and CSS
Then I look at JSX (example found here):
So far, I’m not convinced I’ll like that approach, but hey, let me stick with it and see what kind of things I can build with this mess.
Como would usted gostar if yo tivesse written esta post the mismo jeito I escrevi this frase?
See what I’m saying? 🙂
I just got started learning React. Much like I did when I started learning Rails many years ago and documented my findings, I’ll do the same with React. If anything else, at least to have a place to come back to when I don’t remember things. 🙂
To get started, I’m following the following Pluralsight course: Building Applications with React and Flux.
Here’s a quick run through of my notes…
React has no two-way binding, which I liked in Angular. Again, I need to learn a little more about this to see how I like it.
React can render both on the client and server (different from Angular). This sounds interesting.
Instead of using Sublime to follow along the course, I decided to install Visual Studio Code on the Mac to experiment with it. So far so good.