Введение в JavaScript и React

Теперь, когда у нас действительно запущено локальное приложение, пришло время начать кодирование. Сначала мы установим редактор кода. Большинство веб-разработчиков в DraftKings, как и я, предпочитают VSCode. Его приятно использовать, на него приятно смотреть, и он имеет множество различных расширений, которыми вы можете воспользоваться.

После того, как мы настроим VSCode, мы выполним некоторые базовые упражнения по JavaScript/кодированию, чтобы намочить ноги. Урок закончится применением некоторых из этих упражнений по кодированию в React и фактическим отображением наших решений на странице.

Кроме того, пожалуйста, используйте Google Chrome в качестве браузера для всей вашей дальнейшей разработки.

Код Visual Studio

Перейдите на https://code.visualstudio.com/download и загрузите правильную версию для вашей операционной системы.

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

Теперь установим линтер. Линтер сообщит нам, когда мы пишем неверный код или допускаем ошибки стиля. Новичкам в JavaScript будет полезно выделить любые синтаксические ошибки. Вы можете настроить свой линтер, добавив правила в файл config. Мы сохраним эту конфигурацию простой и просто воспользуемся встроенным react-app линтером.

  1. Создайте файл в корневом каталоге проекта с именем .eslintrc
  2. Вставьте следующее в свою конфигурацию { "extends": ["react-app"], "rules": { "additional-rule": "warn" } }
  3. Перейдите в расширения и скачайте ESLint. Это расширение улавливает вашу конфигурацию .eslintrc и фактически выделяет нарушения правил в вашем редакторе кода. (вам может потребоваться перезапустить VSCode)

VSCode имеет всевозможные расширения для различных проектов. Вы также можете получить крутые темы для своего редактора. Я бы порекомендовал изучить. Еще одно расширение, которое мне нравится, называется TabNine. Это автозаполнение на основе машинного обучения для кодирования, которое фактически просматривает код в вашем репозитории и узнает, какие шаблоны вы используете.

JavaScript

Следующее видео должно быть полезно для понимания некоторых основных концепций программирования, таких как переменные и типы, а также для применения этих концепций к JavaScript (можно пропустить это, если вы уже знакомы с этими концепциями). Начать с 16 минут. https://www.youtube.com/watch?v=W6NZfCO5SIk.

Кроме того, нам нужно будет использовать циклы для решения некоторых упражнений этого урока. Предлагаю посмотреть это видео для ознакомления с циклами JavaScript https://www.youtube.com/watch?v=Kn06785pkJg.

Очистить App.js

Теперь вернемся к нашему реальному проекту. Вы заметите, что ваш файл App.js содержит много мусора. Давайте удалим его и просто отрендерим простой тег <h1>.

Вот как должен выглядеть ваш файл App.js.

import React from 'react';
import './App.css';
function App() {
    return (
        <h1>Hello World</h1>
    );
}
export default App;

Теперь мы готовы приступить к некоторым из наших упражнений.

Упражнения по кодированию

В этих упражнениях мы будем реализовывать довольно простые функции. Они могут включать циклы или использовать встроенные методы JavaScript. Если у вас возникли трудности, я настоятельно рекомендую пошагово просмотреть каждый пример (спросите себя, что должна делать каждая строка функции при выполнении). Google также поможет вам найти концепции кодирования, а не решения. Я буду рад обсудить любую из этих концепций, с которыми вы не знакомы, но эти видео должны быть большей частью того, что вам нужно. Кроме того, console.logs — ваш друг. Перетащите их в разделы различий вашего кода и посмотрите в Консоли Chrome (щелкните правой кнопкой мыши веб-страницу, выберите «Проверить», затем перейдите к консоли), чтобы увидеть их.

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

Вставьте следующее в новый файл с именем lesson3.js

  1. Создайте новую папку на том же уровне, что и App.js, с именем lessons.
  2. Создайте новый файл в этой папке с именем lesson3.js
  3. Вставьте следующее в этот файл.
/* Implement the following functions */
// Return a string that repeats n times
export function repeatString(str, n) {
    console.log('implement me');
};
// Return the boolean value of when you take the || (or) of each element
export function or(arr) {
    console.log('implement me')
}
// Return the boolean value of when you take the && (and) of each element
export function and(arr) {
    console.log('implement me')
}

Теперь вернемся к нашему файлу App.js и импортируем эти вспомогательные функции.

В верхней части App.js вставьте следующее import {repeatString, or, and} from './lessons/lesson3.js'; Давайте разберем, что делает этот оператор импорта.

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

Если вы наведете курсор на эти функции, VSCode покажет вам интерфейс этой функции.

JSX

Теперь давайте покажем данные, которые они возвращают в нашем приложении React, используя JSX. JSX — это то, как мы будем динамически вставлять HTML в наше приложение React с помощью JavaScript.

Давайте вставим это в оператор return в нашем файле App.js.

<div>
    <h1 style={{color: 'blue', textDecoration: 'underline'}}>Repeat String</h1>
    <h1>{repeatString('abc ', 10)}</h1>
    <h2>{repeatString('yo ', 25)}</h2>
    <h3>{repeatString('hello ', 5)}</h3>
    <h1 style={{color: 'blue', textDecoration: 'underline'}}>OR</h1>
    <h1>{or([0, 0, false, false, 0, undefined, null]).toString()}</h1>
    <h2>{or([true, 123, 'hello']).toString()}</h2>
    <h3>{`${or([true, true, false])}`}</h3>
    {or([true, false]) && <h1>this was true</h1>}
    <h1 style={{color: 'blue', textDecoration: 'underline'}}>AND</h1>
    <h1>{and([0, 0, false, false, 0, undefined, null]).toString()}</h1>
    <h2>{`${and([true, 123, 'hello'])}`}</h2>
    <h3>{`This is the return value: ${and([true, true, false])}`}</h3>
    {and([true, true]) && <h1>this was true</h1>}
</div>

Если вы обновите свое приложение React, вы должны увидеть только заголовки для каждого набора тестовых случаев. Однако, если вы откроете консоль, вы увидите журналы выполнения меня, которые выполняются. Нам нужно что-то вернуть для каждой функции с помощью оператора return.

Давайте подробнее рассмотрим, что происходит в нашем JSX.

  • HTML: все в <> является html. Это так называемые теги. Итак, у нас есть коллекция тегов <div> <h1> <h2> <h3>
  • CSS: мы используем встроенный CSS для оформления наших тегов <h1>. В дальнейшем мы будем использовать классы, чтобы они были более организованными, но не волнуйтесь, мы добьемся этого.
  • JavaScript: внутри фигурных скобок {} внутри и HTML-тега мы действительно можем выполнить JavaScript. Именно так мы вызываем наши вспомогательные функции. Вот как мы можем динамически вставлять данные.
  • Синтаксический трюк: в частях и/или нашего JSX вы заметите, что мы вызываем метод toString() для преобразования логических значений в строки. Хороший способ объединить строки — использовать For the‹h3›tags you see we are doing ``This is the return value: ${and([true, true, false])}`` This allows us to inject the return value of theandhelper function into a string. You will need to wrap your JavaScript in${}` для выполнения.

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

*** **Отказ от ответственности: Ниже приведены подсказки. Используйте их по мере необходимости ******

Повторить строку n раз

Эта функция потребует от вас использования цикла, который выполняется n раз. Есть много способов сделать это, но я бы рекомендовал использовать цикл for с переменной, которая увеличивается (0, 1, 2, 3,…, n-1). Цикл должен выполняться только тогда, когда эта переменная меньше n. Для каждой итерации «конкатенировать» (объединить) с и аккумулятором, который содержит все строки, которые вы уже накопили. Верните этот аккумулятор в конце функции.

OR

Эта функция потребует от вас перебора элементов массива. Вы можете получить доступ к элементу массива, используя индекс (его положение в массиве, начиная с 0), или вы можете зацикливаться непосредственно на элементах. Вы захотите использовать || для имитации или. Это говорит о том, что если a || b === true, то верно либо a, либо b. Я бы использовал аккумулятор для хранения этой информации.

И

Эта функция очень похожа на ИЛИ и потребует от вас перебора элементов массива. Задание: попробуйте использовать цикл, отличный от того, который вы использовали для ИЛИ. Вам нужно будет использовать && для имитации или. Это говорит о том, что если a && b === true, то и a, и b верны.