10 концепций JavaScript для начинающих React

React — это внешняя библиотека Javascript, и если вы хотите сначала начать работу с React, вам необходимо изучить Javascript, язык программирования, на котором работает React. Javascript сам по себе является огромным языком, и вы не можете выучить его все, пока не изучите React. Но не бойтесь, в этой статье объясняются 10 концепций Javascript, которые вы должны усвоить, прежде чем переходить к React.

Спасибо за чтение! Рассматриваемые темы:

• What is Javascript - Краткая информация
• Introduction to React
• #1 — Variables
• #2 — Functions Definition
• #3 — Classes and the Extend keyword
• #4 — Async/Await
• #5 — Array methods
• #6 — Ternary Operator
• #7 — Template Literal
• #8 — Destructuring
• #9 — Spread Operator
• #10 — Import and Export
• Код Hello World в React

Что такое JavaScript?

JavaScript — это язык сценариев высокого уровня для веб-страниц. Он был изобретен Бренданом Эйхом в 1995 году. Сначала JavaScript работал над тем, чтобы сделать веб-страницу интерактивной. но позже разработчики создали фреймворки и библиотеки, чтобы сделать JavaScript доступным почти на всех платформах.

Например, вы можете создать мобильное приложение с помощью React Native, настольное приложение с помощью Electron. бэкэнд с node.js и интерфейс с react.js и т. д.

Это всего лишь несколько вещей, на которые, как я упомянул, способен JavaScript. если я скажу все, на что способен javascript, это будет сама статья.

С учетом сказанного давайте продолжим и посмотрим, что такое React.

✨ Что такое Реакт?

REACT JS — это интерфейсная библиотека JavaScript с открытым исходным кодом, созданная и поддерживаемая Facebook. Это библиотека на основе компонентов, что означает, что React разбивает большое приложение на более мелкие части, называемые компонентами. Такой подход упрощает создание крупных проектов и управление ими.

Если вы впервые сталкиваетесь с React, обратите внимание, что React — это библиотека, а не фреймворк, как Angular.js, а значит, это не законченное решение. При создании приложений с помощью React вам необходимо использовать внешние библиотеки для таких вещей, как маршрутизация, HTTP-запросы и управление состоянием.

Это короткое вступление к реакции. если вы хотите узнать больше, я добавлю несколько бесплатных ресурсов в конце статьи. иди проверь их.

Достаточно определений, теперь давайте перейдем к концепциям JavaScript, которые вам необходимо изучить, прежде чем изучать React.

#1 — Переменные

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

var foo = "hello world!";
let bar = "Hey, There!";
const baz = "What's up?";

Между этими тремя есть небольшая разница. Поскольку тип «var» сделает переменную видимой в глобальной области видимости, рекомендуется использовать «let» или «const».

Чтобы узнать больше о каждом определении, не стесняйтесь получить доступ к полному руководству, в котором подробно рассматриваются различия:

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

#2 — Определение функций

Основное правило React — разбивать большой проект на более мелкие компоненты. И эти компоненты являются либо функциями, либо классами.

Итак, очень важно знать, как объявить функцию с помощью JavaScript. Также, как и в случае с переменными, существует более двух способов объявить функцию. но эти 2 самые важные:

• Function declaration
• Arrow Function

Давайте посмотрим на примеры каждого из них.

Объявление функции

// function declaration
function add(num1, num2) {
  return num1 + num2;
}
add(2, 2) // 4

Вот как вы могли бы объявить и вызвать функцию в простом Javascript.

Теперь, когда вы знаете, как объявить простую функцию с помощью javascript, давайте посмотрим, как она используется в React.js. В React функции используются для создания функциональных компонентов.

function App() {
  return (
    <div className='App'>
      <h1>Hello world!</h1>
    </div>
  );
}

Это использование объявления функции в React. Как видите, компонент не возвращает никакого значения, он возвращает HTML, который определяет, как будет выглядеть приложение.

Функция стрелки

// Arrow function
const subscract = (num1, num2) => {
  return num1 - num2;
}
subscract(5, 2) // 3

Функция стрелки немного чище, чем объявление функции. между этими двумя нет большой разницы. Пример функциональных компонентов:

const App = () => {
  return (
    <div className='App'>
      <h1>Hello world!</h1>
    </div>
  );
}

Как и функция стрелки, компонент функции стрелки немного чище, чем объявление функции. Он выглядит красивее и интуитивно понятнее.

#3 — Классы и ключевое слово Extend

Как я уже говорил, в React есть классовые компоненты и функциональные компоненты. Функциональный компонент построен с помощью функций, а компоненты класса построены с помощью классов.

Давайте посмотрим на пример класса javascript, затем мы рассмотрим компоненты класса реагирования.

// javascript class
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}; 
const square = new Rectangle(10, 10);
console.log(square.height); // output: "10"

Классы Javascript — это просто шаблоны для создания объектов. с новым ключевым словом вы можете создать новый объект из класса. вы также можете использовать ключевое слово extend для создания нового объекта из класса.

Пример компонента класса:

class App extends Component {
  render() {
    return (
      <div>App</div>
    )
  }
}

Здесь мы создали компонент класса, расширив класс компонента. это просто класс javascript, который возвращает HTML/JSX.

# 4 — Асинхронный/ожидание

Async-await — очень важная концепция javascript. но прежде чем мы перейдем к ним, вам сначала нужно понять асинхронный javascript.

Асинхронный JavaScript

При создании веб-приложений вам нужно будет выполнять вызовы API для получения данных из серверной части, и эти операции выборки могут занять некоторое время.

При извлечении данных все остальные функции зависали. Для предотвращения этого в javascript введены асинхронные функции. Это означает, что асинхронные функции помогают вам писать код, который будет получать данные из API, в то же время не блокируя остальную часть приложения.

Это асинхронный JavaScript.

Есть несколько способов обработки асинхронного кода, но я собираюсь поговорить об async/await. потому что в настоящее время это лучший способ обработки асинхронного кода.

Начнем с примера:

async function getPersonsInfo(name) {
  const people = await server.getPeople();
  const person = people.find(person => { return person.name === name });
  return person;
}

Асинхронный:

ключевое слово async объявляет, что эта функция является асинхронной. асинхронная функция автоматически возвращает обещание. ключевое слово async можно использовать во всех типах функций. например, функция стрелки, функция обратного вызова или функциональное выражение.

Подождите:

Ключевое слово await говорит, что асинхронная функция ожидает завершения операции. Это то же самое, что и блок .then() в Promise. Просто намного чище.

Одно замечание: вы можете использовать ключевое слово await только внутри асинхронной функции, иначе вы получите ошибку.

Обработка ошибок

Как видите, ключевое слово await ожидает разрешения промиса и возвращает результат. мы должны иметь в виду, что наше обещание может быть отклонено. Итак, теперь нам нужен способ справиться с этим.

Мы можем обрабатывать ошибки в асинхронной функции двумя способами.

Решение №1. Используйте блоки try ... catch():

asyncFunctionCall().catch(error => {
  console.error(error)
});

Решение №2. Используйте внутренний блок try ... catch():

async function getPersonsInfo(name) {
  try {
    const people = await server.getPeople();
    const person = people.find(person => { return person.name === name });
    console.log(person)
  } catch (error) {
    console.error(error)
  }
}

Асинхронизация/ожидание в React

const App = () => {
 useEffect(() => {
  // declare the data fetching function
  const fetchData = async () => {
    //get the data
    const data = await fetch('<https://yourapi.com>');
  }
  // call the function
  fetchData()
  // make sure to catch any error
    .catch(console.error);
    }, [])
  return <>...</>;
};

# 5 — Методы массива

Методы массива — это способы управления массивами в javascript. Знание того, как работают эти методы, пригодится в будущем. Потому что, когда вы начнете создавать проекты с помощью React, вы будете использовать их постоянно.

array.map()

array.map() создает новый массив, применяя функцию обратного вызова к каждому элементу массива. кроме того, он не изменяет исходный массив.

Пример кода

const numbers = [2, 3, 4, 6];
const newArr = numbers.map(myFunction)
function myFunction(num) {
  return num * 2;
} 
console.log(numbers); //2,3,4,6
console.log(newArr); //4,6,8,12

array.filter()

array.filter() перебрать все элементы массива и отфильтровать элементы, соответствующие условию в функции обратного вызова. как и метод карты, он не изменяет старый массив.

Пример кода

const ages = [32, 33, 16, 40];
const result = ages.filter(checkAdult);
function checkAdult(age) {
  return age >= 18;
}
console.log(ages);
console.log(result);

Пример в React для map()

function App() {
  const names = ['sam', 'jack', 'tom', 'dave'];
  return (
    <div className='App'>
      <h1>Hello world!</h1>
      {
        names.map(name => <h2>hello {name}</h2>)
      }
    </div>
  );
}

В приведенном выше примере все элементы массива имен отображаются с использованием map. Это очень полезно и, вероятно, вы будете использовать его все время.

Пример в React для filter()

const numbers = [1, 2, 3, 4, 5, 6, 7];
const lessThanFive = numbers.filter(num => num < 5);
console.log(lessThanFive); //1,2,3,4
console.log(numbers) //1, 2, 3, 4, 5, 6, 7

Здесь я отфильтровал массив чисел до менее пяти. Этот метод также очень важен для создания функций фильтрации.

#6 — Тернарный оператор

Тернарный оператор — это упрощенная форма условного оператора if/else. По сути, это просто еще один способ написать условие if-else.

Пример кода — классический If/else

//if/else
if (loading) {
  loadingComponent();
} else {
  App();
}

Пример кода — тернарный оператор

loading ? loadingComponent() : App();

Пример React — тернарный оператор

class App extends Component {
  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
      </div>
    );
  }
}

#7 — Литерал шаблона

Если вы создаете веб-приложение, вполне нормально, что вам нужно работать со строками. В более ранних версиях Javascript (ES5), если вы хотели объединить (добавить) строку в переменную, вам приходилось использовать оператор +. И это не выглядит хорошо и не легко понять.

Но теперь вы можете использовать литерал шаблона ES6. Литерал шаблона использует нотацию ${} для объединения строк с переменными.

Пример кода

const name = "Sam";
const greeting = `Hello, ${name}!`
console.log(greeting) // Hello, Sam!

#8 — Деструктуризация

Деструктуризация — это способ извлечения значений из объекта или массива в переменные.

В более ранних версиях Javascript (ES5), если вы хотели извлечь значение из массива или объекта, вы должны были сделать это:

//Array
const foo = ['one', 'two'];
const one = foo[0]
const bar = ["Tom", "Jerry"];
const tom = bar[0]

Теперь то, что вы можете сделать с реструктуризацией ES6 (современная версия Javascript):

const foo = ['one', 'two'];
const [one] = foo;
//Object
const bar = ["Tom", "Jerry"];
const {tom} = bar

Он присвоит значение one переменной one. Это намного чище и интуитивно понятнее.

Пример в React.js

Для передачи данных компонентам React использует props. Свойства такие же, как аргументы в обычной функции.

Дело в том, что реквизит — это объекты. Например, если у вас есть компонент с именем Greeting, и он принимает имя свойства:

<Greeting name={"Sam"} />
If you want to access it, you need to write props.name.
function Greeting(props) {
  return (
    <div>hello {props.name}</div>
  )
}

Но также вы можете использовать реструктуризацию следующим образом:

function Greeting(props) {
  const {name} = props
  return (
    <div>hello {name}</div>
  )
}

Теперь вы можете использовать это имя, не вызывая props.name.

#9 — Оператор спреда

Оператор распространения используется для копирования всего или части массива или объекта.

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

const arrayOne = [1, 2, 3];
const arrayTwo = [4, 5, 6];
const arrayThree = [...arrayOne, ...arrayTwo];

# 10 — Импорт и экспорт

Как упоминалось ранее, React — это UI-фреймворк, основанный на компонентах. Таким образом, для создания полного приложения вам необходимо использовать компоненты, которые вы создали.

Чтобы использовать компонент, вам необходимо импортировать их в файл, который вы хотите использовать. вы можете использовать экспорт и импорт для использования компонентов в вашем приложении.

Экспорт образца

// app.js file - Exports the “App” object
function App() {
  return (
    <div>App</div>
  )
}

Импорт образца

// index.js - Use the “App” object via an “import”
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

После этого краткого введения в 10 полезных концепций JS, которые мы можем использовать в React, любопытные умы могут пойти дальше и написать простой Hello World в React.

Код проекта Hello World с помощью React

В этом разделе объясняется, как написать классический проект «Hello World» с использованием React и Javascript.

Шаг 1. Установите инструменты

Чтобы начать работу с React, сначала вам нужно установить Node.js. Вы можете скачать Node отсюда.

Шаг 2. Создайте приложение

После того, как вы установили NodeJS, откройте терминал/командную строку и создайте папку проекта с помощью этой команды:

$ mkdir hello-react

Затем создайте базовый проект React, используя CRA (инструмент create-react-app).

$ npx create-react-app my-app
$ cd my-app
$ npm start

После выполнения всех этих команд ваш браузер откроет проект React на порту 3000.

import React from 'react'
function App() {
  return (
    <div></div>
  )
}
export default App

И напишите тег h1 с Hello world! внутри div.

import React from 'react'
function App() {
  return (
    <div>
    <h1>hello world!</h1>
    </div>
  )
}
export default App

На этом этапе вы должны увидеть сообщение Hello World в браузере.

Поздравляем! Теперь you are a React (beginner) developer.

Заключение

Если вы начнете изучать/использовать React без понимания основных концепций Javascript, вы можете быть непродуктивными и не использовать всю мощь React.