Простые советы.

вторник, 1 октября 2019 г.

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 - относительный путь к папке в которую нужно положить переименованный файл и сам файл.

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

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

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

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

Вы можете сделать это по собственному усмотрению. Например - задать его из определенного количества случайных цифр и букв ( но тогда он ничем не будет отличаться от исходных :-) ) Или задать некое строковое значение. Например: "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

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

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

Проще всего запустить файл из 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. Для этого нам нужно воспользоваться встроенным модулем 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

воскресенье, 29 сентября 2019 г.

Как перебрать объект в 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

понедельник, 19 августа 2019 г.

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

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

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

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

четверг, 15 августа 2019 г.

Методы жизненного цикла 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

среда, 5 июня 2019 г.

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

понедельник, 3 июня 2019 г.

React-Сайт ( III ). Цены-локация секции.

В этой части сделаем две очень важные секции - секция вывода цены и локации.

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

Задачу разделим на два этапа. На первом этапе создадим секцию цен. Это довольно простая задача, но есть одно но.

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

Кнопки, мы уже создали отдельный компонент MyButton в который мы передадим нужные свойства. Это можно во внимание уже не брать.

Задачу можно решить разными путями. Я решил все это создать в одном компоненте. Данные можно передать в этот компонент извне, но так как мы можем их сохранять в самом компоненте. то это еще одно упрощение задачи. Данные можно сохранить в виде отдельных массивов (массив - цен, описаний, и пр.), тогда мы сможем их выводить в нужном порядке используя индекс в одном переборе (map()) и по индексу выводить значения из других массивов. Например так:

 const arr_1 = ['Price-1', 'Price-2', 'Price-3'];
 const arr_2 = ['Description-1', 'Description-2', 'Description-3'];
 const arr_3 = ['Something-1','Something-2','Something-3'];

 function iter(arr_1, arr_2, arr_3){
   arr_1.map((item, index)=>(console.log("Price = "+ arr_1[index] + "; Description = " + arr_2[index] + "; Something = " + arr_3[index] + "Index = " + "; Index = " + index)))
 }
 iter(arr_1, arr_2, arr_3);

// Price = Price-1; Description = Description-1; Something = Something-1Index = ; Index = 0
// Price = Price-2; Description = Description-2; Something = Something-2Index = ; Index = 1
// Price = Price-3; Description = Description-3; Something = Something-3Index = ; Index = 2

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

Второй вариант - это (обычный) сделать один массив данным с отдельными объектами - в виде каждого блока. У каждого объекта будут ключи - поля (name, price, description, position, link, delay). Вы можете выбрать любой вариант,который вам больше нравится. Главное. что в любом случае у нас будет возможность задать нужную задержку выполнения появления блока - delay и применить ее к нужному блоку.

Способ хранения данных (внутри отдельного компонента или во внешнем файле) для нас сейчас значения не имеет, но стоит обратить внимание на то как вы храните эти значения. Я встречал сохранение статических данных в state компонента. Считаю это излишним, потому что в стейтах есть смысл хранить изменяемые значения, а не статические, как в данном случае. Это облегчит создание самих компонентов, ускорит их работу и избавит от проблем отладки в будущем. Хватит слов. К коду.

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

import Pricing from './Compomemts/Pricing';

<Pricing />

Для Components/Pricing/index.js

import React from "react";

const Pricing = () => {
  return (
     <div className="bck_black">
       <div className="center_wrapper pricing_section">
         <h2>Pricing</h2>

         <div className="pricing_wrapper">Some text</div>
       </div>
     </div>

);
};

export default Pricing;

Убедились, что все работает. Слева внизу появится в браузере слово - Pricing.

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

recourses/style.css

/* ====================>>> PRICING <<<=================================== */


.pricing_section {
    padding: 70px 0px;
}


.pricing_section h2 {
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    font-size: 50px;
    margin: 0;
}

.pricing_wrapper {
    display: flex;
    flex-wrap: wrap;
}
.pricing_wrapper .pricing_item{
    flex-grow: 1;
    width: 33%;
    padding: 20px;
    box-sizing: border-box;
}

.pricing_wrapper .pricing_inner_wrapper {
    border:2px solid #ffa800;
    padding: 50px 20px;
}

.pricing_inner_wrapper .pricing_title {
    color: #ffffff;
    text-align: center;
    border-bottom: 1px solid #ffa800;
    padding-bottom: 20px;
}
.pricing_inner_wrapper .pricing_title span:nth-child(1) {
    font-size: 50px;
    display: block;
}
.pricing_inner_wrapper .pricing_title span:nth-child(2) {
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 300;
}
.pricing_inner_wrapper .pricing_description {
    color: #b8b8b8;
    font-weight: 300;
    font-size: 14px;
    text-align: center;
    padding: 20px 0px;
    min-height: 70px;
}

.pricing_inner_wrapper .pricing_buttons {
     text-align: center;
}

После этого в браузере мы увидим наше слово выеденное один раз.

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

Components/Pricing/index.js

  const data = [
    {
      prices: 100,
      positions: "Balcony",
      desc:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt uts",
      linkto: "https://twitter.com/JroslavK",
      delay: 500
    },
    {
      prices: 150,
      positions: "Medium",
      desc:
        "Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea",
      linkto:
        "https://www.facebook.com/Yaroslav-Web-Master-1446556072148794/?modal=admin_todo_tour",
      delay: 0
    },
    {
      prices: 250,
      positions: "Star",
      desc:
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      linkto:
        "https://www.facebook.com/groups/1786288918273718/?ref=bookmarks",
      delay: 500
    }
  ];

Импортируем в этот файл кнопку MyButton, которую мы создали в прошлом посте.

import MyButton from '../Utils/myButton';

Сразу же импортируем и Zoom эффект из react-reveal

import Zoom from "react-reveal/Zoom";

В этот компонент - Zoom мы будем оборачивать наши компоненты в цикле и передавать им задержку показа на странице - datadelay каждого компонента отдельно.

Там где у нас сейчас выводится слово Some thing, мы будем выводить функцию, которая будет перебирать наши данные (методом map) и вернет разметку в которую поместит соответствующие данные каждого блока.

Функцию привожу ниже. В ней нет ничего необычного. Все как всегда. перебираем данные и выводим в нужных местах разметки.

Components/Pricing/index.js

const showBoxes = () =≶
  data.map((item, i) =≶ (
    <Zoom delay={item.delay} key={i}≶
      <div className="pricing_item"≶
        <div className="pricing_inner_wrapper"≶
          <div className="pricing_title"≶
            <span≶${item.prices}</span≶
            <span≶{item.positions}</span≶
          </div≶
          <div className="pricing_description"≶{item.desc}</div≶
          <div className="pricing_buttons"≶
            <MyButton
              text="Purchase"
              bck="#ffa800"
              color="#ffffff"
              link={item.linkto}
            /≶
          </div≶
        </div≶
      </div≶
    </Zoom≶
  ));

Для того, чтобы все нормально отобразилось на странице, мы вместо вывода слова Some thing сделаем вызов нашей функции.

<div className="pricing_wrapper">{showBoxes()}</div>

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

Components/Pricing/index.js полностью


import React from "react";
import Zoom from "react-reveal/Zoom";
import MyButton from "../Utils/myButton";

const Pricing = () => {
  const data = [
    {
      prices: 100,
      positions: "Balcony",
      desc:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt uts",
      linkto: "https://twitter.com/JroslavK",
      delay: 500
    },
    {
      prices: 150,
      positions: "Medium",
      desc:
        "Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea",
      linkto:
        "https://www.facebook.com/Yaroslav-Web-Master-1446556072148794/?modal=admin_todo_tour",
      delay: 0
    },
    {
      prices: 250,
      positions: "Star",
      desc:
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      linkto: "https://www.facebook.com/groups/1786288918273718/?ref=bookmarks",
      delay: 500
    }
  ];

  const showBoxes = () =>
    data.map((item, i) => (
      <Zoom delay={item.delay} key={i}>
        <div className="pricing_item">
          <div className="pricing_inner_wrapper">
            <div className="pricing_title">
              <span>${item.prices}</span>
              <span>{item.positions}</span>
            </div>
            <div className="pricing_description">{item.desc}</div>
            <div className="pricing_buttons">
              <MyButton
                text="Purchase"
                bck="#ffa800"
                color="#ffffff"
                link={item.linkto}
              />
            </div>
          </div>
        </div>
      </Zoom>
    ));
  return (
    <div className="bck_black">
      <div className="center_wrapper pricing_section">
        <h2>Pricing</h2>

        <div className="pricing_wrapper">{showBoxes()}</div>
      </div>
    </div>
  );
};

export default Pricing;

Если посмотреть в браузере, то можно увидеть, что получилось именно то, что и хотели.

Блоки выводятся в нужной последовательности.

Да.Прошу прощения. Я по невнимательности опустил опечатку в файле Itils/MyButton.js, там в свойствах кнопки, должно быть конечно size="small". После того, как все исправил, я убедился что ошибок в консоли нет.

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

Локация

Цель - вывести секцию, которая займет 100% ширины и на которой будет показана гугл-карта с местонахождением события.

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

src/Components/Location/index.js

import React from "react";

const Location = () => {
  return (
         <div >
          //   Здесь будет вся разметка
         </div>
      )
};

export default Location;

Добавим классы, для разметки.

Основной див у нас поучит className="location_wrapper", а внутри него создадим отдельный див, для вывода наименования секции - className="location_tag"

Сразу добавим стили:

resources/style.css


.location_wrapper {
    position:relative;
}

.location_tag {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.location_tag div{
    background: #2c2c2c;
    color: #ffffff;
    text-transform: uppercase;
    width: 220px;
    margin: 0 auto;
    font-size: 29px;
    padding: 15px 20px;
    text-align: center;
}

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

Вводим адрес. В моем случае это будет Amsterdam, Gedempt Hamerkanaal 231, De Kromhouthal. Нажимаем поделится - Share

В другом окне выбираем "встроенная карта" - Embeded Map

Убеждаемся, что у нас то, что надо показано на малом фрейме и берем нужный код - любым способом его копируем.

Возвращаемся в наше приложение и вставляем то, что скопировали сразу под основным дивом.

Теперь немного его доработаем. например изменим allowfullscreen на allowFullScreen добавим ширину 100% и высоту 500px. Да и важно. Теперь нам нужно отдельно добавитьtitle, название выберете самостоятельно любое. Я написал просто location. Свойство frameborder="0" удалим совсем.

src/Components/Location/index.js полностью

import React from "react";

const Location = () => {
  return (
    <div className="location_wrapper">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2435.290628985655!2d4.918337915802386!3d52.383281579788566!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c609abb3be496b%3A0x1a140c53c426f7c7!2sthe+Kromhouthal!5e0!3m2!1sen!2sua!4v1559491565118!5m2!1sen!2sua"
        width="100%"
        height="500px"
        allowFullScreen
        title="location"
      />
      <div className="location_tag">
        <div>Location</div>
      </div>
    </div>
  );
};

export default Location;

Идем в основной файл - App.js подключаем

import Location from './Compomemts/Location';

и выводим этот компонент на страницу, сразу после последнего компонента.

В итоге у нас получится вот так:

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

Подвал сайта - футер

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

Наша задача будет просто вывести разметку и задать ей некую задержку проявления - Fade.Ранее мы уже работали с этим эффектом и потому я останавливаться на этом подробно не буду.

src/Components/Header_Footer/Footer.js

import React from "react";
import Fade from "react-reveal/Fade";

const Footer = () => {
  return (
    <footer className="bck_red">
      <Fade delay={500}>
        <div className="font_righteous footer_logo_venue">
          wmg react-meeting
        </div>
        <div className="footer_copyright">
          The venue 2019. © All rights reserved.
          <br />
          Made by Kolesnikov Yaroslav
        </div>
      </Fade>
    </footer>
  );
};

export default Footer;

Добавляем стили:

resources/style.css

/* ====================>>> FOOTER <<<========================= */
footer {
    padding:50px 0px;
    text-align: center;
    font-size: 60px;
    color:#ffffff;
    background: red;
}

footer .footer_copyright {
    font-size: 18px;
}

Подключаем и выводим компонент на страницу - как обычно в файле App.js

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

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

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

Страницы

Translate

Поиск по этому блогу

вторник, 1 октября 2019 г.

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

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

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

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

воскресенье, 29 сентября 2019 г.

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

For in loop - Цикл `for in`

Object.keys

Object.values

Object.entries

Object.getOwnPropertyNames

понедельник, 19 августа 2019 г.

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

четверг, 15 августа 2019 г.

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

среда, 5 июня 2019 г.

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

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

Деплой

понедельник, 3 июня 2019 г.

React-Сайт ( III ). Цены-локация секции.

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

Локация

Подвал сайта - футер

Ярлыки

Форма для связи

Страницы

Translate

Поиск по этому блогу

вторник, 1 октября 2019 г.

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

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

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

воскресенье, 29 сентября 2019 г.

For in loop - Цикл for in

Object.keys

Object.values

Object.entries

Object.getOwnPropertyNames

понедельник, 19 августа 2019 г.

четверг, 15 августа 2019 г.

среда, 5 июня 2019 г.

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

Деплой

понедельник, 3 июня 2019 г.

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

Локация

Подвал сайта - футер

Ярлыки

Форма для связи

вторник, 1 октября 2019 г.

воскресенье, 29 сентября 2019 г.

For in loop - Цикл `for in`

понедельник, 19 августа 2019 г.

четверг, 15 августа 2019 г.

среда, 5 июня 2019 г.

понедельник, 3 июня 2019 г.