Недавно я работал с группой разработчиков-добровольцев, чтобы начать перевод веб-сайтов сообщества разработчиков RICOH THETA в интегрированное веб-приложение React. Опыт был замечательным. Мы смогли быстро подключиться к источникам данных REST API с помощью React и создать интерфейс для нашего веселого сообщества разработчиков, которое получает около 1 миллиона просмотров в год. Большинство из нас были новичками в React, когда начался проект. Хотя мне было весело, было бы веселее, если бы я потратил дополнительные 20 минут на изучение современного JavaScript, прежде чем начал читать примеры кода React.
Я объясню 10 вещей JavaScript, которые нам хотелось бы изучить чуть больше, прежде чем мы начнем кодировать сайт в React, взяв примеры онлайн-кода.
Наш новый сайт React все еще находится на этапе обратной связи с сообществом, но вы можете увидеть текущую концепцию здесь . Сайт состоит из трех основных компонентов React, каждый из которых извлекает данные из различных API REST. Внутренние источники данных представляют собой комбинацию API из нашего форума Discourse, Django Rest Framework, содержащей наш список приложений в PostgreSQL, и нашего пользовательского сервера документов.
Суть в том, что компонентная архитектура React настолько хороша, что мы смогли за несколько дней кое-что поднять и использовать сам сайт для получения отзывов о дизайне вместо долгого процесса макетов и обсуждений.
Вы также можете быть заинтересованы в: Функциональное программирование с использованием JavaScript
Погрузитесь в 10 советов ниже и начните свой первый проект React сегодня.
1. Толстая Стрела
Жирные стрелки используются как ярлыки функций. Вместо записи function() вы можете опустить ключевое слово function и написать () => . Вы можете опустить оператор возврата и фигурные скобки , если вы вернетесь только линия, () => "long string" .
Вы можете назначить функцию на константу: const MyExport = () => { code goes here }.
2. Шаблонные литералы
Есть три способа указать строки в JavaScript.
- Двойная цитата
"string" - Одинарные цитаты
'string' - Back-клещ
`string`
Строка с обратной галочкой имеет особые полномочия.
Вы можете вставить переменные в строку.
JavaScript
1
const name = "Scoopy Doo";
2
const description = "a cartoon dog"
3
console.log(`${name} is ${description}.` );
Еще одна забавная функция обратной галочки заключается в том, что строка может занимать несколько строк.
JavaScript
xxxxxxxxxx
1
console.log(`The
2
sky
3
is
4
blue`);
Запускать и редактировать фрагменты кода .
3. Импорт и экспорт
Вы можете импортировать код из одного файла в другой.
import { MyExport } from "./MyExport.js";
В этом примере я импортирую MyExport.js в App.js
Этот пример кода доступен здесь .
Чтобы импортировать содержимое файла, вы должны экспортировать его. В приведенном ниже примере показано использование функции жирной стрелки, литерала шаблона и новой функции экспорта.
JavaScript
xxxxxxxxxx
1
export const MyExport = () => {
2
const name = "Mickey";
3
const type = "cartoon character";
4
const description = "icon of the Walt Disney entertainment empire";
5
return `${name} is a ${type} and a ${description}`;
6
};
Вернувшись в свой App.js файл, я теперь могу использовать функцию, из которой я экспортировал MyExport.js .
JavaScript
xxxxxxxxxx
1
import { MyExport } from "./MyExport.js";
2
export default function App() {
4
console.log(MyExport());
5
return "";
6
}
Результат console.log показан ниже.
4. Разрушение
Вы можете деструктурировать объекты или массивы с помощью этого синтаксиса.
const {userId, title} = json
Чтобы проиллюстрировать этот пример, давайте сначала извлечем запись JSON с поддельного тестового сервера JSON, jsonplaceholder.
JavaScript
xxxxxxxxxx
1
const fetch = require('node-fetch');
2
console.log("get a single JSON entry for testing");
4
fetch('https://jsonplaceholder.typicode.com/todos/1')
5
.then(response => response.json())
6
.then(json => {
7
console.log(json)
8
})
Теперь я могу работать с этой единственной записью JSON.
JavaScript
xxxxxxxxxx
1
{ userId: 1,
2
id: 1,
3
title: 'delectus aut autem',
4
completed: false }
Запись JSON содержится в переменной с именем json .
Теперь я могу вытянуть userId и title заключить эти ключи в фигурные скобки. {userId, title},
JavaScript
xxxxxxxxxx
1
console.log("starting deconstruction of object")
2
fetch('https://jsonplaceholder.typicode.com/todos/1')
3
.then(response => response.json())
4
.then(json => {
5
const {userId, title} = json
6
console.log(`the userId is ${userId}`);
7
console.log(`the title is ${title}`);
8
})
Консоль покажет следующее:
Запустите пример здесь .
5. Карта
Вы будете использовать метод карты массива постоянно. Освоить. Это работает как forEachпетля.
Примеры кода доступны здесь .
JavaScript
xxxxxxxxxx
1
myArray = [1,2,3,4];
2
// square each element of array
4
console.log(myArray.map(element => element * element));
Результат:
[ 1, 4, 9, 16 ]
В этом примере используется функция жирной стрелки. Это позволяет нам исключить фигурные скобки и оператор return. Код проходит по каждому элементу массива и содержит каждое значение в переменной element .
Вы можете добавить строку в переменную.
console.log(myArray.map(element => "My number is " + element));
Вы можете получить индекс массива, добавив второй параметр.
console.log(myArray.map((element, index) => `At index ${index} the number is ${element} `));
6. Фильтр
Используя тот же массив, вы можете фильтровать выходные данные по условиям.
console.log (myArray.filter(element => element > 3));
Фильтр возвращает массив. В этом примере массив представляет собой только один элемент [4].
7. Найти
Find похож на filter, но не возвращает массив. Он вернет только первый элемент, который удовлетворяет условию, а затем завершит работу.
console.log(myArray.find(element => element === 3));
Этот код возвращает одно число 3 .
8. Уменьшить
Это наиболее сложный для понимания метод массива.
Он работает как цикл, который имеет внешнюю глобальную переменную, которая сохраняет содержимое математической операции, примененной к каждому элементу массива.
Классический пример - сложить все элементы массива вместе и вернуть одно число.
JavaScript
xxxxxxxxxx
1
console.log("use reduce to sum array and produce single result");
2
console.log(myArray.reduce((total, current) => total + current));
Это возвращает 10. Общая сумма переменных начинается с 0.
- итого = 0, текущий = 1 (первый элемент массива)
- добавить 0 + 1. Всего 1.
- цикл через массив
- итого = 1, текущий = 2 (второй элемент массива)
- добавить 1 + 2. Всего 3
- петля
- всего = 3, текущего = 3 (третий элемент массива)
- добавить 3 + 3. Всего 6
- петля
- итого = 6, текущий = 4 (четвертый элемент массива)
- добавить 6 + 4. Всего 10 - это ответ!
Вы можете запустить сумму или аккумулятор на любое значение. Код ниже запускает аккумулятор на 100.
console.log(myArray.reduce((total, current) => total + current, 100));
Результат - 110
Код для всех упражнений с массивами доступен здесь .
9. Тернарный оператор
Тернарный оператор выглядит странно.
console.log(activeUser ? "Welcome" : "Please sign in");
Он работает как оператор if-then-else.
Переменная слева от знака вопроса ? является логической переменной true / false. Строка «Welcome» отображается, если activeUser имеет значение true. Если activeUser имеет значение false, : отображается строка после двоеточия - «Пожалуйста, войдите в систему». Этот код будет входить "Добро пожаловать"
JavaScript
xxxxxxxxxx
1
const activeUser = true
2
console.log(activeUser ? "Welcome" : "Please sign in");
Этот код будет входить "Пожалуйста, войдите".
JavaScript
xxxxxxxxxx
1
const activeUser = false
2
console.log(activeUser ? "Welcome" : "Please sign in");
Несмотря на странные взгляды, понятие троичного оператора легко понять, если вы думаете о нем как о сокращении оператора if-then-else.
10. Асинхронно и жду
Я нахожу синтаксис async и ожидаю, что его легче понять по сравнению с обещаниями.
В моем предыдущем пункте о деконструкции я использовал обещание.
JavaScript
xxxxxxxxxx
1
const fetch = require('node-fetch');
2
console.log("get a single JSON entry for testing");
4
fetch('https://jsonplaceholder.typicode.com/todos/1')
5
.then(response => response.json())
6
.then(json => {
7
console.log(json)
8
})
Несмотря на то, что функциональность обещания и функции асинхронности с await одинаковы, обещание может быть написано с использованием асинхронности и ожидания, чтобы ясно показать, чего ожидает ваш код. В этом примере код должен сначала дождаться получения данных ответа из Интернета. Затем необходимо дождаться, чтобы ответ был преобразован в JSON. Пример кода ниже доступен здесь .
JavaScript
xxxxxxxxxx
1
const fetch = require('node-fetch');
2
async function getUsers() {
4
const response = await fetch('https://jsonplaceholder.typicode.com/users');
5
const data = await response.json();
6
return data;
7
}
8
getUsers()
10
.then(data => {
11
console.log(data.find(entry => entry.website === 'conrad.com')) });
Резюме
React - это прекрасная среда для разработки. Это может помочь сделать JavaScript снова увлекательным. Система разработки интегрирует Babel за кулисами, что позволяет нам использовать новые функции JavaScript, которые упрощают использование JavaScript после изучения нового синтаксиса. Новички в React могут чувствовать себя испуганными, читая множество примеров кода или учебных пособий, доступных для React, если они не знакомы с новыми функциями JavaScript. Изучение основ языка JavaScript перед погружением в React позволит вам сосредоточиться на классной и интересной архитектуре компонентов React, которая позволяет быстро создавать красивые приложения.
Дальнейшее чтение
Как на самом деле работает JavaScript: Часть 1
Руководство по новым функциям JavaScript, представленным в Google I / O 2019