Diving into React (May hack days)
Earlier this year I moved into a new team at Flux Federation and the team has more of a focus on frontend tech. This has led to me starting to learn about React.
Starting React
Going through the react.org tutorial was suggested to me as a starting point — Tutorial: Intro to React — and I thought this was a good place to start. It does use the create-react-app , which does a lot under the hood for you (which can be good and bad). Using this does make starting a new react app a lot easier but will mean that it is difficult to customise later plus you aren’t learning all the things around adding packages, dependencies etc etc.
Pattern Library to a gem
The first major piece of work that the team is doing is developing what we call the “admin pattern library” or “APL”. This has lived in our core (Rails)app and uses HTML & CSS. For various reasons we have decided to work on pulling it out of our core app and making it into a gem that is then used by the core app.
If you want to create your own gem start with this — How to create a Ruby gem with Bundler.
We added webpack to our gem — Webpack — Getting Started.
This article — From the Asset Pipeline to Webpack — in the intro explains the history around the why of Webpack in Rails and it then provides a step by step tutorial on using Weback in a new Rails app. (I haven’t followed this)
The first focus with the gem was getting React working within the development environment, so this was with NOT linking the gem with a Rails app. We have it set up so you can launch a local dev server and then see what is happening. This took a bit of configuration of Webpack and other packages. Here are my notes about it, but they are pretty disjointed.
React-Rails
The core app has had thereact-rails gem in it for years. We added this to our gem as well so we could then utilise react_component within our Ruby view helpers. We had to then connect up the gem with the core Rails app.
With not being very familiar with React I was a unsure how all of this was working. I found a couple of articles that have helped.
React.js — A guide for Rails developers, particularly this —
Next, we need to create a new file index.html.erb under apps/views/records/, this file will act as a bridge between our Rails app and our React Components. To achieve this task, we will use the helper method react_component, which receives the name of the React component we want to render along with the data we want to pass into it.
Using React Inside Your Rails Apps — this bit was useful (note that this blog uses a different gem for adding react then we have used):
This produces the following HTML, which is then picked up by react_on_rails, and a component is initialized on your behalf.
As I am learning more about React, this is all starting to make more sense to me.
Learning React
Which leads onto the main aim for these Hack Days, which is learning React by doing Wes Bos’s React for Beginners course.
I purchased this course a couple of years ago but have just never got around to working through it. Luckily it is updated reasonably regularly.
I should be able to get through most, if not all of it over the 3 days, as it is 5 hours of video. However, I am finding myself going back and forth a bit and taking notes.
I have been working on it at home and at work, so on different computers, which has been good in that I have had to troubleshoot set up issues.
I did spend an hour or so before hack days to set up the project to make sure it was working so I didn’t waste anytime with set up ages on hack days (it is always really frustrating when you have to do this as I feel it really cuts into my learning time).
I am adding notes as I go to my Today I Learnt repo, react notes here. My code for catch of the day.
I really like this explanation from Wes or how he likes to think about state and props:
State is where the data lives, its home, props is how the data gets to where it needs to go. Props is like a bus or car, how it gets to its end destination of where it needs to be displayed.
During the videos, Wes also gives other useful information, like using $0 in the dev tools console. This I did not know. When things like this come up I spend a bit of time looking into them.
I also take the opportunity to dig more into Javascript learning, as it has been a long time since I learnt JS and I haven’t really used it much since then. For example when we got to event handling I found and read these:
How to handle event handling in JavaScript (examples and all)
Re-Intro to JS
I have mostly been coding with Ruby and Rails over the last four years. Did a good amount of JavaScript during my bootcamp at Enspiral Dev Academy but basically haven’t done any since then.
Found this article when looking at the react.org site — A re-introduction to JavaScript (JS tutorial), and has been a good place to start.
ECMA = European Computer Manufacturers Association, and has been around since the 1960s
ECMAScript is “JavaScript”
Ecma International®facilitates the timely creation of a wide range of global Information and Communications Technology (ICT) and Consumer Electronics (CE) standards
Objects — simple collections of name-value pairs
JavaScript objects can be thought of as simple collections of name-value pairs. As such, they are similar to:
- Dictionaries in Python.
- Hashes in Perl and Ruby.
- Hash tables in C and C++.
- HashMaps in Java.
- Associative arrays in PHP.The “name” part is a JavaScript string, while the value can be any JavaScript value — including more objects. This allows you to build data structures of arbitrary complexity.
Arrays
Arrays in JavaScript are actually a special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using [] syntax) but they have one magic property called ‘length’. This is always one more than the highest index in the array.
Note that array.length isn’t necessarily the number of items in the array. Consider the following:
var a = ['dog', 'cat', 'hen'];
a[100] = 'fox';
a.length; // 101Remember — the length of the array is one more than the highest index.
> var a = ['dog', 'cat', 'hen'];
> a
<- (3) ["dog", "cat", "hen"]
> a[100] = 'fox';
<- "fox"
> a
<- (101) ["dog", "cat", "hen", empty × 97, "fox"]^^ this one has to be a gotcha in some situations!
Developer Roadmaps
I recently came across this article — Web Developer Roadmaps: All In One Place, which has a few different roadmaps from other people.
The ones of most interest to me are:
I’ve started having a look at them and ticking of the things I know and it will provide me a clear pathway for getting on with learning the things I don’t.
These will be a very ongoing thing. I will be adding them to my-developer-roadmaps here.
All this learning is overwhelming!!
I was going through some of Wes Bos’s blog articles and came across this one
On being overwhelmed with our fast paced industry
The key points about how to not get sooooo overwhelmed are:
- subscribe to newsletters — I was already signed up to Ruby Weekly and have signed up to more at https://cooperpress.com/ as he suggests. I might not read them every week but I have found it useful to skim through the Ruby Weekly one.
- side projects — I like this, ABC — always be coding. And actually having a small side project that you can work on.
- one new thing — try one new thing in every project. This could also be good to have a focus on at work!
- self improvement — there is so much stuff out there that you can use to learn, make the most of it.
And then some bits that stood out for me:
You picked this industry, so it’s your responsibility to keep up.
I think I have been neglecting my responsibility. It is easy to get stagnant, complacent and lazy. And with this I have found I therefore am not learning and not progressing and then getting stressed about not feeling component enough.
TLDR; Yes our industry moves quickly, but that is because it’s getting better and better. If you are always iterating on your skillset in small ways, you will be just fine — don’t worry 🙂
I think I am starting to get my mojo back about this ongoing learning thing! 😁
