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!
We can all agree that JavaScript is the most popular programming language in the world. We could also agree on the fact that libraries and frameworks are indispensable elements of any efficient JS programming task.
According to theState of JS survey, the most popular JavaScript library for building frontend applications is React. And it has been for five consecutive years.
Note: A list of the additional resources is at the end of the post.
WHY IS REACT SO POPULAR WITH FRONTEND DEVELOPERS?
Since its initial release in May 2013, React has seen a steady incline, followed by an ever-growing number of job opportunities. A part of its appeal and user adoption is due to its non-complicated architecture, based on a lot of native JavaScript features.
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.
If you are new to frontend development or you want to make a transition from another frontend technology, we’ve compiled a list of 10 JavaScript features to help you jumpstart your React basics!
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 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 it is and how the real DOM works.
3. Class
One of the most popular features introduced in the ES6 version was JavaScript classes. Classes represent templates for creating objects; they define which properties and methods the object will have.
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, a map is used when we want to render multiple elements based on a collection of objects.
5. Spread operator
The 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 concise and readable code that enhances its use.
6. Destructuring assignment
Destructuring assignment (often called just destructuring) is a JavaScript expression used for unpacking values from arrays or properties from objects into separate variables.
7. Fetch API /Promises
Usually, our React applications require some data that we prepare for our backend services and expose to RESTful APIs. To deliver that data to frontend applications, we need the Fetch API. The Fetch API allows web browsers 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
When building class components, beginners usually encounter a problem—the context of the class methods is not the expected one( from the component). We need to manually bind the component’s context to the method. This is expected behavior because of JavaScript and how it is treated.
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 problems with method 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 as array methods for each, map, reduce, and filter.
Inspired by this concept, React has higher-order components (HOCs), an advanced technique for reusing components’ logic. HOCs are part of many famous libraries like react-redux, react-router, material-UI, etc.
THERE ARE NO SHORTCUTS — GET TO KNOW JAVASCRIPT
These 10 features can help you fast-track your React learning curve.
However, if you want to do more complex tasks, eliminate errors, and gain a better understanding of how the code works, there are no shortcuts. You’re going to have to put in the work and learn how JavaScript works, especially those tricky, illogical parts.
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 are a ton of reasons for you to learn React.
It’s up to you to start.
Additional resources:
- ES Modules https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
- DOM and VirtualDOM https://eloquentjavascript.net/14_dom.html https://reactjs.org/docs/faq-internals.html
- Classes https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes https://eloquentjavascript.net/06_object.html#h_7RhGr+474h
- Array methods https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
- Spread operator https://www.geeksforgeeks.org/javascript-spread-operator/
- Destructuring https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- Fetch API, Promise https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API https://eloquentjavascript.net/11_async.html#h_sdRy5CTAP/
- Binding, scope https://eloquentjavascript.net/03_functions.html#h_XqQR5FlX+8 https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/
- Arrow functions https://eloquentjavascript.net/03_functions.html#h_/G0LSjQxoo https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- Higher-order functions https://eloquentjavascript.net/05_higher_order.html