За последние несколько десятилетий появилось множество языков программирования для разработки внешнего и внутреннего интерфейса любого программного обеспечения. С большим количеством изменений на этапе разработки, одна из самых быстрорастущих и требовательных профессий в 2023 году основана на javascript. С помощью javascript (JS) мы можем легко изучить интерфейс (React, Vue, Angular) вместе с бэкэндом (Nodejs). Таким образом, очень важно иметь JS в своем наборе навыков в соответствии с текущим спросом на рынке.

Итак, в этой статье мы узнаем об основных js, которые необходимы для изучения React, который является одной из библиотек javascript. Начнем с минимально необходимых знаний для начала кодирования в React js.

Цель

  1. Введение в способы объявления переменных и констант
  2. Введение в способы создания функций (традиционные и стрелочные функции)
  3. Введение в компоненты Reactjs
  4. Введение в массивы и объекты
  5. Способы добавления или удаления элементов из массива
  6. Введение в операторы распространения
  7. Деструктуризация объектов

A. Введение в способы объявления переменных и констант

Прежде всего, поговорим об объявлении переменных в JS.

Мы можем динамически объявлять переменные и константы, используя три ключевых слова: var, let и const.

let x = 0;
var y = 10;
const z = 12;

Мы можем легко объявить и инициализировать переменные, используя var и let (я расскажу об их различиях во втором разделе), а const используется для объявления и инициализации констант.

Теперь давайте перейдем к другому разделу, т.е. к функциям.

B. Введение в способы создания функций (традиционные и стрелочные функции)

Способы написать функцию

  1. Старый традиционный способ
function oldWays() {
    console.log("Hello world from old function");
}


oldWays();

Старыми традиционными способами мы пишем имя_функции(параметры){}

2. Современный способ (функция стрелки)

Традиционный способ эффективен и также используется в сегодняшней практике, но с запозданием. Потому что после выпуска ECMAScript 2015, также известного как ES6, в игру вступили стрелочные функции, которые являются альтернативным использованием старого традиционного способа написания функций.

* Он широко используется в настоящее время.

const arrowFunction = () => {
    console.log("Hello world from arrow function");
}

arrowFunction();

Как видите, мы не используем function в качестве ключевого слова, вместо этого мы используем const nameOfFunction = (parameters) =› {}

Так что это в основном используется в настоящее время, и это обычная практика в React js, поскольку мы будем работать с множеством компонентов в React js.

Теперь позвольте мне показать вам разницу между var и let.

let ограничен конкретной областью действия, тогда как var не ограничен областью действия конкретной функции или файла. Вот пример

const initialize = () => {

    if (true) {
        let x = 10;
        var y = 10;
        console.log("Inside the scope")
        console.log(y);
        console.log(x); // This is inside if scope
    }

    console.log("Outside the scope")
    console.log(y);
    console.log(x); // You will encounter an error

}


initialize();

Код внутри области if будет отлично работать как для x, так и для y. Но когда мы пытаемся напечатать значение x за пределами области if (для справки, фигурные скобки {} определяют область действия), это покажет ошибку, что x не определен. Итак, если вы хотите, чтобы ваша переменная работала только внутри области видимости, в противном случае используйте var.

** В React мы в основном используем let и const

*Я использую vscode и node для тестирования файла js на локальном устройстве.

C. Введение в компоненты Reactjs

Нет ничего другого в создании компонента в react js. Это просто создание функции. Но при создании компонентов мы используем PascalCase, т.е. начальное слово должно быть заглавным вместе с соседними словами. Единственное отличие состоит в том, что мы говорим реквизиты вместо параметров и возвращаем теги html вместо любого другого значения.

const ComponentExample = (props) => {
    return <h1>Hello World</h1>
}

Если вы не понимаете этого прямо сейчас, просто оставьте это сейчас. Мы узнаем это в нашем путешествии. Я просто хотел, чтобы вы увидели, как мы пишем компоненты в React js.

D. Введение в массивы и объекты

Хотя мы работаем в реальных проектах или в реальной жизни, мы не просто работаем с числами и строками, мы в основном работаем с массивами и объектами.

Массивы: Массивы представляют собой набор нескольких значений одинакового типа в одной переменной.

Объекты: Массивы представляют собой набор нескольких данных в паре ключ->значение в одной переменной.

const objectExample = {
    "id": 1,
    "name": "ABC"
}

const arrayExample = [
    1, 2, 3
]

console.log(objectExample);
console.log(arrayExample);

Как вы можете видеть в приведенном выше примере:

В objectExample есть пара ключ-значение, где id — это ключ, 1 — это его значение, имя — это ключ, а «ABC» — это его значение.

В то время как в arrayExample мы храним только такие значения, как 1, 2, 3, где каждое значение разделено запятой.

Мы также можем хранить несколько объектов внутри массива.

const objectsInsideArray = [

    {
        "id": 1,
        "name": "ABC",
    },
    {
        "id": 2,
        "name": "BCA",
    },
    {
        "id": 3,
        "name": "CBA",
    }

]

Итак, если просто сказать, что массив содержит несколько похожих типов данных.

Объекты содержат данные одного компонента в разных парах ключ-значение.

Е. Способы добавления или удаления элементов из массива

Теперь давайте посмотрим, как добавлять или удалять элементы из массива и объектов.

Чтобы добавить элементы в массив, мы используем следующие параметры.

  1. Использование [индекс]
  2. Использование функции push

а. Использование [индекс]

const arrayInputExample = [
    1,
    3,
    4
];

arrayInputExample[1] = 2;

console.log(arrayInputExample);

Result: [1,2,4]

Этот код перейдет к конкретному индексу и заменит значение индекса новым значением. В этом случае значение индекса 1, т.е. 3, заменяется на 2.

* Массив начинается с 0

б. Использование push

const arrayInputExample = [
    1,
    3,
    4
];

arrayInputExample.push(5);

console.log(arrayInputExample);

Result: [1, 3, 4, 5]

Этот код добавит значение в конец массива. В этом случае «5» сохраняется в конце массива.

Чтобы удалить элементы из массива, мы используем следующие параметры.

  1. Использование функции сдвига
  2. Использование поп-функции

а. Использование сдвига

const arrayInputExample = [
    1,
    2,
    3,
    4
];

arrayInputExample.shift();

console.log(arrayInputExample);

При использовании сдвига первый элемент массива удаляется, а элемент возвращается.

б. Использование поп

const arrayInputExample = [
    1,
    2,
    3,
    4
];

arrayInputExample.pop();

console.log(arrayInputExample);

При использовании pop последний элемент массива удаляется, а элемент возвращается.

Способы добавления элементов в объекты

Чтобы добавить элементы к объектам, нам просто нужно использовать obj.newKey = value; Это создаст новую пару значений. Но если вы просто хотите заменить значение, используйте предопределенный ключ.

const ObjExample = {
    "id": 1,
    "name": "ABC"
}
ObjExample.name = "BCA";
console.log(ObjExample);
Result: { id: 1, name: 'BCA'}

Мы можем удалить пару элемент/ключ-значение из объекта, используя deleteключевое слово. Используйте удалить obj.key

const ObjExample = {
    "id": 1,
    "name": "ABC"
}
delete ObjExample.name;
console.log(ObjExample);
Result: {id: 1}

Итак, это простой способ добавления и удаления элементов из массива и объектов.

F. Введение в операторы спреда

Прежде чем двигаться дальше, я хочу продемонстрировать специальный оператор, который обозначается тремя точками (…). Он обычно используется при разработке js, и в основном мы используем операторы распространения в следующих случаях:

а. Добавьте два разных массива

б. Получите все пары ключ-значение объекта и измените его.

в. Добавьте два разных объекта, чтобы создать массив.

А. Добавьте два разных массива

let array2 = [ 
    1,
    2,
    3
];
let array1 = [
    4,
    5,
    6
]
let array3 = [
    ...array2,
    ...array1
]
console.log(array3);
Result:
[ 1, 2, 3, 4, 5, 6 ]

Как видите, мы создали два массива array1 и array2 и используем операторы расширения, чтобы скопировать все значения из массивов1 и массив2 в массив3.

** Обратите внимание, что массивы копируются в том порядке, в котором они хранятся, а не в соответствии со значением.

Б. Получить все пары ключ-значение объекта и изменить

let obj1 = {
   "id" : 1,
   "name": "ABC",
    "age": 30
}
// Copies all the properties of obj2 to obj4
let obj2 = {
    ...obj1,
}
// Copies all the properties of obj1 to obj3.
// Then change the value of id
let obj3 = {
    ...obj1,
    "id": 5
}
console.log(obj1);
console.log(obj2);
console.log(obj3);
Result:
{ id: 1, name: 'ABC', age: 30 }
{ id: 1, name: 'ABC', age: 30 }
{ id: 5, name: 'ABC', age: 30 }

Как вы можете видеть в приведенном выше коде, в obj2 мы использовали только оператор распространения, который создает точную копию obj1 без каких-либо изменений. Итак, во втором случае obj3 мы использовали оператор распространения, чтобы скопировать все свойства obj1, а затем изменили значение id на 5.

Г. Деструктуризация объектов

Наконец, мы собираемся получить доступ к различным элементам объектов, разрушая объекты.

let obj1 = {
    "id": 1,
    "name": "ABC",
    "age": 30
}

// You can use obj1.id
console.log(obj1.id);

// or you can destructure and use it as 
let { id, name, age } = obj1;
console.log(id);

Так как вы можете использовать obj.key или вы можете деструктурировать объект, используя фигурные скобки и имя ключа.

Это все для этого раздела. Это некоторые основы JavaScript, которые вам нужно знать, чтобы начать программировать в React JS. В ближайшее время я буду загружать статью на карту, фильтровать и уменьшать действия в массиве, а также в отношении выборки и обещания вызывать данные с сервера в реакции js. А пока наслаждайтесь изучением новых вещей.