How am I learning React with Redux?

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.

The Start

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.

Instead, I chose a book (ReactJS by Example - Building Modern Web Applications with React) and a video course (Modern React with Redux). Both resources claimed that they will teach me React (with Redux) in an accessible way.

The Book

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.

The Course

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.

The Rest

Since I wanted to learn more about React and Redux, I tried another video course, this time from Cory House. Actually, he has two courses on React, one for beginners with Flux (with React.createClass syntax) and the other for not-React-beginners with Redux (using ES6 syntax). I did the latter one.

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.

WebDevRes #1

---

---

Article

Want to learn JavaScript in 2016?

This article describes its author’s programming journey. As I mentioned in the previous post, the most difficult part of the coding learning process is to pass its intermediate stage, which is a phase between beginner and advanced programmer. The author of the article sees it the same way.
He makes also some very good points, for example that you should at least try to learn how JS frameworks and libraries work under the hood, which will help you to better understand JS functionalities.

The only problem I have with this article is that the author is only telling you which courses to take or which book to read, but he is not telling what you should do with the acquired knowledge. You should always keep in mind that the most important thing in a learning process is to build your own apps from scratch.

---

---

Blog post

My Bootcamp experience

This is a great article from Saron Yitbarek, founder of the code newbies, where she describes her personal experience with a programming Bootcamp. Among other things, you will learn what to look for when searching for the bootcamp that will meet your individual needs and that you should always carefully assess the employment percentage of the particular bootcamp’s graduates, since it can be easily manipulated.

---

---

Article

Getting Started with JavaScript Robotics

Have you ever thought about using JavaScript to program a piece hardware? …for example, to light up your LED?
This article will walk you through the process from getting your hardware to being able to control a LED with a JavaScript code using Node.js.
I was amazed by how simple is to get the hardware and to start control it with JavaScript. I'm even playing with the idea of buying the Arduino starter kit myself.

---

---

Blog post

Give it five minutes

I came across this blog post when reading the documentation to the React JS library. Its main massage is that you should always think hard about new ideas, which might seem like a nonsense to you at first. Before dismissing them straight away, you should ask questions about them instead. It is an easy task to dismiss someone’s unconventional idea, much harded task is to think about it and accept it .

---

---

WebDevRes #0

As already mentioned, I will be regularly posting the most interesting resources (articles, blog posts, podcasts, tweets…), I encounter, that are somehow related to programming. These posts are called WebDevRes which stands for Web Development Resources and you're just reading the first post of this series - History in the making!

As you can see, the first "issue" begins with 0 and not with 1. Do you know why?

Yep, you’re right, WebDevRes Weekly is a kind of an array of interesting links, and array index, as we all know, begins with 0!

Ok, (stupid) jokes aside and let’s get real.

Here are the top five links to interesting programming resources, I recently read or heard. Enjoy!

---

---

Article

How to write Medium stories people will actually read

The author describes how to convince other people to read your article on Medium.com. However, many of the rules can be applied to any of your internet posts as well. The post also contains links to the articles analyzing what words you should use in your headline to get more readers. You will also learn how you should write your posts and that you shouldn’t be scared to show your credibility to your readers.

---

---

Podcast

Code Newbie Ep. 19 - The Hard Way

This is a great interview with Zed Shaw, author of the Learn the Hard Way series. What I personally like about him is his different approach to the code learning since he puts strong emphasis on the memorization. He claims that you need to memorize syntax of the programming language before you can jump into your first coding project.

---

---

Blog Post

Leveling up your JavaScript

This is a story about an aspiring web developer, who talks about his programming journey. The interesting part of the post is when he describes challenges he faced, when moving from a beginner to an advanced programmer. I bet that everybody undergoes such troubles when going through this particular period since you don’t know what you don’t know. The easiest way, how to move on, is to learn from other’s experience. You should therefore read this article!

---

---

Article

Angular versus React: Which One Will Reign Supreme?

The article describes differences between the two most popular JS frameworks - Angular and React. The author talks about the advantages as well as of disadvantages of each framework. Since many of the web developers need to use at least one of them, it is good to understand the differences between them.

---

---

Article

Atom treasures a list of Atom plugins I can’t live without

If you’re using Atom text editor, this article is for you. If you don’t use it, you should at least give it a try J. This post is full of great packages which will enhance your productivity. Try the power mode package at least!

---

---

What’s React!? : Introduction

Introduction  

If you read any article about web development or any front-end developer job description these days, you most likely get the impression, that everybody wants you to know JS library called React.js. Since I’ve read many articles about React and watch some online courses in the last couple of weeks, I decided to write a post about this popular library.

“Ok, so what’s this fancy thing that everybody is talking about?”

Put it simply, React.js is a JavaScript library developed by Facebook. It lets you divide your app into user interface (UI) components. However, this is nothing new since React is just one of the many libraries that let you build components with JS. You can use other JS frameworks such as Angular or Ember for this as well. However, in contrast to Angular, which is a full-fledged JS framework, React is only a view layer. This means that it doesn’t care about routing, data flow or deployments. You need to use other libraries to be able to use these functionalities in React (e.g. Redux, React-Router). React is thus a simple composable component library.

“Hmm, ok. But what’s so special about React? ”

One of its greatest benefits is its speed and responsiveness that is related to the way how it manipulates the DOM. It uses the virtual DOM that compares the current state of the DOM to the updated state and determines the most efficient way to update the DOM. In contrast, jQuery updates the whole DOM every time, the state is changed (e.g. the button is clicked). Furthermore, React enables you to easily nest components inside other components and to pass data from the parent component down the child components via the so-called props.


Syntax

React code be written in the pure JavaScript or in so-called JSX syntax. JSX is JavaScript syntax extension that looks like HTML. In other words it extends ECMAScript in a way that HTML-like text can co-exist with JavaScript code. You can simply write HTML and JS in one file. In JSX you can write tags just as you were writing them in a HTML file. However, if you are writing JS code in JSX file, you need to surround your code with curly braces {}.

JSX must be always transformed into JavaScript by a preprocessor (typically by Babel.js). Otherwise, the JS engine won’t be able to understand this code. If you are writing your React code in ES6 syntax, Babel will translate it into ES5 as well.

As I already mentioned, you can write your React code with JSX or with pure JS. However, JSX syntax is easier to write and read and is more popular as well.

Example of a React code in JSX syntax:

1	var greetings = <div>Hello World</div>

The same code transformed by Babel into pure JS syntax:

1 2 3 4 5

var greetings = React.createElement(    "div",    null,    "Hello World" );

As you can see JSX is basically HTML syntax written in the JS code. In this way, the React differs from the Angular and Knockout frameworks, where you write JavaScript code into HTML which has some disadvantages. Primarily, it is difficult to debug it because, for example, if you make a typo in the mark-up, the app silently fails because HTML is not strictly parsed as JS is. On the other hand, React is written in JSX which is the JavaScript. This means that if you make a typo in JSX code, you will get an error referencing the particular line of code.


React. JS is :

• a simple composable component library

• fast and responsive

• easy to debug

See you in the next post…


If you like this post, or if you have any suggestions or critique, feel free to write a comment below. I will much appreciated that it.

I’m back!

Lately, I spend all of my spare time learning new technologies and unfortunately didn’t write any new posts.

But that period is over... I will bring this blog to life again!

From now on, I will make a new post every week. Furthermore, I will also write regularly about the interesting programming resources.

So, Stay tuned…