Welcome! If you're reading this, you have probably been told that React is the best thing since the internet. Or maybe you're a little React curious: you're coming from another front-end framework like Ember, Backbone, or Angular and wondering if there may be a better way. Perhaps you have thousands of lines of messy code written in jQuery and you know that there must be a better way. Unfortunately, this article will not be making grand statements about how React is the answer to all of your problems. However, you will be getting some suggestions and resources that will help you to build a solid foundation before you dive into the world of React development.

React is a very popular framework today, and rightfully so. Once you are comfortable with it, the experience of writing a web application becomes downright enjoyable. The community of React developers is vibrant. The pace of change in the framework is fast (maybe a little too fast at times) but well supported by Facebook and the open source community. Most importantly, it allows you to focus on simple pieces of functionality that can easily be composed and reused throughout your application.

I really enjoy writing code with React, and I want you to have the best experience possible as well. So before you dive into a React tutorial (like our free online React course), I have put together a list of five topics that are very important to understand before trying to tackle React.

1. JavaScript Fundamentals

Make sure you know your fundamentals! React developers like to use the latest and greatest features of JavaScript. If you find yourself still getting stuck on the basics and wondering things like: what are the primitive types in JavaScript, what are the falsey values, how do you access an object, then you definitely need to review your fundamentals. The best advice I can give you at this point is to take step back and practice. Trying to learn react without mastering the details of JavaScript will be difficult and probably not very productive.

Don't worry, there are plenty of resources out there to help. Rithm School has a free introduction to JavaScript course. Try going over all the exercises and making sure you can solve each one without peaking at the answers. Also, to help solidify concepts, a tool like Codewars is very valuable. Codewars is a community driven website where users post programming problems for others to solve. The site has many JavaScript problems to work on that range from beginner to very advanced. Make sure you work on level 7 and 8 katas before moving on to more advanced problems.

2. this

After you master the fundamentals, next up is the keyword this. Depending on what you do as a JavaScript programmer, you may have been able to avoid really understanding how to use this, but you'll bump into it often while dealing with code in React. This is another crucial building block that you need to understand in order to really master React.

To get started, take a look at Introduction To The Keyword this in Rithm School's Advanced JavaScript Part 1 Course. I would also be remiss not to mention Kyle Simpson's series of books on JavaScript, You Don't Know JS. This And Object Prototypes has lots of details on the keyword this.

3. Object Oriented Programming

This may be a bit of a controversial topic to include in this list. After all if you have heard about React, you have probably heard it mentioned in conjunction with functional programming (which is a much different programming paradigm than object oriented programming). Although some basic understanding of functional programming concepts are important for React development, I actually think React really clicked with me because it was so similar to object oriented programming (OOP) in many ways. Concepts like encapsulation and abstraction which are fundamental to OOP translate very well to React.

My advice here would be to build a few apps in vanilla JavaScript and design the code in a OOP manner. Simple games like tic tac toe or connect four are great candidates for your first project. You can find plenty of resources to get you started in the Object Oriented Programming chapter of our Advanced JavaScript Part 1 course.

4. ES2015 JavaScript Features

You could theoretically write a React app without knowing any ES2015 JavaScript features, but I wouldn't recommend it. The react community has embraced the latest changes in the language and for the most part I think it has lead to a much better developer experience. If you aren't familiar with the new changes, it will be hard for you to get up to speed on React. The Facebook documentation, for example, uses ES2015 JavaScript features without much explanation.

Here is a short list of features you will want to master before diving in: let, const, Object.assign, class syntax, arrow functions, rest and spread, and object destructuring. You can read all about these features in the ES2015 chapter of our Advanced JavaScript Part 2 course.

Codewars (mentioned earlier) is also a great way to get in a lot more ES2015 practice. Once you solve a problem on the site, you can see how all of the other users of the site solved that same problem. The majority of the popular answers take advantage of ES2015 JavaScript features.

5. Functional Programming Concepts

Last but not least is functional programming. The most important concepts from functional programming to understand is the idea of immutable data and pure functions. Data is immutable if you cannot change it once it has been created. React takes advantage of immutable data heavily since all props (a React concept) are immutable and state (also a React concept) should also be considered immutable and only updated with the React setState function.

Functional programming is a dense concept with lots to learn, but beyond learning about immutability and pure functions, learning more about functional programming may be more than you need to get started. To get a quick intro of just what you need to get started, check out our Introduction to Functional Programming chapter. If you get excited about functional programming, and you want to read about it in a lot more depth, then check out Professor Frisby's Mostly Adequate Guide to Functional Programming. The book will definitely give you a lot more depth on functional programming than you'll need to get started with React, but it is a valuable read if you have the time.

Wrapping it Up

That's all! Five topics that are sure to be a huge help once you get started with React. If you are feeling comfortable with all of the topics in the list. The next step would be to start making some applications with React. Rithm School's React Course is a great way to get started. Facebook's documentation also has a great getting started guide that you should check out. Good luck!