Git - работа с репо без пароля.

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

Создание нового ssh-ключа и добавление ssh-agent достаточно хорошо и понятно расписано на самом GitHub и трудностей здесь возникнуть не должно. Поэтому я не буду на этом останавливаться. Рассмотрим некоторые более сложные вопросы, которые могут возникнуть.

Тема актуальна для пользователей Windows и Git-Bash оболочки.

Для начала стоит проверить существуют ли уже у вас ключи в вашем Git. Для этого вам нужно открыть Git Bash и ввести команду:

$ ls -al ~/.ssh
# Команда покажет файлы в вашем каталоге .ssh, если они существуют

Если вы увидите что-то похожее на файлы с такими расширениями, значит ключи уже есть.
id_dsa.pub
id_ecdsa.pub
id_ed25519.pub
id_rsa.pub
В этом случае, нам остается их скопировать и вставить в настройки аккаунта на GitHub.

Для копирования в буфер обмена вводим команду:

$ clip < ~/.ssh/id_rsa.pub
# Копирует содержимое файла id_rsa.pub в буфер обмена

Идем в настройки вашего аккаунта:

На боковой панели настроек пользователя нажмите клавиши SSH и GPG.

Выбираем New SSH key or Add SSH key.

В поле «Title» добавьте описательную метку для нового ключа. Например, если вы используете персональный ключ, вы можете назвать этот ключ «Personal Windows Air».

Вставьте свой ключ в поле «Key».

Нажмите кнопку добавить - Add SSH key.

Далее будет предложено, подтвердите свой пароль GitHub.

Идем в корневую директорию вашего Git

$ cd ~

В ней нам нужно создать файл .profile с настройками:

$ echo '' >> .profile #создаем пустой файл .profile

Открываем его в любом редакторе и вставляем в него:

env=~/.ssh/agent.env

agent_load_env () { test -f "$env" && . "$env" >| /dev/null ; }

agent_start () {
    (umask 077; ssh-agent >| "$env")
    . "$env" >| /dev/null ; }

agent_load_env

# agent_run_state: 0=agent running w/ key; 1=agent w/o key; 2= agent not running
agent_run_state=$(ssh-add -l >| /dev/null 2>&1; echo $?)

if [ ! "$SSH_AUTH_SOCK" ] || [ $agent_run_state = 2 ]; then
    agent_start
    ssh-add
elif [ "$SSH_AUTH_SOCK" ] && [ $agent_run_state = 1 ]; then
    ssh-add
fi

unset env

Если все прошло успешно, то вы все сделали правильно и теперь у вас есть возможность использовать ssh-доступ к вашим репо. Если же, у вас уже не только существует, но и используется (возможно для отдельно взятого репо) ключ, то вы получите предупреждение розовым цветом вверху страницы.

Error: Key already in use

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

Здесь все проще простого. Вводим в Bash

$ ssh -T -ai ~/.ssh/id_rsa git@github.com
# Подключитесь к GitHub используя определенный ключ ssh
> Hi username! You've successfully authenticated, but GitHub does not
> provide shell access.

Имя пользователя в ответе - это учетная запись GitHub, к которой в данный момент подключен ключ. Если ответ выглядит как «username / repo», ключ был прикреплен к хранилищу в качестве ключа развертывания.

Идете в это репо и в настройках удаляете ключ.

Если вы все сделали правильно, значит теперь вы сможете получать доступ к репо по ssh-соединению. Для работы со старыми репо, которые установлены у вас на машине, вам стоит переподключить их. Это делается достаточно просто.

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

git remote -v

Открыть git-Bash в нужной папке - правая кнопка мыши в нужной папке и выбрать Открыть Git Bash Here

Если ваш репо связан по http- протоколу, то для того, чтобы его переключить на ssh нам нужно, находясь в нужной папке на локальном машине ввести в git-bash следующее.

git remote set-url origin git@github.com:username/reponame.git

Вместо выделенного желтым - git@github.com:username/reponame.git в примере сверху, вам нужно вставить ссылку на ssh-соединение вашего репо. Её вы можете взять на gitHub вашего репо, нажав на кнопку Clone or download. Выбрать - Use SSH и скопировать ссылку (подчеркнуто на фото).

Таким простым способом, мы с вами получили доступ по SSH протоколу к нашему GitHub - репо.

Если эта тема для вас интересна, то я могу вам рассказать, как работать с несколькими аккаунтами с одной машины.

Пишите в комментариях, кодируйте и добивайтесь успехов!

Материалы по Git, которые могут быть вам интересны:

• "Git - добавление репозитория на GitHub"
• Git - работа с репо без пароля.
• Git - добавление репозитория на GitHub.
• Добавление файлов в существующий репозиторий GitHub.
• Git - Клонирование репозитория GitHub на компьютер.

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.

Удачного кодирования!                                                                                                                                                              

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

---

Помочь проекту (любая валюта). DONATE

Node.js - Переименование файлов.

Сегодня мы познакомимся с файловой системой Node.js, а именно с массовым переименованием файлов в определенной папке (директории)

Ранее, я много писал о работе с Node.js. Если вы что-то пропустили, то посмотрите в разделе "Карта сайта". Можете воспользоваться поиском по сайту, или выбрать посты о Node.js по ярлыку. Можете просто пройти по ссылке в начале абзаца на оглавление сайта, а именно к разделу о Node.js.

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

Например: У меня на компьютере есть некая папка "srcImage", в которой лежат файлы с разнообразными именами, которые мы хотим изменить. Переименованные файлы мы будем сохранять или в этой же папке, или в любой другой папке (директории).

В Node.js есть встроенный модуль - fs - File System, который предоставляет нам такую ( и множество других) полезную возможность. Мы им и воспользуемся.

Если посмотреть документацию, то там все очень очень просто:

fs.rename('/tmp/hello', '/tmp/world', (err) => {
  if (err) throw err;
  console.log('renamed complete');
});

Обязательно посмотрите в этом блоге -Как правильно задать путь к файлу. Это значительно облегчит вашу жизнь в дальнейшем!

В приведенном примере из документации, все очень просто:

/tmp/hello - относительный путь к папке в которой нужно переименовать файлы и сам файл.

/tmp/world - относительный путь к папке в которую нужно положить переименованный файл и сам файл.

Если будет ошибка, то отследить её в консоли, а если успех, то вывести сообщение, что все прошло успешно.

Нашу задачу мы разобьем на такие подзадачи:

1. Выбрать шаблон для переименования - придания однотипности новым именам файла.
2. Получить последовательный доступ к файлам, которые лежат в определенной директории для переименования.
3. Изменить значение каждого файла на удобное.
4. Отправить файлы в нужную папку.
5. Поймать ошибку в случае неудачи или подтверждение - в случае успеха.

Выбрать шаблон для переименования

Вы можете сделать это по собственному усмотрению. Например - задать его из определенного количества случайных цифр и букв ( но тогда он ничем не будет отличаться от исходных :-) ) Или задать некое строковое значение. Например: "My_favorite_file", "vacation" и т.д.

Я решил использовать дату в формате дд-мм-гг (01-10-2019). К дате мы будем добавлять порядковый номер файла в папке и некое префиксное значение. Его я добавил, потому что я часто перемещаю файлы в различные папки и мне удобно знать изначальное место хранения данного файла.

Итак, приступаем. Создадим файл, например rename.js

Первым делом импортируем в него нужный нам модуль:const fs = require("fs");

Получим дату в нужном формате и выведем её в консоль:

const fs = require("fs");

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();

var data_f = curr_date + "-" + curr_month + "-" + curr_year;
console.log(data_f);
// 1-10-2019

1. Если вы работаете, как и я в VS-Code, то сделать это очень просто нажатием клавиш Ctrl + Shift + Ё `(открыть консоль) и запустить код - Ctrl + Alt + N (с расширением code runner) или другим способом.


2. Посмотреть список установленных расширений - просто введите в консоль code --list-extensions и нажмите Enter


3. Проще всего запустить файл из Node.js - находясь в нужной директории, набрать в консоли node и имя_файла. В нашем случае это node rename. Именно так мы и будем делать, потому как наш скрипт будет работать на Node.js.

Получить последовательный доступ к файлам

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

Для того, чтобы этот метод сработал правильно, мы должны передать в него первым аргументом - путь к файлам, а вторым - функцию обратного вызова (callback-function) в которую первым аргументом передадим ошибку - err, а вторым полученные файлы, который и выведем в консоль методом forEach, в который дополнительно передадим порядковый номер файла - i. В консоли покажем каждый файл с соответствующим ему порядковым номером i

const fs = require("fs");
const srcFolder = "C:/Users/Branch/Node/abc-rename-file/srcImage/";
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();

var data_f = curr_date + "-" + curr_month + "-" + curr_year;

fs.readdir(srcFolder, (err, files) => {
  files.forEach((file, i) => {
    console.log(`${file} i=${i}`);   
  });
});

В переменную srcFolder нам следует поместить относительный, но лучше (для будущего использования) абсолютный путь к файлу в виде строкового значения.

запускаем наш код :

node rename

И теперь в консоли мы увидим все файлы из папки с порядковыми номерами.

Изменить значение каждого файла.

Для наглядности, я создам папку, куда мы будем перемещать переименованные файлы в другой директории и назову ее outImage. В наш код помещу абсолютный путь к ней в переменную outFolder:

const outFolder = "C:/Users/Euroset/GoogleD/outFolder/";

Как я говорил ранее, я создам дополнительно свой префикс, который добавлю к дате, полученной ранее:

var myPrefix = "y";
var prefix = myPrefix + data_f;

Сейчас, нам остается воспользоваться встроенным методом для переименования файлов, о котором я говорил ранее и добавить к имени наш префикс и порядковый номер, ну и конечно не забыть поймать ошибку, если есть или вывести сообщение об успехе:

fs.rename(srcFolder + file, outFolder + i + prefix + ".jpg", err => {
      if (err) throw err;
      console.log("rename completed!");
    });

запускаем наш код :

node rename

В консоль получим многократный вывод сообщения об успешном завершении операции. Папка srcImage пуста, а в новой папке outFolder появились переименованные соответствующим образом файлы:

rename полностью:

const fs = require("fs");
const srcFolder = "C:/Users/Branch/Node/abc-rename-file/srcImage/";
const outFolder = "C:/Users/GoogleD/outFolder/";

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();

var data_f = curr_date + "-" + curr_month + "-" + curr_year;
var myPrefix = "y";
var prefix = myPrefix + data_f;

fs.readdir(srcFolder, (err, files) => {
  files.forEach((file, i) => {
    fs.rename(srcFolder + file, outFolder + i + prefix + ".jpg", err => {
      if (err) throw err;
      console.log("rename completed!");
    });
  });
});

Таким образом, мы создали простой скрипт, который позволяет переименовывать (задавать имена) файлам и перемещать их в нужную директорию. Это может не только помочь вам в изучении Node.js, но и значительно сэкономить время.

Этот скрипт можно дорабатывать бесконечно. Можно сделать очень много различных манипуляций. Есть предложения? Пишите в комментариях!

Удачного кодирования - Happy coding и до скорых встреч.

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

Посмотреть код на gitHub abc-rename-files-with-node commit - "rename files with Node.js"

---

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

1. Легко и быстро запускать скрипт из любой директории.
2. Сохранять исходное расширение файла.

1. Для этого нам нужно воспользоваться встроенным модулем path. Первое, что нам нужно сделать, это импортировать его в наш скрипт:

var path = require("path");

После этого, мы можем автоматически получать путь к директории, в которой расположен наш скрипт, методом __dirname()

Предположим, что файлы, которые мы будем изменять, лежат в некоей общей для них директории (например - Common как на рис. ниже) и в папке с именем srcImage . В этой же директории мы создадим папку для измененных файлов - outImage

Файловая структура выглядит вот так:

Теперь мы можем легко прописать путь в папку исходных и измененных файлов:

const srcFolder = path.resolve(__dirname, "srcImage") + "/";
const outFolder = path.resolve(__dirname, "outImage") + "/";

Этот скрипт можно легко запустить, если в проводнике виндовс, выбрать нужную папку (на схеме - Common Folder), нажать правую кнопку мыши и , если у вас установлен Bash (а он идет вместе с Node.js), выбрать - Git Bash Here. Таким образом, вы откроете терминал сразу в нужной папке.

Если у вас не получилось, то перейдите в нужную директорию командой

cd folder_name

Теперь, для запуска скрипта нужно набрать:

node rename

2. Для того, чтобы сохранять расширения у изменяемых файлов, нам нужно опять воспользоваться тем же модулем path и внутри цикла forEach получить расширение файла, сохранив его в изменяемую переменную:

let extension = path.extname(file);

Теперь, нам остается заменить, внутри функции fs.rename добавляемое окончание (расширение) файла - ".jpg", на extension

fs.rename(srcFolder + file, outFolder + i + prefix + extension, err => {
      if (err) throw err;
      console.log("rename completed!");
    });

Код из файла rename.js полностью:

const fs = require("fs");
var path = require("path");

const srcFolder = path.resolve(__dirname, "srcImage") + "/";
const outFolder = path.resolve(__dirname, "outImage") + "/";

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();

var data_f = curr_date + "-" + curr_month + "-" + curr_year;
var myPrefix = "-t-t-t-";
var prefix = myPrefix + data_f;

fs.readdir(srcFolder, (err, files) => {
  files.forEach((file, i) => {
    let extension = path.extname(file);
    fs.rename(srcFolder + file, outFolder + i + prefix + extension, err => {
      if (err) throw err;
      console.log(`rename - ${file} completed!`);
    });
  });
});

Теперь, если нам нужно поменять название всех файлов в некоторой папке, то мы копируем этот файл и вставляем его на одну директорию выше тех папок - srcImage (исходные изображения) outImage (пустая, вновь созданная, куда будут помещены переименованные файлы).

Открываем rename.js в редакторе и меняем srcImage и outImage на названия ваших папок. Можно это делать и в одной папке, без создания дополнительной outImage, для готовых файлов. В этом случае у вас будут совпадать названия, которые вы вставите на место указанных мной srcImage и outImage.

Префикс, вы можете установить по своему усмотрению и вкусу. Я поставил произвольный - -t-t-t- .

Для примера я поместил в папку srcImage тестовые файлы с разными расширениями:

Теперь, открываю gitBash, как я описывал выше, в CommonFolder и запускаю скрипт:

node rename

В терминале, я вижу перечисленные в порядке процесса переименования файлы ( старые их названия).

Идем в папку переименованных файлов и видим:

Переименование файлов прошло успешно!

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



Посмотреть код на gitHub abc-rename-files-with-node commit - "renaming files using path and saving extension"

                                                                                                                                                             

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

---

Помочь проекту (любая валюта). DONATE

Как перебрать объект в JS(ES).

В этом уроке мы собираемся изучить различные способы циклического прохождения объекта в JavaScript.

For in loop - Цикл for in

Цикл for in помогает нам получить ключ объекта на каждой итерации, используя который мы можем получить доступ к значению объекта.

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key} : ${obj[key]}`);
  }
}
// id : 1
// VM411:9 name : gowtham
// VM411:9 active : true

Примечание: мы использовали метод obj.hasOwnProperty (key), чтобы убедиться, что свойство принадлежит этому объекту, потому что цикл for in также выполняет итерации по цепочке прототипов объекта.

Object.keys

Метод Object.keys() принимает объект в качестве аргумента и возвращает массив с заданными ключами объекта.

Объединяя метод Object.keys с методом forEach, мы можем получить доступ к парам ключ-значение объекта.

Пример:

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

Object.keys(obj).forEach(key => {
  console.log(`${key} : ${obj[key]}`);
});
// id : 1
// name : gowtham
// active : true

Object.values

Метод Object.values() принимает объект в качестве аргумента и возвращает массив с заданными значениями объекта.

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

Пример:

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

Object.values(obj).forEach(value => {
  console.log(value);
});

// 1
// gowtham
// true

Object.entries

Метод Object.entries() возвращает массив с массивами, которые являются парами [ключ, значение] данного объекта.

Пример:

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}:${value}`);
});
// id : 1
// name : gowtham
// active : true

Object.getOwnPropertyNames

Метод Object.getOwnPropertyNames также возвращает массив с заданными свойствами объекта или ключами (включая не перечисляемые свойства).

Пример:

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(`${key}:${obj[key]}`);
});
// id : 1
// name : gowtham
// active : true

Оригинал публикации Reacto

Автор перевода Yaroslav Kolesnikov

Статья на gitHub                                                                                                                                                              

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

React - шпаргалка.

Шпаргалка по React.js в картинках.

См. этот пост на gitHub                                                                                                                                                              

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

Методы жизненного цикла React 16 на русском.

//  React 16 Lifecycle Methods

class ComponentWithLifecycle extends React.Component {
  //  Часто используемые методы ЖЦ (Жизненного цикла)
  constructor() {
    //  - ЖЦ: Mounting  - Монтаж ( до рендера )
    //  - Цель: Инициализация состояния
  }

  componentDidMount() {
    //  - ЖЦ: Mounting - Монтаж ( немедленно после рендера )
    //  -Цель: Инициализация состояний требующее существование ДОМ узлов
    //    Сетевые запросы и побочный эффекты.
  }
   componentDidUpDate() {
    //  - ЖЦ:  Updating - Обновление 
( yнемедленно после построения - обновления)
    //  -Цель: Управление обновлением ДОМ или поддержка сетевых запросов
   }
   componentWillUnmount() {
      //  - ЖЦ: Unmounting - Размонтирование
      // -Цуль: Убрать такие вещи как обработчики событий,
 отмена сетевых запросов и т.д.
   }

  //  Редко используемые методы жизненного цикла
  static static getDerivedStateFromProps(props, state) {
    //  -ЖЦ: Mounting  Монтирование и размонтирование -  Unmounting
( немедленно до рендера )
    //  -Цель: Когда state - состояние зависит от свойств - props 
( следует избегать )
  }

  shouldComponentUpdate(nextProps, nextState) {
    //  -ЖЦ: Updating -Обновление (немедленно до рендера )
    //  -Цель: Позволяет разработчику предотвращать рендеринг
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    //  -ЖЦ: Updating - Обновление 
( непосредственно перед подтверждением вывода рендера )
    //  -Цель Захват информации ДОМ, такой как данные скролла - 
scroll position которые могут меняться.
  }

  // Особые случаи использования
  componentDidCatch() {
    //  - Создает границы ошибок для захвата их от дочерних компонентов
  }

  // Необходимый - обязательный
  render() {
    // -Выводит код компонента на экран
  }

  // Объяснение жизненного цикла:
  // Mounting -  монтаж: Вызывается до того как ваш компонент 
отображается в пользовательском интерфейсе - UI
  // Updating - обновление: Вызывается изменением  
state-состояния или props и повторный рендеринг UI
  // Unmounting - Размонтирование: Вызывается когда ваш 
компонент больше не будет отображаться в UI
}

React Lifecycle Methods - on GitHub                                                                                                                                                              

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

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