Three years ago, our co-founder and lead instructor Tim, wrote a wonderful post on 5 Topics to Master Before Learning React. Since then, React has evolved tremendously and has only continued to become more and more popular. In this post, we’ll revisit some of the essential JavaScript features you should be comfortable with before learning new frameworks, especially the most recent major change in React, React Hooks.

If you have never heard of React, it is a JavaScript library for building user interfaces. The library is used exclusively for front-end web development and is maintained by Facebook. Once you are comfortable with it, the experience of writing a web application becomes downright enjoyable, especially with the latest major changes to React. The pace of change is still quite 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.

However, like most new libraries and frameworks, React has a learning curve that can be steep if you’re unsure about JavaScript fundamentals and essential concepts in the language. So let’s go through some topics to master before you move onto hooks. 

1. JavaScript Fundamentals

Just like in the previous post – this one still applies! As always – make sure you know your fundamentals! Before learning any library or framework in JavaScript (or any language for that matter), it’s essential to have a strong grasp on the fundamentals. This includes:

• Data types in JavaScript (primitives and objects)

• Conditional logic, truthy and falsey values (including ternary operators)

• Arrays, Objects, and Functions (this includes callback functions and array methods like map, and filter)

• Debugging techniques (using console.log and the debugger keyword)

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 peeking 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. New(ish) JavaScript Features

The React ecosystem is always on the cutting edge when working with the latest features in JavaScript. This includes:

• Let and const (and understanding what block scope is)

• Template strings 

• The rest and spread operator (with arrays and objects)

• Arrow functions (you will see these everywhere)

• Array and Object Destructuring

• The `class` keyword (although React hooks do not use this, you will see older documentation using the class keyword, so an understanding of that syntax is essential)

• Async / await and Promises (you do not need to be an expert, but know what the `await` keyword does and when/where you can use it)

• ES2015 modules (this is a must-know)

You could theoretically write a React app without knowing some of these features, but again, we wouldn’t recommend it. You will see all of these features in documentation, stack overflow posts, and tutorials. While this introduces a bit more complexity, it is something you’ll need to learn no matter what!

Codewars is also a great way to get in a lot more JavaScript. 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 the latest JavaScript features.

3. Terminal and web basics

When getting started with React, you will almost certainly be using a command-line utility called `create-react-app`. This tool will scaffold a React project so that you do not need to worry about all the tooling and installations to get started. This utility is commonplace in the React community, but it does require some comfort with the command line and an understanding of web basics.

In order to use `create-react-app`, you will need to have Node installed as well as a tool like npm or yarn. While you don’t need to be an expert with these technologies, you should have some familiarity with installing packages with npm and yarn and how to navigate in the terminal.

Aside from comfort in the terminal, you should be familiar with programming applications in the browser, DOM manipulation, adding event listeners, and working with AJAX. While you will not be (almost all of the time), using the `document` object or methods like addEventListener, it’s essential to understand what the DOM is and how to manipulate it, so you can learn how React accomplishes the same thing.

With most front-end applications, you will be making AJAX requests so you should be comfortable with asynchronous code and using libraries like axios or Web APIs like fetch to make HTTP requests.

4. Functional Programming Concepts

Functional programming is a massive topic, and fortunately, you do not need to know a tremendous amount to get started with React, but a fundamental understanding will get you quite far. 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) can only be updated with React. Functions like `map` and `filter` which are pure functions and return a new array to you are essential to understand and master so make sure you are quite comfortable using these common array methods as well as methods to make copies of arrays and objects.

5. Scope and closures

Last but not least is one of the more challenging concepts, scope and closure. With the introduction of hooks, React has moved away from using the `class` keyword and more towards using explicit functions to create your interfaces. This not only means that you need to have a grasp of how functions work, but also how scope works in functions. You should be able to discuss what scope is, and how variables can or cannot be accessed depending on where they are defined. 

The other topic you need to at least have a fundamental understanding of is closures and this is probably the most tricky concept to wrap your head around. While you will not need to be explicitly writing closures when using the latest version of React, you will be making use of them under the hood. Understanding the purpose of closures and what they allow you to do is essential for mastering hooks like useState and useEffect.

React abstracts so much of this idea so without an understanding of what closures are, you are relying on something that seems magical, which may be nice to start, but not feasible when you have to debug issues and fix something. 

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 on the list. The next step would be to start making some applications with React. The React docs are a wonderful place to start learning about the framework as well as hooks. When getting started with React, don’t worry about additional technologies like Redux, TypeScript, or GraphQL. These other technologies are quite popular and are common in the React ecosystem, but you can easily get started with React and not worry about these for now. As with learning anything new, be patient as you start and take your time going through concepts, building applications, and debugging. Good luck!