All the Arrows point to REACT.js

This week has been great! Eating steak, buying a 28" monitor, grass seed is actually growing and 40 hours of learning React.js. After three tutorials and falling down a number of rabbit holes my brain feels numb by dinner and feels strangely ready to get back at it while the morning coffee is brewing the next day.

Not only is React great but I feel like I am simultaneously becoming more proficient at HTML, CSS and JavaScript. It is also solving many puzzles for me like some ES6 syntax I have been sighing at for the past few weeks not knowing what is was.

Ok, to explain the idea behind the picture I think I now understand, and maybe even like, arrow functions. You know the

(props)=>{…}

Humans are generally opposed to change, but when it can add benefit I think there is some justification. The arrow function doesn’t just make for more concise and cleaner code but it actually has a major impact on React with the ‘this’ word.

When using ‘this’ in a function it takes on that function’s scope. The great thing about making that same function with the arrow syntax is now that same ‘this’ will now use the scope outside of that function. Pretty cool and efficient eh?

Another aspect of React that stood out is the Stateless Functional Component. If a class or component ONLY has a render function in it you can make it a function with just a return. No render = no state. The issue now is that using ‘this’ will give an ‘undefined’. To fix this use ‘props’ instead of ‘this’.

The reason why I focused so much on React this week is because it’s both enjoyable and easy to see what’s going on. The puzzle pieces are clear and obvious and the pieces can be used for a 4-piece puzzle or a 5,000 piece puzzle involving much complexity!

Follow on Twitter!

— Brad