5 Topics To Master Before Learning React Hooks July 28, 2020
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)
Let and const (and understanding what block scope is)
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!
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!
Written by Elie