Is there a better way to start a blog post than with plain and simple facts? Of course, there is but let’s do the Captain-Obvious routine anyway!
Note: A list of the additional resources is at the end of the post.
WHY IS REACT SO POPULAR WITH FRONTEND DEVELOPERS?
Given the fact that many companies are moving towards re-writing their frontend using it, React is likely to stay at the top of the UI library pyramid.
1. ECMAScript modules
React application is organized into multiple small files — modules which all together form a graph of dependencies. The connection between them is created by using different ways of importing the right code.
ECMAScript modules (or ES modules) provide an easy way to export and import parts of the code like constants, functions, components, etc. This way we can specify exactly which part of the module should be loaded.
2. The Document Object Model — DOM
Efficient DOM manipulation is one of the main challenges for the frontend technologies such as React. It is an expensive operation and tools are competing to develop a better solution for it and dominate the sphere of UI libraries.
React is top of the game in this regard. It uses VirtualDOM, which is a “virtual” representation of a “real” DOM state. It is saved in memory and synced with the real DOM by a library such as ReactDOM. To fully understand how VirtualDOM works, one must know what is and how does the real DOM work.
In React, classes are primarily used to create stateful components. In fact, it was the only way to do it until hooks were introduced.. Since there are many developers who still prefer to use class components and many projects that haven’t migrated class components to functional, it will be useful to know how classes work.
4. Array methods
Standard array methods like forEach, map, push, filter, some, etc., are widely used in React to manipulate data, so it is a good thing to be familiar with them before starting to learn and work with React. For example, map is used when we want to render multiple elements based on a collection of objects.
5. Spread operator
Spread operator takes in an iterable (e.g an array or object) and expands it into individual elements. In React it is widely used to create shallow copies of objects or to concatenate data from multiple objects or arrays. It provides a concise and readable code that enhances its use.
6. Destructuring assignment
7. Fetch API /Promises
Usually, our React applications require some data that we prepared on our backend services and exposed on RESTful APIs. To deliver that data to frontend applications we need Fetch API. Fetch API allows web-browser to make HTTP requests to web servers and fetch resources and data.
Calling fetch returns a promise that resolves to a Response object holding information about the server’s response, such as its status code and its headers.
8. Bindings and scopes
9. Arrow functions
Arrow functions are an ES2015 feature for a simpler way of writing functions. They have some limitations so they shouldn’t be used in every situation. Despite that, they are commonly used in React to solve the problem with methods binding or to create functional components.
10. Higher-order functions
A function that accepts and/or returns another function is called a higher-order function. Some of the examples of higher-order functions are already mentioned array methods forEach, map, reduce, filter.
Inspired by this concept, React has higher-order components (HOCs), an advanced technique for reusing component’s logic. HOCs are part of many famous libraries like react-redux, react-router, material-ui, etc.
These 10 features can help you fast-track your React learning curve.
Overall, React is a friendly UI library that can help you create extensive, complex and demanding graphical interfaces. It’s backed by Facebook, has a strong developer community gathered around it and there’s no shortage of learning materials. In fact, there’s a ton of reasons for you to learn React.
It’s up to you to start.