React Reactorial - Узнайте основные основы программирования реагирования и JavaScript с примером кода

Автор оригинала: FreeCodeCamp Community Member.

RECT – это библиотека JavaScript с открытым исходным кодом, которая помогает создавать пользовательские интерфейсы. Это компонент, декларативный, «Узнайте один раз и пишу в любом месте» инструмент.

С 164K + Github Stars, 30K + Forks и близко к ~ 10 миллионам еженедельных загрузок, Rect, несомненно, является отличным пользовательским интерфейсом для изучения и использования.

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

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

Как современные знания JavaScript позволяют вам эффективным разработчиком реагирования?
Какие изменения вам нужны в вашем мышлении при разработке и разработке приложения React?
Какие экосистемы вы должны знать и почему?

Просто охладите, возьмите свой любимый напиток и наслаждайтесь статьей.

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

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

Стандартизированное имя JavaScript – Ecmascript. Ecmascript 2015 (который также является 6-м изданием, и почему он называется ES6) принес много прохладных функций и нового синтаксиса на язык JavaScript.

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

Вот несколько концепций, которые вам нужно учиться хорошо.

1. Как использовать пусть и const в JavaScript

До ES5, единственный способ объявить переменную было использовать var ключевое слово. ES6 представила еще два способа объявления переменных, используя Пусть и Const ключевые слова. Использование этих современных ключевых слов дает нам больше предсказуемости и меньше шансов ввести ошибки в коде.

Var ключевое слово

Переменная объявлена с var Является функцией Scoped. Это означает, что мы получим Собственный ресурс Когда мы пытаемся получить доступ к переменной за пределами функции.

var x = 10;
function someFunc(){
    var y = 10;
    console.log('inside someFunc', x, y);
}

Теперь, если вы позвоните какая-то () Он будет войти в систему в консоли браузера:

inside someFunc 10 10

Но попробуйте получить доступ к переменной y снаружи SUMFUNC () И вы получите следующую ошибку:

Uncaught ReferenceError: y is not defined

Пусть ключевое слово

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

function letsLoop() {
 for (var i=0; i<5; i++) {
   console.log('i inside the loop: ', i);
 }
 
 console.log('i outside of loop', i);
}

Когда вы называете функцию letsloop () Вывод будет это:

i inside the loop:  0
i inside the loop:  1
i inside the loop:  2
i inside the loop:  3
i inside the loop:  4
i outside of loop 5

Теперь, давайте изменим ключевое слово var к Пусть При объявлении и присвоении переменной Я Отказ

function letsLoop() {
 for (let i=0; i<5; i++) {
   console.log('i inside the loop: ', i);
 }
 
 console.log('i outside of loop', i);
}

Если вы выполняете letsloop () Функция сейчас, вы получите Собственный ресурс При доступе к переменной Я за пределами для петля. Это потому, что видимость и доступность (или объем) переменной Я ограничен для блокировать.

i inside the loop:  0
i inside the loop:  1
i inside the loop:  2
i inside the loop:  3
i inside the loop:  4
Uncaught ReferenceError: i is not defined
    at letsLoop (:6:35)
    at :1:1

Const ключевое слово

Const почти такой же, как Пусть Отказ Единственное отличие состоит в том, что, как только вы назначили значение переменной, определенной с помощью Const Ключевое слово, вы не можете переназначить новое значение для него.

const name = 'freeCodeCamp';

name = 'My freeCodeCamp'; // Uncaught TypeError: Assignment to constant variable.

Это относится ко всем типам переменных, которые мы можем создавать в JavaScript. Вы должны быть осторожны, когда дело доходит до сложной структуры данных, таких как объект Отказ Когда объект объявлен и назначен значение с Const Вы все равно можете изменить значение его свойств. Но вы не можете переназначить переменную другой объект. Пожалуйста, посмотрите:

const publication = {
 'name': 'freeCodeCamp'
}

publication.name= 'My freeCodeCamp'; // Allowed

publication = {}; // Uncaught TypeError: Assignment to constant variable.

А теперь чтобы сравнить три ключевых слова:

блокировать	функция	блокировать	Сфера
Разрешается	Разрешается	Не допускается	Переназначение новой ценности
Справочник	неопределенный	Справочник	При доступе до заявления

Вот некоторые правила использования var, пусть, и const:

Не используйте var больше. Использовать Пусть или Const Отказ
Использовать Const чаще. Использовать Пусть Когда вам нужно переназначить другое значение для переменной.

В приложении React вы увидите код, используя Пусть и Const очень часто. Реагнийный компонент обычно объявляется с использованием Const Отказ Посмотрите на пример ниже.

Переменная Трудные пролевы объявлен с использованием Const и назначается функция в качестве значения. Эта функция определяет реактивный компонент. Имеет смысл использовать Const Здесь, так как он не будет переназначен с другим ценностью.

Теперь обратите внимание на использование переменной Уровень внутри Useffect Отказ Нам нужно переназначить значения его на основе состояния. Так что имеет смысл использовать Пусть ключевое слово там. Но вы не увидите var в любом месте!

const DifficultyLevels = () => {
    
    const userDataLS = getFromLS(LS_KEY_USER_DATA);
    const [userData, setUserData] = useState(userDataLS || {
        'fullName': '',
        'age': '',
        'email': '',
        'gender': 'F',
        'difficultyLevel': BEGINNER
    });
    
    //... other code
    
    useEffect(() => {
        let level = 'beginner';
        if (userData.age >=10 && userData.age <= 13) {
            level = 'intermediate';
        } else if (userData.age > 13) {
            level = 'advanced';
        }
        
        setUserData({
            ...userData,
            'difficultyLevel': level
        });
    }, [userData.age]);
    
    //... other code
    
    return(
        <>
        	{/*...other code */}
        
          	 { userData.level } 
        
		  	{/*...other code */}
        
    )
    
}

2. Как использовать шаблонные литералы в JavaScript

Прошли дни, когда мы привыкли к объединению строк, как это:

var name = 'Tapas';
var publication = 'freeCodeCamp';
var greeting = 'Hello'; // Or Hola

// It produces output like, "Hello Tapas, welcome to freeCodeCamp."
var message = greeting + ' ' + name + ', welcome to ' + publication + '.';

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

С ES6 у нас есть Шаблонные литералы, которые являются строковыми литералами, которые позволяют эксплуатационные выражения. Мы используем BackTicks (“) вместо одиночных или двойных кавычек в шаблонных литералах. Мы можем определить динамические значения (или выражения) в качестве заполнителей, использующих знак доллара ($) и фигурных скобок (например $ {Express} ).

Давайте напишем приведенный выше пример, используя шаблонные литералы.

// We are expecting the values to change dynamically, hence `let`
let name = 'Tapas';
let publication = 'freeCodeCamp';
let greeting = 'Hello'; // Or Hola

// A much better way of wrting like natural language sentence
let message = `${greeting} ${name}, welcome to ${publication}.`;

Итак, мы используем его в нашем React Code? Да, почему бы и нет? Возможно, вы захотите использовать приведенное выше приветствие в вашем компоненте реагирования и визуализировать его в элементе интерфейса UI. Вот статья Чтобы помочь вам подробно узнать о шаблонах литералов.

Вы используете Стильные компоненты В вашем реагированном проекте? В этом случае вы уже используете шаблонные литералы!

3. Как импортировать и экспортировать модули в JavaScript

Чтобы эффективно кодировать в реакции, вам нужно Думаю в реакцию Отказ Один из основных способов, которыми вам нужно подумать, – это сломать UI в подходящую иерархию компонентов.

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

Вот простой пример того, как мы можем экспортировать комментарий реагирования и импортировать его в другой компонент.

// under-construction.js under the directory src/components/utility

import React from "react";

const UnderConstruction = () => {
    
    return(
        
            
                If you are seeing this, I am probably working on it! 
                Please give it a few days to get constructed.
            
        
    )
};

export default UnderConstruction;

В другом компоненте:

import UnderConstruction from './components/utility/under-construction'

Пожалуйста, Прочитайте эту статью Чтобы ознакомиться с модулями JavaScript и ключевым словам импорта/экспорта.

4. Как использовать функции стрелки в JavaScript

Просто голова вверх – вы можете написать React Code без функций стрелки JavaScript.

Верно. Тогда почему мы говорим о них? Функция стрелки полезна во многих отношениях:

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

const double = (num) => {return num * 2;};

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

Вот отличная статья, чтобы вы начали с функций стрелки и их использования.

5. Как работает деструктивные работы в JavaScript

Разрушивание – это синтаксис JavaScript для извлечения значений из свойства объекта и присвоить их переменной. Разрушивание также возможно для массивов JavaScript.

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

Вы можете использовать разрушительные петли, как это:

for(let { name, age } of users) {
    console.log(`${name} is ${age} years old!`);
}

С возвращаемой функцией:

const getUser = () => {
    return{ 
        'name': 'Alex',
        'address': '15th Park Avenue',
        'age': 43
    }
}

const { name, age } = getUser();

console.log(name, age); // Alex 43

В функциональном параметре:

function logDetails({name, age}) {
    console.log(`${name} is ${age} year(s) old!`)
}

Вот пример разрушения массива:

let emojis = ['🔥', '⏲️', '🏆', '🍉'];

let [fire, clock, , watermelon] = emojis;

console.log(fire, clock, watermelon); // 🔥 ⏲️ 🍉

Конечно, мы могли бы сделать, эмохис [0], эмохис [1], так далее. Но это слишком много, чтобы написать и назначать переменные один за другим.

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

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

6. Как работают оператор по распространению и параметру отдыха в JavaScript

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

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

Спред синтаксисом помогает нам клон объект и массив с самым простым синтаксисом с помощью трех точек ... , как это:

const clone_some_object = {...some_object}

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

Отдых Параметр рода напротив Распространение синтаксис. Хотя Spread Syntax помогает расширить или распространять элементы и свойства, параметр покоя помогает собрать их вместе.

Проверьте последнюю половину этой статьи, чтобы узнать больше о операторе SPRECT и PARAMETORE.

7. Как использовать классы в JavaScript

ES6’s Класс Это еще одно отличное включение, которое помогает вам написать объектно-ориентированное программирование в JavaScript.

class Employee {
	constructor(name) {
		this.name = name;
	}

	greeting() {
		return `Hello, ${this.name}`;
	}
}


let emp = new Employee("Tapas");
emp.greeting(); // "Hello, Tapas"

Мы также можем создать класс, протягивая его из существующего класса. В реакции мы можем создавать компоненты двумя способами:

Используя класс
Использование функции.

Вот пример того, как мы можем создать компонент React, используя класс ES6:

class Greeting extends React.Component {
	render() {
		return Hello World!;
	}
}

Вы можете посмотреть это видео На канале FreeCodecamp YouTube, чтобы узнать больше о классах ES6.

Помимо этого, зная о для петля, Async-await , Тернарный оператор И так давно было бы очень полезно.

Добро пожаловать во второй раздел статьи. Давайте поговорим о Компоненты Отказ Если мы говорим о реагировании, мы должны говорить о компонентах.

Один файл исходного кода состоит из всех функций приложения. Но это создает некоторые проблемы, которые вы хотите избежать как разработчика. Вот несколько я столкнулся (и еще много):

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

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

Итак, как мы надеваем это на практику? Давайте узнаем, как с примером.

Как визуализировать реактивный приложение в качестве куча компонентов

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

Верхняя навигация с логотипом и именем приложения.
Четкий разрыв результатов по оценкам.
Это показывает результат трех лучших студентов каждого класса.
Есть Просмотреть все Возможность увидеть все результаты для оценки.
Мы можем искать результат любого студента, поиск имени студента.

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

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

Вот как мы можем сделать это:

Корневой компонент называется Приложение Отказ
А NAV Компонент для верхней навигации.
А Результаты Компонент, который является всей страницей, кроме NAV Отказ
А Поиск составная часть.
А Оценки Компонент, который может включать все оценки.
А Оценка Компонент, который содержит заголовок, таблицу оценок и просмотр все связан.
А Поставщики Компонент, который содержит заголовок, как, 1 класс Отказ
А Счетчик Компонент, который содержит таблицу баллов.

Изображение ниже показывает их, отмечая их разными цветами.

Отлично, у нас есть все компоненты сейчас. Итак, нам нужно начать думать о компонентной композиции. Что это значит?

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

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

С изображения ниже вы можете понять, как эти компоненты могут быть составлены.

Приложение Компонент является компонентом корневого уровня, который имеет два других компонента, NAV и Результаты Отказ
NAV Компонент имеет логотип и заголовок.
Результаты Компонент имеет Поиск Компонент и A Оценки составная часть.
А Оценки Компонент может иметь много Оценка составные части.
Каждый из Оценка Компоненты имеют Поставщики и Счетчик составная часть.

Изображение ниже имеет смысл для вас?

Вот еще один способ визуализации этого:

Каждый из этих компонентов управляет и использует данные с использованием двух важных концепций, которые являются реквизит и Государство Отказ

Реквизит против состояния в реакции

В реакции, реквизит и Государство являются основными способами, которыми вы можете управлять данными внутри и между компонентами.

Реквизит : Переданы ли переменные исходным компонентом для своих детей. Используя компонент реквизита, мы можем пройти необходимые данные своим детям в иерархии.
Государство : С другой стороны, Государство Является ли переменная, которую компонент удается внутри себя. Во многих случаях состоятельная переменная компонента может быть инициализирована данными, переданными на нее, используя реквизиты.

Здесь мы находимся в последнем разделе статьи. Этот раздел объяснит, почему зная о экосистеме NPM делает вас более комфортными в реакции.

Что такое NPM?

NPM Менеджер пакета для Node.js Платформа. Он состоит из модулей, которые могут найти узел, и он помогает узел управлять конфликтами зависимостей разумно. Чаще всего он используется для публикации, обнаружения, установки и разработки программ.

Вы можете найти больше информации о NPM здесь Отказ

Почему мне нужно знать о NPM?

Реагируйте сам по себе – это крошечная библиотека, которая позволяет создавать компоненты и создавать полные веб-приложения. Тем не менее, вам часто нужно использовать то, что реагирует не может предложить вне коробки.

Например, для обширного государственного управления вы можете использовать Redux Отказ Вы можете выбрать внешнюю библиотеку, которая помогает с ней, и эта библиотека доступна в виде NPM Пакет вы можете скачать и установить.

Аналогичным образом, пакеты NPM существуют для различных утилит, библиотеки диаграммы, экстернации строки, маршрутизации – вы называете его, и вероятно, пакет для него.

Мышление с открытым исходным кодом

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

Есть два простых способа справиться с этой ситуацией:

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

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

Я создал Проект с открытым исходным кодом Чтобы быстро опубликовать пакеты NPM, используя скрипт. Пожалуйста, не стесняйтесь взглянуть, вилку и внести свой вклад. Вы можете найти это полезным.

Я надеюсь, что вы нашли эту статью Insightful, и что она поможет вам начать использовать эти концепции более эффективно. Давайте подключемся. Вы найдете меня активным на Twitter (@tapasadhikary) Отказ Пожалуйста, не стесняйтесь дать следующее.

Вы также можете понравиться эти статьи:

Как узнать что-то новое каждый день как разработчик программного обеспечения
Как создать реактивную форму с одним обработчиком событий с одним изменением?
16 боковых проектных репозиториев GitHub Вы можете найти полезное
Понимание динамического импорта, ленивых и неизвестных с использованием реактивных крюков