JavaScript knowledge helps you to learn about React.js
When I learn about React, sometimes I face to lack of Javascript knowledge which React needs to be understood. To resolve these kinds of problems, I wanna show some essentials about the important knowledge of Javascript.
I hope that would help you.
JavaScript Modules [ES2015]
Have you ever asked yourself these questions before, like “What is export default?” or “Why do I need to use import { App } from ‘./src/App.js’ here, although I use import hoge from ‘./src/App.js’ before?”? At least, I have the experience a lot. Since we have to use these terms of import/export a lot in any react project, I think we should know about this.
The functionality of JavaScript modules, introduced in ES2015, allows for the import and use of external resources.
This is a feature of JavaScript and not unique to React, a JavaScript framework.
Modules are used for maintainability, namespace, and reusability.
- Maintainability
To reduce dependencies on other modules by consolidating a set of highly dependent code (i.e., logic shared across projects) in one place. - Namespace
Each module has its own scope and does not pollute the global namespace. - Reusability
Useful variables and functions can be reused as modules without copying and pasting them into multiple locations.
These JavaScript modules correspond to a single JavaScript file, and variables and functions in it can be exported externally.
There are “Named” or “Default” for import and export.
01. Named export
Named export can export several variables and functions for each module.
02. Named import
Named import allows selective import by name from a given module. In the following example, a named import is performed by specifying the name of a named exported object from named-export.js. The import statement is followed by {}, which contains the name of the named export you wish to import. If you want to import multiple values, separate each name with a comma.
Named export/import has an alias mechanism. Aliases allow you to alias a declared variable to a named exported or named imported object with a different name. To add an alias, simply write the name you want to export after the “as” as shown below.
03. Default export
Default export is a special type of export that allows only one export per module. The export default statement defaults to the evaluation result of the subsequent expression, and the export statement can be preceded by a declaration to allow default export at the same time as the declaration. The function or class name can be omitted.
However, variable declarations cannot be declared and default exported at the same time. This is because a variable declaration can define multiple variables separated by commas.
04. Default import
Default Import imports the default exports for a given module by name; you can import the default exports by adding any name after the import statement.
In fact, default export is the same as named export with the unique name default. Therefore, you can also do a default export by aliasing the named export with as default. Similarly, in named import, the name of default corresponds to default import. However, since the default is a reserved word, this method must always be aliased using the as syntax.
Also, the named import and default import syntaxes can be written at the same time. The two syntaxes are connected by commas as follows.
bind method
When you get user input in a react project, you see the word “binding,” but what does “binding” actually mean?
When you pass an event handler to a component, you cannot do this,
React renders code each time it receives an action from the user. Therefore, if you do not bind the function when handling events, you will have the problem of executing functions indefinitely.
JavaScript’s bind method allows you to create a new function from a function using the keyword this. To understand bind, you need to understand the behavior of this in JavaScript.
In JavaScript, the following two pieces of code are not equivalent.
We can see that this is not determined by the content of the object being executed, but by the way, it is executed. In other words, the content of the object does not determine the reference to this. When “sampleB” is executed, the result is undefined because this refers to a global object (Window object in the browser).
By using bind, it is possible to specify which “this” is referenced.
It also explains the different behavior when using the Arrow function and standard functions.
Many may think that the result is the same in both cases, but the Arrow function does not allow you to change this even if you use bind. As a result, the result is the same before and after bind.
This is because this refers to itself in the Arrow function.
Since this points to itself, the same result is obtained regardless of whether or not it is bound to Alex, whose name is set inside the greeting.
Class Syntax
When learning React, many people, myself included, will be creating Functional components for our projects. Let’s take a look at the class component again to understand the fundamental mechanism of React, such as its lifecycle, and to deepen our understanding of class in JavaScript.
A class in JavaScript is a template, or actually a “special function” for creating objects, and can be defined in two ways: as a class expression and as a class declaration.
01. class declaration
To declare a class, use the class keyword with the class name. Unlike function declarations, no whistling is performed, so the class must be declared before accessing it.
02. class expression
Class expressions can be created with or without names. The name of a named class is treated as local to the unnamed class and can be accessed by the name property of the class (not of the instance).
The body of the class can use a variety of methods or keywords. Here are some typical (especially those that may be used within React) things.
03. Constructor method
A constructor method is a special method for initializing the object to be created in a class. Only one of these can be declared in a class.
04. extends
The ”extends” keyword is used in a class declaration or class expression to create a class as a child (= subclass) of another class. If the subclass has a constructor, super() must be called before “this” is used.
05. super
The super keyword can be used in this class to call a parent function. To call a method of the parent class, specify the method name.
06. static
A “static method” is a method that can be called directly from a class without creating an instance. For this reason, they are also called “class methods. The static keyword can also be used for properties, in which case they are called “static properties.
So far, I have covered several JavaScript knowledge that I actually questioned in learning React.
Even though I thought I had learned JavaScript, I often realized my lack of knowledge when I actually came into contact with its contents again through other frameworks.
It is difficult to understand everything at once, but when learning a new language, it may help you to understand it faster if you know at least the general framework of these knowledge.
