Сборка и развертывание приложения React JS Movie Info, часть 2

Во второй части нашей серии Создание и развертывание приложения React JS Movie Info мы начнем создавать наше приложение. Если вы не понимаете, о чем я говорю, вы можете ознакомиться с первой частью этой серии.

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

Ниже приведен базовый макет нашего приложения.

Не беспокойтесь о стиле, потому что это сейчас не наша забота.

Шаг 1

Разделим наше приложение на компоненты:

1. Контейнерный компонент содержит компонент поиска и компонент списка фильмов.
2. Компонент поиска содержит поле поиска (элемент ввода)
3. Компонент фильмов — это список компонентов фильмов. Каждый компонент фильма внутри компонента фильмов состоит из изображения и заголовка.
4. Компонент фильма содержит изображение фильма и заголовок.

Шаг 2

Начнем с компонента-контейнера.

Создайте файл Container.js в папке src.

Если вы забыли, что такое папка src, посмотрите ниже каталог нашего проекта, который мы получили, когда установили create-react-app.

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

В верхней части вашего файла включите эту строку

import React from 'react';

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

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

class Container extends React.Component {
}

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

class Container extends React.Component {
  render() {
    return (
      <h1>This is container component</h1>
    )
  }
}

Примечание. Заключайте элементы внутри оператора return в пару круглых скобок ()

Каждый метод рендеринга должен возвращать один элемент. Он может иметь вложенные элементы, но самый внешний элемент должен быть одиночным.

То, что мы написали внутри return, — это JSX. Если вам интересно, как мы можем писать html внутри javascript, то это не html, а синтаксис, подобный html.

Поэтому, если мы удалим оператор импорта React сверху, вы больше не сможете писать этот html-подобный синтаксис, потому что JSX является частью React.

Итак, мы уже обсудили, что наш компонент Container будет состоять из компонента поиска и компонента фильма.

Мы можем использовать эти компоненты внутри оператора return, но мы должны сначала создать его. Мы начнем с компонента поиска. Итак, давайте создадим Search.js внутри папки src, прежде чем использовать его в операторе return компонента Container.

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

Итак, теперь наш компонент будет выглядеть так

class Container extends React.Component {
  render() {
    return (
      <div className='container-fluid'>
        <h2>Search for Movies or Seasons</h2>
        <Search />
      </div>
    )
  }
}

Примечание: h2 и div — это элемент реакции, а поиск — компонент реакции. Вы определяете компонент React с первой буквой в верхнем регистре. Если у вас есть реагирующий компонент с более чем одним словом, вы используете верблюжий регистр, например MovieList

Также мы используем ClassName вместо класса для определения класса (чтобы вы могли стилизовать свои элементы). Просто чтобы напомнить вам, что мы обсуждали, что это html, как синтаксис, но это не html, это JSX. Причина, по которой это ClassName, потому что класс является зарезервированным словом в javascript

Если вы сейчас зайдете в браузер, он покажет что-то вроде

Если вы хотите использовать компонент поиска внутри компонента контейнера, сначала импортируйте его в файл Container.js, поскольку вы импортировали React.

import Search from './Search'

Примечание. Кроме того, если вы импортируете некоторые файлы, созданные вами, в какой-либо другой файл, это записывается, как указано выше, где «./» означает текущий каталог.

Теперь ваш файл Container.js будет выглядеть так:

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

Внутри src в файле App.js импортируйте файл Container.js и включите его в оператор return.

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

Наш файл поиска будет выглядеть примерно так

Это почти аналогичный синтаксис, за исключением того, что мы создаем компонент поиска.

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

Из этой статьи вы узнали

1. Как написать компонент в React (конечно, есть и другой способ написать компонент, который мы обсудим позже)

2. Вы понимаете, что такое JSX (он похож на html, но не на html)

3. Что делают импорт и экспорт (в основном позволяют использовать один файл в другом файле).

4. Как включить компонент в другой компонент (сначала его легко импортировать, а затем окружить угловыми скобками, например ‹Поиск /›).

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

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