Roughly two months ago, I came to the conclusion that my knowledge of vanilla JavaScript is advanced enough. So, I decided to dive into one of the many JavaScript frameworks which would enable me to
build more sophisticated apps.
I chose React library since I admired its smart architecture…just kidding :). I had no idea which framework or library to pick. I jumped into React because I heard that it is a simple component library suitable for my intended purposes. Moreover, many employers require it in their job descriptions.
In this post, I am going to describe how I started learning React with Redux and which resources helped me along the way.
If you find yourself in a similar position I was in two months ago, I hope you’ll find my learning path inspiring.
In the beginning, I needed to decide which React with Redux resources to pick. There are
so many of them. Would it better to start with the
official documentation, with a book or watch some video courses?
I decided to check the official docs first. However, this was not a smart decision since I had no idea about the logic of the library. I didn’t even know what some concepts meant since the only JS library I knew at that time well was jQuery. So, I skipped the docs for the time being.
I started with the book first. The style, in which it was written, seemed engaging to me at first. You’re learning React features from the conversation between senior web developer (React expert) and junior web developer (React newbie). I guess this is one of the few things I liked about this book.
However, the more I read the more I started to realize that there is a substantial downside to this writing style. It forces you to read too much of unnecessary text in order to understand a particular React feature. This fact made it difficult to just skim the text when, for example, you wanted to come back and re-read some topic. Moreover, the text also seemed often repetitive to me. Also, the code snippets in the book were not written in ES6 syntax, which is today’s standard of writing React apps.
These are the major reasons why I wasn’t able to finish it. I read roughly half of it.
In a short time after I begun reading the mentioned book, I started to watch the video course
Modern React with Redux by Stephen Grider. Unlike the book, the course truly
helped me to understand React and Redux. The instructor does a great job explaining React basics in a
beginner-friendly way. You will learn not only how to write code properly, but also why are you writing it in a particular way. What I loved the most about instructor’s approach is that you’re
building apps with React throughout the course. He will also write every single line of code with you –
code along.
After few introductory videos, you will create the YouTube app where you will solidify your newly acquired knowledge. You are going to build your first React component, initialize a state and even make you first React AJAX call. After that, you’ll plug Redux in and create the Weather app using other JS libraries and frameworks as well. The final app, you’re going to make, will be a simple blog, where you will build a form in React and you will learn how to use React router library.
However, there are two things I missed in this course. Firstly, you don’t build your React developer environment yourself. Instead, you simply download it from the instructor’s Github account. From the hindsight, I think it is crucial for a React beginner (without any experience with node.js) to understand how is it possible that just by typing “npm start” into the console, your app magically appears on the screen. You might also have issues with understanding why the JSX code with ES6 syntax, you write throughout the course, can be read by the browser (hint: it is done by npm’s Babel package).
Secondly, I missed some
theoretical introduction into the basics of React and Redux. When I’m learning something new, I need to understand the basic concepts and definitions from the beginning. This helps me a lot to fully understand the new material. For example, you won’t learn difference between
React component, React element and React node in this course. However, I’m fully aware that this latter issue might be only my personal one.
To sum up, Stephen Grider’s Modern React with Redux course is a great introduction to React with Redux. It will teach you how to build fully functional apps with these technologies using modern ES6 syntax.
Although I knew that this course was not for beginners, I didn’t like the fact that the instructor just copied and paste the code most of the time. I’ve already done a couple of other advanced JS courses and in each of one of them, you code along with the instructor. The instructor was also too often referring back to his beginner’s course. This might get a little bit annoying sometimes. Because of this, I occasionally got a feeling that you needed to do the beginner’s course first in order to be able to get the most from the advanced course.
On the other hand, the instructor provided an introductory lecture before each topic with a couple of slides. This really helped me to get into the particular React (Redux) topic (the thing I missed in the Stephen Grider’s course).
Despite the mentioned shortcomings, this course was very well organized and it helped me to understand React and Redux even more.
The Docs
After going through all of the mentioned resources, I jumped back to the official
React docs and read them all. This time around, I had
no problem understanding it.
Currently, I am going through
Redux docs and have no problems understanding it as well.
So, are you going to learn React with Redux too?
If you’ve already jumped into React and Redux, please let me know, in the discussion, what resources you used and how efficient they were for you.
