Фаза 2 Опыт | Реагировать

Компоненты | Реквизит | состояние | События | Побочные эффекты | Получение данных | Маршрутизация на стороне клиента

Во-первых, я хотел начать с понимания того, что делает React и как он работает. Перед этим я хочу показать через URL-адрес React, как запустить ваш проект React. Это очень важно для запуска ваших одностраничных приложений (SPA).



Начало работы | Создать приложение React
Создать приложение React — это официально поддерживаемый способ создания одностраничных приложений React. Он предлагает современную сборку…create-react-app.dev



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

npm install -g json-server

Затем давайте создадим данные:

{
  "shows": [
    { 
      "id": 1, 
      "name": "That 70's Show",
    }
  ]
}

И, наконец, мы запускаем сервер с помощью:

json-server --watch db.json

Если мы перейдем на http://localhost:3000/shows/1, то увидим:

{ "id": 1, "name": "That 70's Show" }

Я чувствую, что это важно знать, поскольку мне потребовалось некоторое время, чтобы вспомнить. В любом случае, React построен из JavaScript с использованием JSX, расширения ванильного JavaScript. Он очень похож на HTML, но делается проще. Babel используется для преобразования синтаксиса. Это позволяет нам писать код с меньшим количеством элементов HTML и более организованным кодом. Что такое Вавилон в деталях:



Что такое Вавилон? · Babel
Babel — это компилятор JavaScriptbabeljs.io



Двигаемся вперед с компонентами в React. Это просто и помогает организовать ваш проект. Вот как мы можем отделить то, что что-то делает на вашем сайте. Например, если вы хотите, чтобы компонент легко читался и был организован так, чтобы отображалась только карточка, вы можете написать свой код и передать реквизиты. Итак, от родительского компонента мы передаем что-то, называемое реквизитом. Здесь мы можем предоставить информацию в родительском и отправить ее дочернему. Это полезно для того, чтобы не удваивать рабочую нагрузку.

Теперь мы можем передать свойство от родительского компонента к дочернему компоненту. Как насчет наоборот? Да, это возможно! Вы можете иметь функцию обратного вызова в родительском компоненте и передать ее дочернему компоненту для использования. Например, я создаю функцию с именем «clickFunction». Что он будет делать, так это просто console.log("Hello World"). Мы передаем свойство (имя функции) дочернему компоненту, и оттуда мы можем добавить событие onClick к кнопке и вызвать функцию, созданную в родительском компоненте. Это полезно, если другой компонент должен использовать эту функцию.

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

import React, { useState } from "react";

Теперь, говоря об обработке событий в React, мы используем разные события. Например, если мы хотим добавить обработчик кликов, мы будем использовать onClick. Не забудьте про CamelCase. Популярными являются onClick, onSubmit и onChange. Мы видим, насколько это лучше по сравнению с ванильным JS, записывающим «.addEventListener». Самое замечательное в этих обработчиках событий то, что мы передаем их с функцией.

Example: 

function hello() {
  console.log("Hello World!")
}

return (
  code....
    onClick={hello}
)

Побочные эффекты, мы можем думать об этом как о функции, и это вызывает изменения в нашем приложении за пределами функции. Это будет иметь побочный эффект. Опять же, нам нужно импортировать хук useEffect, чтобы передать функцию обратного вызова для запуска побочного эффекта. Обычно то, что я использовал в своем проекте для фазы 2, — это получение API. Когда мы говорим о выборке данных с помощью хука useEffect, кое-что очень интересное и классное в этом заключается в том, что когда мы извлекаем данные, мы хотим, чтобы они запрашивались только один раз, и нам не нужно было продолжать извлекать данные снова и снова. UseEffect помогает нам с зависимостями в конце кода.

useEffect(() => {
    fetch(API_URL)
      .then((r) => r.json())
      .then((data) => {
        console.log(data);
      });
  }, []);

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

И последнее, что я хотел закончить с маршрутизацией на стороне клиента. Уникальность этого заключается в том, что когда речь идет об одностраничном приложении, мы можем разделить наши компоненты на разные страницы. Каждая страница будет иметь уникальный URL. Если мы хотим перенаправить на другие страницы, такие как страница «о нас» или страница «вход», мы можем использовать маршрутизацию на стороне клиента. Что он будет делать, так это отображать страницы. Когда кто-то находится на вашем сайте и нажимает на страницу «о нас», мы видим скорость от страницы к странице. Это одно из самых больших его преимуществ.

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