React-Сайт ( IV ). Навигация по странице. Деплой приложения

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

---

Все статьи этого проекта:

• React-Сайт ( I ). Меню и слайдер.
• React-Сайт ( II ). Инфо-основная секция.
• React-Сайт ( III ). Цены-локация секции.
• React-Сайт ( IV ). Навигация по странице. Деплой приложения

---

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

Для того, чтобы оно заработало так как нам надо, и осуществлялись плавные переходы между секциями, мы воспользуемся готовым пакетом react-scroll. Если вы еще не установили этот пакет, то самое время это сделать:

npm install react-scroll

Все наше меню сейчас находится в файле src/Components/Header_footer/SideDrawer.js

import React from "react";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
const SideDrawer = props => {
  return (
    <Drawer
      anchor="right"
      open={props.open}
      onClose={() => props.onClose(false)}
    >
      <List component="nav">
        <ListItem button onClick={() => console.log("Start Events")}>
          Event starts in
        </ListItem>

        <ListItem button onClick={() => console.log("React info")}>
          React info
        </ListItem>

        <ListItem button onClick={() => console.log(" Our Team")}>
          Our Team
        </ListItem>

        <ListItem button onClick={() => console.log("Pricing")}>
          Pricing
        </ListItem>

        <ListItem button onClick={() => console.log("Location")}>
          Location
        </ListItem>
      </List>
    </Drawer>
  );
};

export default SideDrawer;

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

import { scroller } from "react-scroll";
//......code components
    const scrollToElement = element => {
        scroller.scrollTo(element, {
        duration: 1500,
        delay: 100,
        smooth: true,
        offset: -80
        });
        props.onClose(false);
    };

Значение offset: -80 помогает передвигаться именно к началу элемента. Я его подобрал эмпирически.

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

src/Components/Header_footer/SideDrawer.js

import React from "react";
import { scroller } from "react-scroll";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
const SideDrawer = props => {
  const scrollToElement = element => {
    scroller.scrollTo(element, {
      duration: 1500,
      delay: 100,
      smooth: true,
      offset: -80
    });
    props.onClose(false);
  };

  return (
    <Drawer
      anchor="right"
      open={props.open}
      onClose={() => props.onClose(false)}
    >
      <List component="nav">
        <ListItem button onClick={() => scrollToElement("start-events")}>
          Event starts in
        </ListItem>

        <ListItem button onClick={() => scrollToElement("react-info")}>
          React info
        </ListItem>

        <ListItem button onClick={() => scrollToElement("out-team")}>
          Our Team
        </ListItem>

        <ListItem button onClick={() => scrollToElement("pricing")}>
          Pricing
        </ListItem>

        <ListItem button onClick={() => scrollToElement("location")}>
          Location
        </ListItem>
      </List>
    </Drawer>
  );
};

export default SideDrawer;

Пока что, ничего работать не будет.

Для этого нам нужно в компоненте App.js взять из этой библиотеки Element

import { Element } from "react-scroll";

И обернуть в него все компоненты.

import React from "react";
import "./resources/style.css";
import { Element } from "react-scroll";
import Header from "./Compomemts/Header_Footer/Header";
import Slider from "./Compomemts/Slider";
import Info from "./Compomemts/Info";
import Highlights from "./Compomemts/Highlights";
import Pricing from "./Compomemts/Pricing";
import Location from "./Compomemts/Location";
import Footer from "./Compomemts/Header_Footer/Footer";
function App() {
  return (
    <div className="App">
      <Header />
      <Element name="start-events">
        <Slider />
      </Element>
      <Element name="react-info">
        <Info />
      </Element>
      <Element name="out-team">
        <Highlights />
      </Element>
      <Element name="pricing">
        <Pricing />
      </Element>
      <Element name="location">
        <Location />
      </Element>

      <Footer />
    </div>
  );
}

export default App;

Обратите внимание, что имя элемента - name="value" (в данном случае - value) должно совпадать с тем значением, которое мы передали функции в файле SideDrawer.js

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

Все файлы проекта на этом этапе смотрите в репо - react-site-slider-abc
ci -m "Scroll menu"

Деплой

Мы пойдем очень простым путем. Для деплоя воспользуемся самым простым сервисом - Surge.

Если вы ранее не работали с ним, то там есть отличная документация и ее стоит прочитать. А вообще, все очень и очень просто.

Для начала нам нужно собрать наше приложение ( build ). Для этого запустим команду

npm run build

И подождем некоторое время, пока не закончится создание готовой для деплоя версии.

В корне приложения появится новая папка - build, в которой и будут находиться готовые для выкладывания в интернет файлы нашего приложения.

Пока идет работа по строительству файлов, мы установим необходимый пакет surge глобально:

npm install --global surge

Потребуется ввести адрес электронной почты и придумать пароль. Более подробно на сайте Getting started with Surge.

Когда закончится билдинг, то у вас в корне сайта появится папка build и именно ее мы разместим на сервере Surge.

Для этого нам достаточно ввести одну команду

surge -p build

В данном случае мы используем флаг -p, чтобы выложить не все файлы, а только те, что в папке build

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

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

Готовый сайт на surge.sh



                                                                                                                                                             

Телеграм канал - Full Stack JavaScript Developer