Мое знакомство с react: веселые, динамичные веб-страницы

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

JavaScript сложен для меня, потому что существует множество способов получить один и тот же результат, что является своего рода обоюдоострым мечом. JSX и React изменили мою жизнь. Я получил возможность читать код, который имел знакомое ощущение «HTML», но создавал сложные веб-страницы на JavaScript.

Например, если бы я хотел вывести список в DOM с помощью JavaScript, я должен был бы сделать что-то вроде этого:

JavaScript

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

// imagine listDiv is my container holding the cards
const dogs = [ 
{name: "Bug" image: "doggoimage.com/bug"},
{name: "Stella" image: "doggoimage.com/stella"}]

document.addEventListener("DOMContentLoaded", () => {
const dogCard = (dog) => {

const card = document.createElement("div")
card.className = "card"
listDiv.append(card)

const name = document.createElement("h3")
name.textContent = dog.name
card.append(name)

const image = document.createElement("img")
image.className = "good-doggo-image"
image.src = dog.image
  }
// fetch request here....
}
Вход в полноэкранный режим Выход из полноэкранного режима

Это очень много работы! Вы можете спросить себя, зачем мне изучать react? Это просто другой способ сделать то же самое. Приведенный выше код называется императивным; мы вручную манипулируем DOM для достижения определенного результата. При императивном программировании мы говорим DOM, что делать, на каждом шагу. Это приводит к повторяющемуся коду, который труднее читать.

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

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

React

Предполагая тот же массив объектов собак выше…

import React, { useState } from "react"

export default function DogList(){
const [doggos, setDoggos] = useState([])

fetch("doggoimage.com")
  .then(r => r.json)
  .then(dogs => setDoggos(dogs))

const renderedCard = doggos.map((doggo) => {
  return (
    <DoggoCard name={doggo.name} image={doggo.image} />
  )
})
     return (
       <div className="card-container">
       {renderedCard }
       </div>
  )
}


Войти в полноэкранный режим Выход из полноэкранного режима

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

import React from "react"

export default function DoggoCard({ name, image }){
    return (
      <div className="doggo-card">
        <span className="doggo-name">{name}</span>
        <img alt={name} src={image} />
      </div>
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

Это может показаться таким же или даже большим объемом работы, но с JavaScript вам пришлось бы делать гораздо больше, чтобы вносить изменения, добавлять что-то, даже переписывать исходный код снова и снова. Этот формат делает за нас много работы под капотом и позволяет нам сосредоточиться на стилях и интересных моментах веб-разработки. React также позволяет нам добавлять уникальные функции в наши компоненты, используя всего несколько строк дополнительного кода. Хотите, чтобы при нажатии на карточку появлялось альтернативное изображение? Легко! Просто добавьте слушатель события onClick в шаблон карточки и делайте, что хотите!

import React from "react"

export default function DoggoCard({ name, image }){
    return (
      <div className="doggo-card">
        <span className="doggo-name">{name}</span>
        <img 
          alt={name} 
          src={image} 
          onClick={(e) => console.log("You clicked me!")}
         />
      </div>
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

Заключение

Мой опыт работы с react поначалу был пугающим, было достаточно сложно изучить основы JavaScript, не говоря уже о том, чтобы перевести их в совершенно новый мир синтаксиса. Если вы похожи на меня и имеете некоторый опыт работы с HTML, то этот синтаксис не покажется вам таким уж чуждым. Как только вы поймете суть происходящего, вы поймете, почему React так популярен в сообществе веб-разработчиков. Взять кусочки головоломки и поставить их на место — это приятное чувство. Создание костей вашего веб-приложения с помощью React становится очень простым, что позволяет вам провести остаток времени, пытаясь расшифровать тайны CSS ;).

Оцените статью
devanswers.ru
Добавить комментарий