React/Redux… Where Do You Start?
When a new framework is as hot as React is right now, there seems to be a landslide of how-to videos and posts. It can be difficult for the bright eyed programmer to navigate through what is useful and where to start.
So the question lies, what is the best way to begin learning React/Redux? This article will help answer this question by walking you through some helpful lessons and exercises.
1# Begin with the Basics
First off, before you start learning how React/Redux operates, it is important to understand component based programming. If you work with older frameworks such as Angular 1, then this is a new concept. Rather than building out your website/app one page at a time, component based programming breaks up reusable sections into self contained code. Think about components as Legos that are used to build a Lego house. You can take blocks off here and there, while also reusing them on a different project.
So let’s start here with this definition from CSS tricks.
“Web Components are a collection of standards which are working their way through the W3C and landing in browsers as we speak. In a nutshell, they allow us to bundle markup and styles into custom HTML elements.”
Chrome offers the best support for native HTML elements, so I recommend reading through the article and practicing with the <template> tag. Start small then try to build together a larger component. Try to make a news feed from a JSON object using the same <template> element.
2# Understanding what is ES6, JSX, or React
Before you begin playing with React, I find this step very useful. I sidestepped this when I began with React and found myself feeling confused more often than I’d like. If you feel confident in your ES6 and JSX skills, then feel free to skip this step. If not, then spend some time reviewing each one.
JSX is referred to as, providing “syntactic sugar” for React components. It provides the ability to write HTML within your React components. Yes I said that right, HTML within Javascript. Read through React’s introduction on why using JSX within React is so helpful. This will help you differentiate between what is JSX and what is React.
Similarly, if you are new to ES6 you might begin working on some React components and think that the ES6 JavaScript you are using within the components are native to React. For example, when using classes within your component a new beginner might think this is a native React element. So take some time to read through Babel’s article about ES6.
3# Set up your environment
Sometimes programmers are kids waking up christmas morning. We jump into writing code without setting up our tools first. Here is a little checklist to go through to make sure you are ready to begin working on a React/Redux app:
Step four is important for getting started with React. This will set up a optimized React environment.
4# Let’s begin with React
Now that you have a basic idea of how React will work. Next up is learning and practicing. Now it is important to understand that React is only the V in the MVC pattern. It is not intended to be the complete package. That is why Redux is needed to complete the rest of the application.
It is really important you begin just with React at first. I cannot stress this enough to those that ask me about learning React/Redux. I find that having the React foundation is crucial to getting through Redux smoothly. This way you can get an idea of what is React and why you need Redux (or other Flux architectural frameworks).
If you completed step #3, you have something called React Storybook installed. This is a great place to begin practicing building React components. Read through and watch the following resources to begin to understand how components work within React.
After you’ve played around with the components, here are the next important steps before moving on to Redux. Build out larger more complex components that contain other components. You can now start building out your Lego house. Import and export modules to get a grasp on the power of these self contained blocks.
Once you have this down, the last tip I have is to build a simple app that contains state within the template. For example, make a todo app that simply adds tasks and allows someone to click on individual tasks to delete them. This exercise will teach you more about how state works within the component(s).
5# Now the Glue… Redux!
As I mentioned above, React alone cannot handle medium-large applications or websites. If you completed the todo app mentioned in the last paragraph, you’d notice that handling state within the component can get large and messy quick.
In an effort to control the flow of state and date, Redux provides the Flux architecture needed. Now as a heads up, if you thought getting through the React quarks was tough, Redux is generally considered much tougher to learn. There are many moving parts, elements, and needed files. Before you begin on the listed material, check out this article by Colt Pini about Redux architecture.
Now create a new local project and clone this handy React / Redux starter kit. I have tried to use Redux within the React Storybook but it is difficult to do. I’ve run into many issues trying to make it work, so it’s best to just set up another local project.
- Wes Bos Tutorial (PLEASE START HERE)
- Egghead.io (Redux)
- Redux Documentation
Please start with the Wes Bos tutorial as this one is very useful. I find that the egghead.io tutorial is difficult to follow along sometimes.
Once you’ve followed through the tutorial and created example projects, now it’s time for the final exam. Anyone can follow along copying someone’s code, the next step is to build out a simple app using React & Redux. Here are some simple project ideas (Remember to use your newly installed Dev tool extensions!):
- Todo app that allows for categories and time stamps.
- Calorie tracker that adds/minuses your daily intake based on food and exercise.
- Create a random cat gallery using a free cat API.
Conclusion
First of all, relax.. I’ve found that most people who begin working with React find it a long and complicated path. Especially those learning to change their way of thinking to program with components. I’ve read and heard many comments, “Why is there so much hype about React?” and “This doesn't seem to be that much better…?”. But I promise you that the more you work with it, the more you will come to see why Facebook, Netflix, Expedia, and other major websites/applications use React.
