I was going through my email recently when I came across an article that caught my attention. It was about a team of .NET developers that learned Node.js and React while building a product. The following reflection stood out to me:
The philosophy of React is totally different to anything we have worked on so far. We were in a constant fight with it. One of the problems was finding the correct source of truth. There are so many different articles and tutorials online, some of which are no longer relevant. React documentation is OK-ish, but we didn’t want to invest too much time going over it and opted for a quick start instead.
For the past two+ years I’ve worked exclusively on React projects and I’ve had my own up-and-down learning experience with it. Over that time, I’ve developed some advice for how to learn React—the resources, the sequence and the important takeaways.
What follows is a five-step plan for learning React. All of the steps point you to free resources whenever possible.
Finally, we finish with an “other things to consider” section. You’ll often hear people say that React is just a view library. While that’s true to some extent, it’s also a large and vibrant ecosystem. This last section will touch on important things to know or consider that aren’t covered in the five main steps. These things aren’t essential to building something real and significant, but you should look into them as you continue learning how to build software with React.
Step One - React Documentation + Code Sandbox
Yes, you should start by reading the React documentation. It’s well written and you’ll understand the essential terminology and concepts by the time you’re finished. The link I shared above points to the first section of the documentation on installation. There is a link there to a CodePen to help you get started.
An alternative that I prefer is Code Sandbox. I think it gives a better feel for a basic React application. You can use it to try things out as you work through the docs.
There is another option on that page under the “Create a New App” tab, which is to use Create React App to build a development environment on your local machine. Create React App is a great tool and perhaps using it right away will help you. Everyone has a learning approach that works best for them.
Personally, I feel it adds mental load right as you’re getting started. My advice is to stick with Code Sandbox or CodePen when you’re beginning and focus on fundamental concepts instead of the development environment. You can always circle back later.
Key Takeaways
My recommendation is to read the Quick Start and Advanced Guides sections. I know not everyone likes reading documentation, particularly those that are visual or auditory learners. If you’re struggling with getting through those, then the key areas to focus on are in the Quick Start:
- Introducing JSX
- Rendering Elements
- Components and Props
- State and Lifecycle (super important!)
- Handling Events
- Composition vs Inheritance
- Thinking In React
Again, my advice it to read the full two sections, but at a bare minimum, power through the areas in the list above. They include basic concepts that you will need.
Step Two - React Fundamentals Course
After Step One, you should have a gist of what React is all about. Maybe not everything is clear, but you’re starting to see some of the concepts take shape in your mind. The next step is the React Fundamentals course from React Training. It’s free and it’s good. The instructor is Tyler McGinnis and he’s both knowledgeable and easy to follow in his instruction.
Why this course? If you’re more of a visual or auditory learner, this will help you. It covers the basics as well as introduces key things that you’ll need to build something real—like webpack and fetching remote data.
By the end of the course you will have what you need to build a basic React application. Depending on what your goals are in learning React, you may even have all the information you need upon completing this course. Most of you—those learning React to build client projects—will need to keep going.
UPDATE: Weird things happen and this course went behind a pay wall on the same day this article was published. I reached out to Tyler and it turns out he has launched a new venture and can no longer offer this course for free. The single month cost of a subscription for his new site is $20, less if you sign up for an annual plan. That said, I still recommend this as Step Two and here's why:
- The course quality is high.
- There are no comparable free resources (but I'll provide two suggestions in a moment if you can't afford this course)
- It's idiomatic React.
Remember the development team that struggled to learn React that I mentioned at the beginning of this post? The were having trouble finding resources that pointed them toward the "right" way of doing things. Tyler shows you the right way.
If this course is not in your budget, here are a couple free alternatives:
- React Fundamentals on egghead.io by Joe Maddalone.
- React JS Tutorials by LearnCode.academy on YouTube (through tutorial #8, skip the Flux stuff for now)
These two aren't a perfect substitution for Tyler's course, but they'll get you 80% of the way there.
Key Takeaways
With these courses you’ll want to come away with a handle on the following:
- Re-enforcement of principles from React docs
- Intro to the build tools for React projects, particularly webpack
- Stateless functional components
- Routing (how you navigate from one “page” to the next)
- Fetching async data
Another Option
I’ve heard nothing but good things about the courses Wes Bos creates. If you have the budget, his React for Beginners may be something to consider. It’s not cheap, though. Depending on the option, it’s $89-127. If your employer is paying, it may be helpful. To get a feel for how he teaches, check out his free course, JavaScript 30.
Step Three - Read ReactBits
The next step is ReactBits, a wonderful resource from Vasa at WalmartLabs. This isn’t a book, really. It’s more a series of tips - in a very useful outline format—that can help fill in the gaps left by other tutorials.
Key Takeaways
There is gold here. And it’s a resource that gets regularly updated so you can return to it as React continues to evolve. Again, I encourage you to read all the tips, but if you struggle with it, here’s what to focus on:
- Design Patterns and Techniques (most important tip is probably this)
- Anti-Patterns (if nothing else, read this section)
- Perf Tips
Another great thing about ReactBits is that each tip includes references so you can do more research on the topic yourself - or at least understand why the author thinks it’s a best practice.
Architecture Interlude
Thus far we have identified resources that will teach how to create simple applications. Before we continue, however, we need to pause to consider what happens when a React application becomes more complex. As a React application grows, common problems often arise. For example, how does one share state across multiple components? How can one clean up API calls that have been scattered throughout the app as functionality has been added?
Facebook came up with an answer to these questions—the Flux architecture. Some time later, Dan Abramov created an implementation of Flux he called Redux. It has been hugely influential in the React community and beyond. Facebook liked Dan’s work and subsequently hired him as part of the React team.
I recommend you learn Redux, but you should know there are other options, most notably, MobX. I’m not going to do a Redux vs. MobX run down in this post. I will only note that the general consensus is that MobX is typically easier to learn, but Redux is better suited to larger projects.
One of the reasons Redux is viewed as especially suitable for large projects is that, much like React itself, Redux is more than the simple library it is often billed as. It is also an architectural pattern that can bring a lot of predictability to your app. On a big project with lots of moving parts (and developers), this is a tremendous asset.
One final thing to note about Redux is it also has a very robust ecosystem around it. Redux supports middleware and there are a large number of libraries that can add debugging (with time travel), data handling, user flows, authentication, routing and more.
I encourage you to learn Redux. If you take a look at it and decide it’s not right for you, then MobX may be something that will work better. These are just tools. Use what helps you.
I’m including a talk below by Preethi Kasireddy from React Conf 2017 on Redux vs. MobX so you can get a feel for the pros and cons of each.
One last thing on architecture…
If it feels like Redux or MobX are too heavy for your application, consider the container component pattern. It can tidy things up by separating logic from presentation. It can help you see at a glance where API calls and other logic resides and may be all that you need to improve the organization of your app.
Step Four - Redux Documentation + Redux Video Series
The documentation for Redux is good and you should start there. One thing to note is that Redux uses a functional programming style and if you’re coming from a Java or C# background, there may be some unfamiliar syntax. Don’t worry about it. If you see something weird, set it aside. After you’re through with this step and the next, you’ll have a handle on it.
There is a series of videos called Getting Started with Redux by Dan Abramov. They’re available for free on Egghead.io and they’re a good resource. I have a colleague who thought that the videos made the documentation easier to understand. If you learn better from video tutorials, then start with them, but be sure you go back to the docs. The documentation has information that will help you and is omitted in the videos.
Key Takeaways
The thing you want to have at this point is not mastery, but a basic handle on Redux terminology and concepts:
- Three principles of Redux
- Actions
- Reducers
- Data flow
- Usage with React
- Async actions
- Async Flow
- Middleware
Go through these resources and if, when you’re finished, you feel like you somewhat get it, then you’re on track. Redux has an easy/hard thing to it at first. The individual pieces are mostly easy to understand. Putting them all together in your head often takes a bit more time. The resources in the next step will help with this.
Step Five - The Complete Redux Book + Redux Video Series Part 2
There is a great book on Redux that can be had for free, The Complete Redux Book. This is a book written by developers who are building serious React applications. It will help you learn how to architect your application and go deep into the concepts introduced in the previous step. It will also help you understand the basics of functional programming and make working with Redux easier.
Note that this book is on LeanPub and the suggested price is $32, but you can get it for free. If you have the money, consider paying. The authors have done a very good job and it’s worth the money.
The next resource is a second video tutorial series by Dan Abramov —Building React Applications with Idiomatic Redux. There is overlap between these videos and the book. What you choose to do here will depend on how much time you have and what learning style best suits you. If you can, do both.
Another Option
There is a book that runs $39 called FullStackReact. It’s $79 if you want all the code samples and a three hour screencast. I haven’t read the book, but one of the authors is Tyler McGinnis. I recommended his work in Step Two.
This might be worth a look if you have the funds. One thing I’m cautious about is the emphasis on GraphQL and Relay. Those two technologies—particularly GraphQL—are interesting. They are worth learning. However, if you are going to be building an app that uses a REST API, then maybe postpone the purchase.
Key Takeaways
Congratulations - this is the final step! At this point you should have:
- Re-enforcement of principles from Redux docs and/or first video series
- Understanding of basic functional programming principles
- Understanding of creating and writing Redux middleware
- Understanding of how to architect a React + Redux application
Of course, when it comes to software, our learning is never complete…
Other Things
Learning how to build JavaScript applications can be difficult, particularly if you need to build enterprise software. It doesn’t matter if it’s React, Angular or some other framework or library. However, if you’ve gone through these five steps, which should take a dedicated student about a week, then you have the basic tools you need to get started.
There are a few other things about the React ecosystem I’d like to share that can be the subject of future learning. I won’t go into too much detail, but be aware that you may run into these sooner or later, depending on your projects.
Webpack
Webpack is the primary bundler tool for React applications. It’s discussed in the React Fundamentals course, but you’ll probably have to go deeper at some point. You can use another tool, but finding examples if you get stuck may be difficult. A good, free introduction is this presentation by Emil Oberg and it includes a link to the code he writes in the video.
Another good resource—not free—is Webpack 2 the Complete Developer’s Guide by Stephen Grider. This is a good course and is available on Udemy for $10-75. Udemy frequently offers discounts on courses, so you should be able to get a good deal on it.
Server Rendering
Most JavaScript frameworks do not support server rendering without additional work. Server rendered apps are also referred to as isomorphic or universal applications. At Lullabot, we do a lot of websites with React and that makes server rendering essential. If you’re not familiar with the issue, server rendering builds the initial page on the server before sending it to the browser. This is important for two reasons.
First, search engines don’t render JavaScript. If you don’t have server rendering set up then it’s typically a big hit for your SEO. Meta tags and body content will likely be missing. Not good if you want your app to show up in search results.
Second, it helps with the performance of the app. If you’ve already done an initial render on the server, your page will load up with the initial content while the rest of the app loads in the background. Without server rendering, all of your JavaScript has to first load into the browser and then render. It’s slower.
With regard to server rendering with Redux, the docs are a good place to start. Another free resource you may find helpful is this post from Emil Ong on Hacker Noon. When I first learned about server rendering, I pieced it together from many different sources. One book that might help is Isomorphic Application Development with JavaScript by Konstantin Tarkus. It costs about $32 for the Kindle version.
If you need server rendering and your head feels full from too much learning, you might consider Next.js which I will discuss shortly.
Redux Saga
Redux Saga is middleware for Redux. It acts as a single place for side effects in your application. Side effects are often asynchronous things like data fetching and keeping them contained is an important concept in functional programming—something that is big in the React community.
Using middleware like Redux Saga can help with the architecture of your application. It will certainly make writing tests easier (see Jest and Enzyme to learn more about testing React apps). The downside to Redux Saga is that it adds more mental load, particularly if you aren’t yet familiar with ES6 generators. In the long term, however, it’s a good investment. Consider learning it and other Redux middleware once you’ve got a firm handle on the content in the five steps.
Reselect
Reselect is a selector library for Redux. It can help improve performance by computing derived data. For example, if you have an item in your Redux store that needs be calculated, it won’t recompute unless one of the arguments changes, preventing unnecessary re-rendering. This can be useful for shopping carts, “likes”, scoring, etc.
App Scaffolders
At the beginning of this post, I mentioned Create React App. It’s an app scaffolder. It can help you get started building an app very quickly. I leave it to you to read up on it, but one potential downside is that it doesn’t have server rendering. If you want that, you’ll have to add it on your own.
Another option is Next.js from Zeit. I haven’t used it, but it looks interesting. Maybe it could help you get started. It’s sort of a framework within a framework (React). It does a lot for you and as a result, is opinionated, but there are good docs for it. My concern would be the “black box” nature of it. I would need to understand the internals well before I felt confident using it on a client project. I’d be interested to hear from anyone that has experience with it.
Update Oct. 25th, 2017:
Simple React Patterns is a new article that provides a good review of some common React design patterns. Don't worry if these don't all seem "simple" to you. Some of the things discussed are often a bit challenging to get your head around at first. However, the article is a good resource and definitely worth a read.
And Finally…
Thanks for hanging with me. This was a long post. I wish I could have have written a post called, “How to Quickly Learn React in Five Easy Steps,” but that’s not how it goes. There is a lot to learn and the learning never stops. It’s something I like about software development, but there are times it can be stressful.
If you’ve found yourself on a React project and you feel like you’ve been thrown in the deep end, hang in there. The React community is large, active and helpful. More than any other JavaScript framework, React will help move your career forward. Stick with it and have fun.
Have a React project you'd like help with? Looking for a React architect? We'd love to help. Feel free to contact us.