This post is for front-end developers interested in learning new things. If you’re reading this and thinking “hey I wish this guy would make me an amazing website to make my business loads of money” - well, you’re in luck! Let’s work together and make beautiful beautiful websites.
Why React?
React is a framework for building web applications using JavaScript. It’s designed to help manage the views of applications, with the views being driven by and rendered in response to changes in the data behind the app.
It’s been around for a few years, originally open sourced in 2013 and I’ve seen it grow to become a very popular standard for fast, reactive web applications. As a fan of fast web apps, I’m keen to learn how to apply this to my projects.
In the past I’ve seen it in use but have never really taken the time to properly learn it, and now seems a good time. The framework has matured to the point now where documentation is solid, and there are loads of great tutorials around.
With the recent release of React Fibre (React 16), it’s a great time to learn some React! But where to start? Here’s what I’m doing.
Step 1: Immersion
The first thing I do when learning something new is to get a feel for it through whatever means possible. This means subscribing to React or JavaScript newsletters,podcasts, Youtube channels and basically getting a feel for the ecosystem around the framework.
The React.js newsletter is good, as is Fullstack React, and I also recommend JavaScript Jabber if you like listening to tech stuff.
This is all very fun but I have no idea what most of the articles are really about yet, so the next step is to take to the official documentation. A great starting point is Thinking in React. I worked through that, then looped back and studied the Quick Start sections more thoroughly. This helped me understand the concept.
Understanding the basic concept is a good start, but it’s still a long way from applying it to the real world. There’s a big gap between understanding the basic idea and knowing how to apply it. For me this means I need to do some focused learning.
Step 2: Lessons
I took this Udemy React and Redux course. The instructor, Stephen Grider has a great way of explaining tricky concepts and makes use of loads of demos, which I really enjoyed following along.
After a week or so of spare time I was able to work through this course and I feel I really understand now how React works alongside data management using Redux. The next step is to practise this new knowledge on a real app.
Step 3: Application
Immersion and book learning are all great, and I enjoy them very much but the process doesn’t really amount to much if I don’t apply it to a real project. This is how I really learn, by making mistakes and fixing them.
Rather than hack together a to-do app, I decided to aim a little higher. I have an Irish shopping website that is a great place to try new approaches. The site’s very old now, and in need of a re-build so I’ll try the new skills on it.
One of the great things about the ShopIreland.ie site has always been it’s speed. This is something I’d like to maintain or even improve, making the experience of searching for products, browsing and adding them to the basket as smooth as possible. I think React will be helpful with this.
I’m just getting started with step 3 and will update once things progress. For now, I’ve build an API to provide the data for Redux, and the next step is to build out the routes within React to present the same URL structure as the old site.
Wish me luck!
I hope you find this helpful! If you have any questions, or are feeling inspired to take on a fitness challenge, hit me up on Mastodon. Also, you can hire me. I’d love to hear from you.