3 Basic JavaScript concepts to start your React Journey: ...

As the title suggests, we're going to look at three fundamental JavaScript concepts that will help you start your React learning journey. These aren't the only concepts you'll need to learn but understanding them will make learning React much easier.

React is powerful and can be utilized to its full potential when we have concrete understanding of JavaScript. In this part of series, the first three concepts will be

Destructuring
Speard
Template literals

Destructuring:

Destructuring in JavaScript lets you unpack values from array or properties from objects and assign them to individual variables.
Destructuring can also work with any iterable value but I will be focusing on Array and object.

Array destructuring:

const arr = ['red','blue','orange'];

const [c1,c2,c3] = arr;

console.log(c1);

In the example above the list of three colors are destructured into three different variables.
output: red.

const [c1,c2,c3] = arr;

The code above assigns the first three values of the array to separate variables. You can choose how many values you want to extract, and you can even skip values if needed.

const [first, , third] = arr;

Here the second value is skipped.

But what if we want to only take first value and rest to another list. We can achieve that by REST operator.

const arr = ['red','blue','orange'];
const [c1,...c2] = arr;

console.log(c2);

Here any number of values that present inside the array after the first value will be assigned into the c2 variable as new array.
output: ['blue','orange']

Where do we use this in react, Array destructing is used in react hooks.

const [value,setValue] = useState('');

The usesate hook returns an array which contains value and setter function for the to be set.
Array destructing are common in react hooks. Understanding them is important when working with customs hooks.

Object destructuring:

When destructuring objects, we extract values using their property names. The variable names must match the property names. And curly brackets are used instead of square ones.

const person = {name:'Roy',age:28};
const {name, age} = person;

console.log(name, age);

output: Roy 28

When working with multiply objects that contains same property names, destructuring those objects cause error as we use the property names to destructure them. Here renaming or aliasing can help.

const product = {id:1,name:"Bread"};

const {id:productId,name:productName} = product;

console.log(productId, productName);

output: 1 Bread

The rest operator also works with objects same as array. It collects all remaining properties into a new object.

When is object destructing used in react. In react props (properties) are passed from parent to child components. the props we pass in parent are received in child as a whole object. In child component, the props can be destructed and utilised inside the component.

Speard:

const arr = ['car','bike'];
const vehicle = [...arr, 'truck'];

console.log(vehicle);

output: [ 'car', 'bike', 'truck' ]
Speard operator is used to speard (take values out) and place it in new Array. This operation do not affect (mutate) the original array in any way.
speard is broadly used to take shallow copy of an array or object. In the above example an array is speard and new array is created with adding new value truck.

speard in objects

const obj = {name:'roy', age:28};
const obj2 = {id:1, ...obj,};

console.log(obj2);

output:{ id: 1, name: 'roy', age: 28 }

Speard in object works same as in arrays. But in objects, the properties can be edited with new values. this is very useful in react when working with state values containing object.

const obj = {name:'roy', age:28};
const obj2 = {id:1, ...obj, age:35};

console.log(obj2);

output: { id: 1, name: 'roy', age: 35 }. Age value is updated.

Not only adding or overriding property values but merging of two array or objects can also be done.
const colors = {...lightColors, ...darkColors}. results in a single object containing both the objects.

In react, speard is widely used to copying one array or object to new one. Mutating the same array or object may cause errors or confuse react and introduce bugs.

| Both rest and speard used ... - know the different and use accordingly.

Template literals:

Template literals (template strings) are strings enclosed by backticks
instead of single (') or double (") quotes.

const name = "John";

console.log(`Hello ${name}`);

output: Hello John

why use template literals, instead of +. like below.

const name = "John";
const age = 25;

const msg = "My name is " + name + " and I am " + age + " years old.";

but in template literals

const msg = `My name is ${name} and I am ${age} years old.`;

Template literals are introduced in ES6 (JS 2015 release), with bunch of other features like arrow functions. And it is easier to use template literals in situation like above.

In react, Template literals are used everywhere because React often needs to build strings dynamically from state, props, and variables. And used inside different elements and even in dynamically add class names to html elements like example below.

function Button({ isActive }) {
  return (
    <button
      className={`btn ${isActive ? "active" : ""}`}
    >
      Click Me
    </button>
  );
}

active class is added to button element conditionally.

In this part 1, we looked at only three concepts but many more concepts from JavaScript are broadly used in React. In the end React is just a JavaScript Library.

推荐订阅源

DEV Community