Introduction About React Variable Declaration:
React JS is an illustrative UI library for creating user-interface. It is an open-source javascript library used to build high-end responsive UI for web applications and native applications which can be accessed using a web browser application present in your device. React JS permits to build summarized components that handle their own position. It provides easier programming models and great performance. React JS is used to create web applications and even mobile applications with help of React Native Extension. It is all managed by Facebook. From creating the components to import and export, all together make it effective. ReactJS is known for its performance and with the help of the virtual DOM concept, the rendering of components becomes faster. Now, due to the underlying XML or HTML syntax, the power of ES6 and the technique of virtual DOM makes React one of the best frontend libraries out there.
What are the variables?
Variables in React JS contain reusable data. It is used to store the data in the foundation of language and works as a container for data values. Variable in JavaScript indicates as var, let, and const. The new version of JavaScript known as ES2015 (ES6) allows the use of const and let. Use “const” when the value will not be changing, it shows an error if the value does change, and use “let” if the value will be changing.
It can be created in three different parts:
React Variable Declaration –
In this, the variable is entered in its relatable scope. The scope of a variable is “the location, where a variable can be used”.
Example.
var x;
var car;
var glass;
Variable Initialization –
It occurs after the declaration of a variable. Here, a variable is given a value or memory by the JS engine, like undefined. There are two types of variable initialization, explicit and implicit. Explicit initialization takes place when a variable has given value in the declaration statement. Implicit initialization occurs when a variable has given value while processing.
Variable Assignment –
It is an important step while using a variable. Here, we use standard JS data types as values such as String – store text such as “Hi”
Boolean- stores value with states either true or false
Number, Null, and Undefined.
Rules for naming variables
- The first letter must start with an underscore ( _ ) or with any letter. It should not start with a number or any other symbol
Eg: var color = “Red”;
const _numberOfTimes = 100
are valid declarations in ReactJS
Eg: 2big or #color
are invalid declarations in ReactJS
- A variable cannot have the same name as that of a keyword.
Eg: var const
const include
as the ‘const’ and ‘include’ are reserved in the ReactJS library and have a separate purpose of their own.
- A variable is case sensitive. This means that ‘apple’ and ‘Apple’ in ReactJS are not the same. They both refer to different variables.
Eg: var newColour = “blue”
var Newcolour = “green”
are two different variables with different or same values.
Containers for values
Variables are containers that store some values which can be accessed later in the scripts or code using their container name.
ReactJS allows three types of containers for storing values.
- var
- let
- const
Declaring variables using ‘var’
The var keyword is used to declare a function scoped or globally scoped variable.
Syntax:
var name1, name2, …….;
A function scoped variable is the one, which is accessible within a function and have no reference outside the function body.
Eg:
function foo() {
var x = 10; // numeric type
console.log(x); // prints value of ‘x’
}
foo();
console.log(x); // error
A global scoped variable is the one, which is accessible to any function or any part of the file.
Eg:
var x = 10;
function foo() {
console.log(x); // prints value of ‘x’
}
foo();
console.log(x); // prints value of ‘x’
Declaring a variable without the var keyword can make the variable global irrespective of where it has been reported. Hence it is recommended not to declare variables in this way as they may override another global variable’s value.
Declaring variables using ‘let’
The let declares block-scoped local variables. We can declare more than one variable in a single line, and this applies to other types as well.
The declaration syntax follows:
let var1, var2,…….. ;
The initialization of these variables is optional.
Block scope is the area within the conditional statements like if and switch, and loops like for and while.
Accessing the let variable before its declaration will raise an error as unlike var. They are not initialized to ‘undefined’.
Eg:
let x = 1;
function foo() {
let x = 3;
console.log(x); // prints 3
}
foo();
console.log(x); // prints 1
Eg:
let x;
console.log(x); // error, as X is not assigned a value
Declaring variables using ‘const’
const is used to declare constants in ReactJS. As, the name states, the react variable declaration are constants, and once assigned a reference (not value), it should never be changed throughout the application’s running state. Constants are block-scoped just like let. Also, constants cannot be redeclared.
The const keyword doesn’t define a constant value, rather a constant reference to a value.
Syntax :
const name1 = value1, name2 = value2, ….;
Eg:
const myBirthDate = 1; // correct
const notMyBirthDate;
notMyBirthDate = 2; // incorrect
Eg:
const x = 5;
x = x + 7; // error
const also allows multiple react variable declaration in a single line. However the only catch is, one must provide values to each declaration at that moment only.
Eg:
const NUM = 6, value = 10; // correct
Variables inside functional components
Since ReactJS provides functional components, they also include a declaration of multiple react variables and constants. The most salient feature of functional components in ReactJS variables is that their usage in the JSX doesn’t require binding with the ‘this’ keyword. That is, we need not use the ‘this’ keyword before accessing any state, props, constant or variable present inside the functional component.
Eg:
function Car() {
const myColor = “red” ;
return <h2>Hi, I am also a {myColor} Car!</h2>;
}
Variables inside class components
ReactJS also provides class based components, but accessing the variables, props, states or constants inside the class requires the use of ‘this’ keyword, before the variable.
Eg:
class Car extends React.Component {
constructor() {
super();
this.state = {color: “red”};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
Conclusion
In this way, we can utilize the knowledge of ReactJS variable declarations and the effective way to use them inside our application.