Создайте клон Google Search с помощью React и Firebase

Вы хотите вывести свои навыки разработчика на новый уровень или произвести впечатление на своего будущего работодателя? Тогда собери этот клон Google!

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

Прежде, чем мы начнем

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

  • React - библиотека JavaScript для построения пользовательских интерфейсов.
  • Context API - эффективный способ передачи данных через дерево компонентов.
  • Material UI - одна из лучших библиотек пользовательского интерфейса для React, разработанная Google.
  • React Router - библиотека маршрутизации, используемая для создания маршрутизации в приложениях React.
  • Google Search API - JSON API пользовательского поиска, позволяющий получать результаты веб-поиска в формате JSON.
  • Firebase - платформа Google, которая помогает создавать мобильные и веб-приложения.

В этом руководстве я буду использовать Visual Studio Code, но вы можете использовать любой редактор кода. Мне лично нравится VS Code, потому что он значительно упрощает программирование.

Хватит говорить ... давайте код!

1. Настройте приложение React.

Сначала мы собираемся создать и настроить приложение React:

  • Создайте новую папку с именем google-clone и откройте ее с помощью Visual Studio Code.
  • Теперь, когда вы находитесь в VS Code, нажмите Command + ò (на Mac) или Ctrl + ò (на Windows), чтобы открыть терминал.
  • Введите в терминале следующее и нажмите Enter: npx create-react-app .

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

Давайте теперь очистим наш стартер приложения React, чтобы мы могли начать с клона Google.

  • Удалите эти ненужные файлы из папки public: favicon.ico, _5 _, _ 6_ и robots.txt.

  • Удалите из папки src эти ненужные файлы: App.test.js, logo.svg и setupTest.js.

  • Перейдите к App.css и удалите все содержимое этого файла.
  • Теперь перейдите к index.css и добавьте этот фрагмент кода, чтобы удалить поле по умолчанию: * {margin: 0}.
  • Внутри файла App.js удалите <header> и добавьте простой <h1>.
  • Ваш App.js файл теперь должен выглядеть так:

Теперь мы можем, наконец, ввести npm start в терминале и запустить наше приложение.

Наконец-то шаблон React настроен, и мы готовы создавать клон!

2. Установите домашнюю страницу.

Давайте организуем нашу среду, создав две разные дополнительные папки в папке src : components и pages. Папка components будет включать повторно используемые компоненты, такие как панель поиска. Папка pages будет содержать домашнюю страницу и страницу поиска.

Начнем с главной страницы!

  • В папке pages создайте файл с именем Home.js.
  • Когда вы войдете в файл, введите rfce , чтобы использовать фрагмент из ES7 Snippets . Это создаст компонент React, готовый к экспорту. .
  • По-прежнему в папке pages создайте файл Home.css и импортируйте его в свой Home.js компонент.
  • Домашняя страница будет состоять из двух разных элементов:

Заголовок:

Тело:

3. Создайте заголовок главной страницы.

  • В файле Home.js создайте два divs с classNames home__header и home__body . home__header будет также содержать двух <div> потомков с className home__headerLeft и home__headerRight .
  • Внутри этих divs у нас будет четыре <Link> компонента из React Router, компонент <Icon/> и компонент <Avatar/> из Material UI.
  • Чтобы придать стиль нашему Home.js компоненту, откройте Home.css и добавьте следующий код:

Чтобы отобразить значки и аватар, мы должны установить Material UI .

  • Откройте терминал и введите следующую команду:
npm install @material-ui/core @material-ui/icons
  • Теперь импортируйте значок сетки и аватар в файл Home.js:
import {Avatar} from "@material-ui/core";
import AppsIcon from “@material-ui/icons/Apps”;
  • Компоненты <Link> позволяют пользователям перемещаться по приложению без перезагрузки страниц. Чтобы использовать их, установите React Router. Откройте свой терминал и введите следующую команду, чтобы установить response-router-dom:
npm install react-router-dom
  • В файле Home.js импортируйте компонент <Link> из response-router-dom:
import {Link} from “react-router-dom”;
  • К этому моменту ваш Home.js файл должен выглядеть так:

Чтобы <Link> компоненты работали, мы должны настроить React Router.

  • Перейдите к App.js и импортируйте следующие зависимости:
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
  • Оберните все приложение в компонент <Router>, чтобы каждый компонент имел доступ к маршрутизатору.
  • Добавьте компонент <Switch>. Этот компонент будет отображать только первый маршрут, соответствующий текущему URL-адресу.
  • Внутри компонента <Switch> добавьте маршруты с их собственными путями. Компонент <Route> отображает определенный пользовательский интерфейс, если его путь совпадает с текущим URL-адресом.
  • Импортируйте компонент Home и визуализируйте его внутри компонента <Route path=”/”> .

Ваш App.js файл теперь должен выглядеть так:

Мы только что создали заголовок домашней страницы!

4. Добавьте логотип домашней страницы.

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

Окончательный Home.css файл будет выглядеть так:

  • Вернувшись в Home.js файл, добавьте второго <div> дочернего элемента с className равным home__inputContainer. Внутри этого <div> мы будем визуализировать компонент <Search/> .

Ваш Home.js файл теперь должен выглядеть так:

Заключение

На этом все. Подведем итоги того, что мы уже сделали:

  1. Настройте приложение React.
  2. Установил и настроил React Router.
  3. Создал заголовок домашней страницы.
  4. Добавлен и стилизован логотип Google.

В следующей статье мы создадим компонент <Search/> и закончим домашнюю страницу Google. Будьте на связи!