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

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

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

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

Хотите вашу собственную копию этого руководства?

Скачайте Chechseet в формате PDF здесь (Это занимает 5 секунд).

1. Функциональные объявления и функции стрелки

Основа любого приложения React – это Компонент Отказ В реакции компоненты определяются как функциями JavaScript, так и классами.

Но в отличие от функций JavaScript, React Components возвращает элементы JSX, которые используются для структурирования нашего интерфейса приложения.

// JavaScript function: returns any valid JavaScript type
function javascriptFunction() {
  return "Hello world";
}

// React function component: returns JSX
function ReactComponent(props) {
  return 
{props.content}
   
}

Обратите внимание на различный корпус между названиями функций JavaScript и компонентами функции RACT. Функции JavaScript названы в корпусе верблюда, в то время как компоненты функции RACT записываются с помощью корпуса Pascal (в котором все слова являются капитализированными).

Есть два разных способа написать функцию в JavaScript: традиционный путь, используя Функция Ключевое слово, называется Декларация функции и как Функция стрелки , который был введен в ES6.

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

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

// Function declaration syntax
function MyComponent(props) {
  return 
{props.content}
;
}
 
// Arrow function syntax
const MyComponent = (props) => {
  return 
{props.content}
;
}
 
// Arrow function syntax (shorthand)
const MyComponent = props => 
{props.content}
;

/* 
In the last example we are using several shorthands that arrow functions allow:

1. No parentheses around a single parameter
2. Implicit return (as compared to using the "return" keyword)
3. No curly braces for function body
*/

Одним из небольших преимуществ использования функций «Декларации функций со стрелками» заключается в том, что вам не нужно беспокоиться о проблемах с подъемность .

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

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

function App() {
  return (
    <>
      {/* Valid! FunctionDeclaration is hoisted */}
      
      {/* Invalid! ArrowFunction is NOT hoisted. Therefore, it must be declared before it is used */}
      
    
}
  
function FunctionDeclaration() {
  return 
Hello React!
;   
}

function ArrowFunction() {
  return 
Hello React, again!
;   
}  

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

// Function declaration syntax can be immediately exported with export default or export
export default function App() {
  return 
Hello React
;   
}

// Arrow function syntax must use export only
export const App = () => {
  return 
Hello React
;     
}

2. Шаблонные литералы

JavaScript имеет неуклюжий историю работы с строками, особенно если вы хотите ConcateNate или подключите несколько строк вместе. До прибытия ES6, чтобы добавить строки вместе, вам нужно использовать + Оператор для добавления каждого строкового сегмента на другой.

С добавлением ES6 нам дали более новую форму строки под названием Шаблон литерал , который состоит из двух задних клещей `` вместо одиночных или двойных кавычек.

Вместо того, чтобы использовать + Оператор, мы можем подключить строки, поместив выражение JavaScript (например, переменную) в специальном $ {} синтаксис:

/* 
Concatenating strings prior to ES6.
Notice the awkward space after the word Hello?
*/
function sayHello(text) {
  return 'Hello ' + text + '!';
}

sayHello('React'); // Hello React!
 
/* 
Concatenating strings using template literals.
See how much more readable and predictable this code is?
*/
function sayHelloAgain(text) {
  return `Hello again, ${text}!`;
}

sayHelloAgain('React'); // Hello again, React!

То, что влияет на шаблонные литералы, это их способность использовать любое выражение JavaScript (то есть что-либо в JavaScript, которое разрешается к значению) в $ {} синтаксис.

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

/* Go to react.new and paste this code in to see it work! */
import React from "react";

function App() {
  const [isRedColor, setRedColor] = React.useState(false);

  const toggleColor = () => setRedColor((prev) => !prev);

  return (
    
      Button is {isRedColor ? "red" : "not red"}
    
  );
}

export default App;

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

import React from 'react';
import Head from './Head';

function Layout(props) {
  // Shows site name (i.e. Reed Barger) at end of page title
  const title = `${props.title} | Reed Barger`;  
    
  return (
     <>
       
         
       
       

        {props.children}
       
     
  );
}

3. Короткие условные условные: &&, ||, Темнарный оператор

Учитывая, что React – это просто JavaScript, очень легко условно показывать (или скрыть) элементы JSX, используя простые, если операторы и иногда переключатели.

import React from "react";

function App() {
  const isLoggedIn = true;

  if (isLoggedIn) {
    // Shows: Welcome back!
    return 
Welcome back!
;
  }

  return 
Who are you?
;
}

export default App;

С помощью некоторых основных операторов JavaScript мы сократили повторение и сделаем наш код более лаконичным.

Мы можем преобразовать указанное выше заявление в следующее, используя Темнарный оператор. Торговый оператор функционирует точно так же, как IF-оператор, но он короче, это выражение (не оператор), а может быть вставлен в JSX:

import React from "react";

function App() {
  const isLoggedIn = true;

  // Shows: Welcome back!
  return isLoggedIn ? 
Welcome back!
 : 
Who are you?
}

export default App;

Торжественные операторы также могут использоваться внутри фигурных скобок (опять же, поскольку это выражение):

import React from "react";

function App() {
  const isLoggedIn = true;

  // Shows: Welcome back!
  return 
{isLoggedIn ? "Welcome back!" : "Who are you?"
;
}

export default App;

Если бы мы сменили пример выше и хотели только показать текст, если пользователь вошел в систему (если Isloggedin верно), это было бы отличным использованием для && (а) оператор.

Если первое значение ( Operand ) в условном, верно, && Оператор отображает второй операнд. В противном случае он возвращает первый операнд. И так как это Falsy (Это значение автоматически преобразуется в логическое значение False на JavaScript), он не отображается JSX:

import React from "react";

function App() {
  const isLoggedIn = true;

  // If true: Welcome back!, if false: nothing
  return 
{isLoggedIn && "Welcome back!"}
;
}

export default App;

Допустим, мы хотим, что мы хотим, что мы сейчас делаем: только сказать «Кто ты? ” Если isloggedin неверно. Если это правда, мы ничего не покажем.

Для этой логики мы можем использовать (или) оператор. Это по сути работает напротив &&

import React from "react";

function App() {
  const isLoggedIn = true;

  // If true: nothing, if false: Who are you?
  return 
{isLoggedIn || "Who are you?"}
;
}

export default App;

4. Три метода массива: .map (), .filter (), .Ruce ()

Вставка примитивных значений в элементы JSX проста – просто используйте фигурные скобки.

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

import React from "react";

function App() {
  const name = "Reed";
  const bio = {
    age: 28,
    isEnglishSpeaker: true
  };

  return (
    <>
      
{name}
      
I am {bio.age} years old
      
Speaks English: {bio.isEnglishSpeaker}
    
  );
}

export default App;

Что, если у нас есть массив, и мы хотим повторить этот массив, чтобы показать каждый элемент массива в пределах отдельного элемента JSX?

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

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

/* Note that this isn't exactly the same as the normal JavaScript .map() method, but is very similar. */
import React from "react";

function App() {
  const programmers = ["Reed", "John", "Jane"];

  return (
    

      {programmers.map(programmer => 
{programmer}
)}
    
  );
}

export default App;

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

Почему? Потому что .карта () Как и многие методы массива, возвращает неглубокую копию массива, который оно итасировал. Это позволяет передавать его возвращенный массив на следующий метод в цепочке.

.filter () Как указывает его имя, позволяет нам фильтровать определенные элементы из нашего массива. Например, если мы хотели удалить все имена программистов, которые начались с «J», мы могли бы сделать это с .filter () :

import React from "react";

function App() {
  const programmers = ["Reed", "John", "Jane"];

  return (
    

      {/* Returns 'Reed' */}
      {programmers
       .filter(programmer => !programmer.startsWith("J"))
       .map(programmer => 
{programmer}
)}
    
  );
}

export default App;

Важно понимать, что оба .карта () и .filter () просто разные вариации . воздать () Метод массива, который способен преобразовывать значения массива на практически любой тип данных, даже неа массивных значений.

Вот . воздать () выполняя ту же операцию, что и наша .filter () Метод выше:

import React from "react";

function App() {
  const programmers = ["Reed", "John", "Jane"];

  return (
    

      {/* Returns 'Reed' */}
      {programmers
        .reduce((acc, programmer) => {
          if (!programmer.startsWith("J")) {
            return acc.concat(programmer);
          } else {
            return acc;
          }
        }, [])
        .map((programmer) => (
          
{programmer}
        ))}
    
  );
}

export default App;

5. Объектные трюки: Собственность Снаряжение, Разрушение, Распространение оператора

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

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

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

Это Объектное свойство Shothand :

const name = "Reed";

const user = {
  // instead of name: name, we can use...
  name
};

console.log(user.name); // Reed

Стандартный способ доступа к свойствам от объекта использует точечную обозначение. Однако еще более удобный подход Разрушение объекта Отказ Это позволяет нам извлекать свойства как отдельные переменные того же имени от данного объекта.

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

const user = {
  name: "Reed",
  age: 28,
  isEnglishSpeaker: true
};
 
// Dot property access
const name = user.name;
const age = user.age;
 
// Object destructuring
const { age, name, isEnglishSpeaker: knowsEnglish } = user;
// Use ':' to rename a value as you destructure it

console.log(knowsEnglish); // true

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

Вместо того, чтобы копировать свойства вручную, вы можете распространить все свойства объекта в другой объект (как вы его создаете) с помощью оператора распространения объекта:

const user = {
  name: "Reed",
  age: 28,
  isEnglishSpeaker: true
};

const firstUser = {
  name: user.name,
  age: user.age,
  isEnglishSpeaker: user.isEnglishSpeaker
};

// Copy all of user's properties into secondUser 
const secondUser = {
  ...user  
};

Что отлично относится к распространению объекта, состоит в том, что вы можете распространяться как много объектов в новую, как вам нравится, и вы можете заказать их как свойства. Но имейте в виду, что свойства, которые приходят позже с тем же именем, будут перезаписать предыдущие свойства:

const user = {
  name: "Reed",
  age: 28
};

const moreUserInfo = {
  age: 70,
  country: "USA"
};

// Copy all of user's properties into secondUser 
const secondUser = {
  ...user,
  ...moreUserInfo,
   computer: "MacBook Pro"
};

console.log(secondUser);
// { name: "Reed", age: 70, country: "USA", computer: "Macbook Pro" }

6: обещания + синтаксис Async/a ждать

Практически каждая приложение Reacts состоит из асинхронный код – код, который занимает неопределенное количество времени для выполнения. Особенно, если вам нужно получить или изменить данные с внешнего API, используя функции браузера, такие как Fetch API или сторонняя библиотека Axios Отказ

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

Обещает традиционно использовать обратные вызовы для разрешения нашего асинхронного кода. Мы используем .тогда () Обратный вызов Чтобы разрешить успешно разрешенные обещания, пока мы используем .catch () Обратный вызов для решения обещаний, которые реагируют с ошибкой.

Вот реальный пример использования реагирования на получение данных из My Github API с помощью API Fetch, чтобы показать свое изображение профиля. Данные разрешаются с использованием обещаний:

/* Go to react.new and paste this code in to see it work! */
import React from 'react';
 
const App = () => {
  const [avatar, setAvatar] = React.useState('');
 
  React.useEffect(() => {
    /* 
      The first .then() lets us get JSON data from the response.
      The second .then() gets the url to my avatar and puts it in state. 
    */
    fetch('https://api.github.com/users/reedbarger')
      .then(response => response.json())
      .then(data => setAvatar(data.avatar_url))
      .catch(error => console.error("Error fetching data: ", error);
  }, []);
 
  return (
    
  );
};
 
export default App;

Вместо того, чтобы всегда нуждаться в использовании обратных вызовов, чтобы разрешить наши данные из обещания, мы можем использовать очищенный синтаксис, который выглядит идентично синхронному коду, называемый async/a ждать синтаксис Отказ

Ключевые слова Async и await используются только с функциями (обычные функции JavaScript, не используемые компоненты функции RACT).

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

/* Go to react.new and paste this code in to see it work! */
import React from "react";

const App = () => {
  const [avatar, setAvatar] = React.useState("");

  React.useEffect(() => {
    /* 
	  Note that because the function passed to useEffect cannot be async, we must create a separate function for our promise to be resolved in (fetchAvatar)
    */
    async function fetchAvatar() {
      const response = await fetch("https://api.github.com/users/reedbarger");
      const data = await response.json();
      setAvatar(data.avatar_url);
    }

    fetchAvatar();
  }, []);

  return ;
};

export default App;

Мы используем .catch () Обратный вызов для обработки ошибок в традиционных обещаниях, но как вы ловите ошибки с Async/ждут?

Мы все еще используем .ловить() И когда мы попали в ошибку, например, когда у нас есть ответ от нашего API, который находится в диапазоне состояния 200 или 300:

/* Go to react.new and paste this code in to see it work! */
import React from "react";

const App = () => {
  const [avatar, setAvatar] = React.useState("");

  React.useEffect(() => {
    async function fetchAvatar() {
      /* Using an invalid user to create a 404 (not found) error */
      const response = await fetch("https://api.github.com/users/reedbarge");
      if (!response.ok) {
        const message = `An error has occured: ${response.status}`;
        /* In development, you'll see this error message displayed on your screen */
        throw new Error(message);
      }
      const data = await response.json();

      setAvatar(data.avatar_url);
    }

    fetchAvatar();
  }, []);

  return ;
};

export default App;

7. Модули ES + синтаксис импорта/экспорта

ES6 дал нам возможность легко поделиться кодом между нашими собственными файлами JavaScript, а также сторонние библиотеки, используя ES модули Отказ

Кроме того, когда мы используем такие инструменты, как WebPack, мы можем импортировать активы, такие как изображения и SVGS, а также файлы CSS и используют их как динамические значения в нашем коде.

/* We're bringing into our file a library (React), a png image, and CSS styles */
import React from 'react';
import logo from '../img/site-logo.png';
import '../styles/app.css';
 
function App() {
  return (
    

      Welcome!
      
    
  );
}
 
export default App;

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

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

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

// constants.js
export const name = "Reed";

export const age = 28;

export default function getName() {
  return name;   
}

// app.js
// Notice that named exports are imported between curly braces
import getName, { name, age } from '../constants.js';

console.log(name, age, getName());

Мы также можем написать все экспорт в конце файла вместо каждой переменной или функции:

// constants.js
const name = "Reed";

const age = 28;

function getName() {
  return name;   
}

export { name, age };
export default getName;

// app.js
import getName, { name, age } from '../constants.js';

console.log(name, age, getName());

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

// constants.js
const name = "Reed";

const age = 28;

function getName() {
  return name;   
}

export { name, age };
export default getName;

// app.js
import getMyName, { name as myName, age as myAge } from '../constants.js';

console.log(myName, myAge, getMyName());

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

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

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

Нажмите здесь, чтобы быть уведомленным, когда курс открывается

Оригинал: “https://www.freecodecamp.org/news/javascript-skills-you-need-for-react-practical-examples/”