Как показывать сообщения в программе с помощью Material-UI в веб-приложении React

1656629297 kak pokazyvat soobshheniya v programme s pomoshhyu material ui v veb prilozhenii

Келли Берк

1*awO-09f5MGtVvnkbVLoBDA
Источник изображения

В некоторых ситуациях вашей веб-программе нужно показывать информационное сообщение, чтобы сообщить пользователям, прошло событие успешным или нет. Например, сообщение «Успех» после того, как пользователь нажимает и успешно выполняет определенное действие.

В этом учебнике я покажу вам, как создать простой компонент для информационных сообщений в программе с помощью React и Material-UI. Мы назовем это a Notifier компонент.

Вот основные разделы этого руководства:

  • Начинаем
  • Компонент извещателя
  • Импорт компонента Notifier на страницу индекса
  • Тестирование

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

Начинаем

Для этого учебника я создал простую веб-приложение, которое вы можете выполнять. Мы будем использовать код, расположенный в папке tutorials/4-start нашего репозитория builderbook.

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

Чтобы запустить программу локально:

  • Клонируйте репозиторию builderbook на локальную машину с помощью:
git clone git@github.com:builderbook/builderbook.git
  • Внутри 4-start папку, выполн yarn или npm install чтобы установить все перечисленные пакеты package.json.
  • Беги yarn dev чтобы запустить приложение.

Индексная страница

В своем браузере перейдите к «Это наш». Index страница, на которой есть / маршрут. Next.js обеспечивает автоматическую маршрутизацию для страниц, расположенных в a /pages папку. Имя каждого файла страницы становится маршрутом этой страницы.

Наши Index page — это простой компонент страницы, воспроизводящий форму, ввод и кнопку (подробнее объяснение ниже).

1*I50gTzdSn6aPSI3JYk9Hqw

Вот код для нашего Index страница на pages/index.js:

Несколько замечаний:

  • Мы могли бы определить эту страницу как функциональный компонент без состояния, поскольку она не имеет состояния, крючков жизненного цикла или ссылок (подробнее о том, когда использовать функциональные компоненты без состояния, а не классы React ES6). Вы увидите это предупреждение Eslint: Component should be written as a pure function. Однако, окончательный Index страница, которую мы напишем в этом руководстве, будет иметь ссылку. Поэтому мы написали это начальный Index страницу в качестве дочерней части класса ES6 с использованием extends.
  • Мы импортировали Head из Next.js, чтобы настроить <Head> элемент страницы. яnside <Голова>мы аdded a страница <title> и описание для правильной индексации ботами поисковых систем (хорошо дляr SEO). Текст внутри отображается на вкладке вашего браузера:</li> </ul> <figure class="kg-card kg-image-card"><img src="https://sdelay-vse.com/wp-content/uploads/2022/07/1656629293_792_kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii.png" class="kg-image" alt="1*QtsMfsiewcSAb5AOE8LvsA" width="600" height="400" loading="lazy" title="Как показывать сообщения в программе с помощью Material-UI в веб-приложении React 4"></figure> <ul> <li>Мы использовали TextField и Button компоненты Material-UI, отображаемые в <code><inp</code>ut><code>; and &l</code>t;button> HTML-элементы соответственно.</li> <li>Мы завернули нашу страницу в a <code>withLayout</code> компонент высшего порядка Наше приложение использует Next.js и <code>withLayout</code> гарантирует, что рендеринг на стороне сервера работает должным образом для Material-UI в нашем приложении React-Next. <code>withLayout</code> также добавляет наш <code>Header</code> компонент (находится по адресу <code>components/Header.js</code>) к каждой странице, что <code>withLayout</code> обертывания. Воспроизведение на стороне сервера не требуется для Material-UI или React, но это главная функция Next.js. В другом учебнике мы обсуждали рендеринг на стороне сервера и клиента в программах React.</li> </ul> <p>Мы закончили описание нашего первоначального <code>Index</code> страница. Теперь давайте обсудим <code>Notifier</code> компонент, который мы позже импортируем в <code>Index</code> страницу, чтобы отображать информационные сообщения пользователям нашего веб-приложения.</p> <h3 id="notifier-component"><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82_%D0%B8%D0%B7%D0%B2%D0%B5%D1%89%D0%B0%D1%82%D0%B5%D0%BB%D1%8F"></span>Компонент извещателя<span class="ez-toc-section-end"></span></h3> <p>Начнем с определения <code>Notifier</code> компонент. Мы определяем <code>Notifier</code> как <code>React.Component</code> вместо функции без гражданства, потому что <code>Notifier</code> иметь состояние, один метод жизненного цикла и несколько функций обработки событий.</p> <p>Для наших информационных сообщений мы будем использовать Snackbar Material-UI. Просмотрите примеры использования Snackbar на официальном сайте Material-UI.</p> <p>Вот наше описание высокого уровня <code>Notifier</code> компонент:</p> <p>Создать <code>Notifier.js</code> файл внутри <code>/components</code> папка <code>4-start</code>. Добавьте вышеприведенный контур высокого уровня к этому файлу. Ниже мы заменим пронумерованные комментарии кодом.</p> <p>1. Мы будем использовать <code>open</code> и <code>message</code> реквизиты Snackbar Material-UI для состояния нашего <code>Notifier</code>. Проверьте полный список реквизитов Snackbar.</p> <p>Сначала наш <code>Notifier</code> должно быть в закрытом состоянии с пустой строкой в ​​виде сообщения. Мы определяем <code>Notifier</code>исходное состояние как:</p> <p>2. Теперь напишем функцию, обновляющую состояние компонента Notifier. Функция изменит значение <code>open</code> опора на <code>true</code> и установите значение <code>message</code> prop к непустой строке. Вызовем эту функцию <code>openSnackbar()</code>.</p> <p>Прежде чем мы сможем выполнить <code>openSnackbar()</code>наш <code>Notifier</code> компонент нужно смонтировать в DOM. Таким образом, ставим <code>openSnackbar()</code> функция в a <code>componentDidMount</code> метод жизненного цикла, который выполняется сразу после <code>Notifier</code> компонент монтируется в DOM.</p> <p>Чтобы получить доступ к <code>openSnackbar()</code> функция <strong>где угодно</strong> в нашем приложении мы должны установить его значение на другую функцию, которая доступна за пределами <code>Notifier</code> компонент. Итак, пишем <code>let openSnackbarFn</code> выше <code>class Notifier extends React.Component</code>.</p> <p>Соединение этих частей вместе:</p> <p>Теперь давайте определим <code>openSnackbar()</code> функция. Эта функция обновляет <code>open</code> и <code>message</code> свойства нашего <code>Notifier</code>Российское государство. После обновления состояния, <code>Notifier</code> компонент будет повторно воспроизведен для отображения сообщения (<code>open:true</code> отображает панель быстрого доступа и <code>message:message</code> устанавливает сообщение).</p> <p>Внутри <code>this.setState</code>мы могли бы написать <code>message</code> как <code>message:message</code>. Вместо этого мы использовали сокращенный синтаксис ES6 (примененный Eslint), чтобы сделать код более лаконичным.</p> <p>3. Когда пользователь нажимает вне области снекбара, панель снек-бара должна закрыться. Снекбар реквизит <code>onClose</code> отвечает за такое поведение. Напишем функцию под названием <code>handleSnackbarClose()</code> что устанавливает <code>open</code> к <code>false</code> и <code>message</code> к пустой строке.</p> <p>4. Наконец, давайте напишем код для нашего <code>Notifier</code> компонент для воспроизведения компонент Snackbar со всеми необходимыми реквизитами.</p> <p>В дополнение к <code>message</code>, <code>onClose</code>и <code>open</code> props, описанные выше, мы добавим следующие реквизиты к нашему компоненту Snackbar:</p> <ul> <li><code>anchorOrigin</code>: определяет расположение панели закусок.</li> <li><code>autoHideDuration</code>: определяет продолжительность Snackbar в миллисекундах.</li> <li><code>SnackbarContentProps</code>: привязывает Snackbar к элементу внутри DOM, содержащему <code>message</code>; в нашем случае элемент имеет id <code>snackbar-message-id</code>а на панели закусок отображается текст из этого элемента.</li> </ul> <p>Вот <code>render()</code> метод наш <code>Notifier</code> компонент:</p> <p>В <code><sp</code>an> элемент, мы могли бы wr<code>itten message={this.state.me</code>ssage}, но вместо этого мы <code>wrote dangerouslySetInnerHTML={{ __html: this.state.mess</code>возраст }} . Это позволяет нам добавить HTML-код к Snack<code>bar’s m</code>essage проп. Например, вы можете показать пользователям гиперссылку. Узнайте больше об использовании DangerouslySetInnerHTML в React.</p> <p>Собрав код с шагов 1–4, вот наш финал <code>Notifier</code> компонент:</p> <p>Важное примечание: обратите внимание, как мы экспортировали наши <code>openSnackbar()</code> функция в дополнение к <code>Notifier</code> компонент. Будем импортировать <strong>оба</strong> <code>openSnackbar()</code> и <code>Notifier</code> в наш <code>Index</code> страница.</p> <h3 id="import-notifier-component-to-index-page"><span class="ez-toc-section" id="%D0%98%D0%BC%D0%BF%D0%BE%D1%80%D1%82_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_Notifier_%D0%BD%D0%B0_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83_%D0%B8%D0%BD%D0%B4%D0%B5%D0%BA%D1%81%D0%B0"></span>Импорт компонента Notifier на страницу индекса<span class="ez-toc-section-end"></span></h3> <p>Вернемся к нашему <code>Index</code> страницу, куда мы импортируем наши <code>Notifier</code> компонент и <code>openSnackbar()</code> функция.</p> <p>Без запуска <code>openSnackbar()</code> функция, наш <code>Notifier</code> компонент всегда будет оставаться в исходном закрытом состоянии с пустой строкой в ​​виде сообщения. Нам нужно выполнить <code>openSnackbar()</code> после того, как пользователь заполнит форму, нажав кнопку на нашей <code>Index</code> страница. Давайте определим a <code>showNotifier()</code> функция, которая делает это.</p> <h4 id="shownotifier-function"><span class="ez-toc-section" id="%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F_showNotifier"></span>Функция showNotifier<span class="ez-toc-section-end"></span></h4> <p>Мы позвоним <code>showNotifier()</code> внутри <code><fo</code>элемент rm>. Ну<code> make showNoti</code>fier() выполняется, когда пользователь вводит число в форме и нажимает кнопку Отправить.</p> <p>Вот ток <code><fo</code>rm> o<code>n our</code> Индексная страница:</p> <p>Давайте сделаем две модификации:</p> <p>1. Звонить <code>showNotifier()</code> когда форма посылается, мы используем событие JavaScript onsubmit:</p> <p>2. Пользователь введет число внутри <code>TextField</code>. Для того, чтобы наши <code>showNotifier()</code> функция доступа к значению <code>TextField</code>мы добавляем атрибут ref React <code>TextField</code>.</p> <p>Есть два способа получить значение <code>TextField</code>: с <code>this.state</code> и с <code>ref</code>. Мы выбрали <code>ref</code>поскольку <code>this.state</code> является более лаконичным. Вот объяснение написания с <code>this.state</code>а вот дополнительная информация об использовании <code>ref</code> в React.</p> <p>Теперь давайте определим <code>showNotifier()</code> функция. Вот схема высокого уровня для <code>showNotifier()</code>:</p> <p>Ниже мы напишем код для каждого из трех комментариев выше.</p> <ol> <li>Мы определяем <code>answer</code> как:</li> </ol> <p>Эта строка кода говорит, что IF <code>answerInput</code> существует (имеется в виду <code><inp</code>ut> элемент добавляется к DOM),<code> THEN </code>ответ равен значению<code>ue of answe</code>rВход, к которому осуществляется доступ<code> with answerInput</code>.value.</p> <p>ЕСЛИ <code>answerInput</code> не существует, ТО все условие в скобках является ложным и <code>answer</code> равно <code>null</code>.</p> <p>2. Если пользователь не введет ответ в нашей форме, но нажмет кнопку «Отправить», мы покажем следующее сообщение: <code>Empty field. Enter a number.</code></p> <p>3. Если пользователь введет 4 и нажмет кнопку «Отправить», тогда наша <code>openSnackbar()</code> функция запустится и покажет это сообщение: <code>Correct answer!</code>. Иначе будет видно <code>Incorrect answer.</code></p> <p>Мы используем <code>parseInt(answer, 10)</code> разбирать <code>answer</code>, которая является строкой, и возвращает целое число. Параметр <code>10</code> указывает, что целое число имеет десятичный формат.</p> <p>Давайте соберем код с шагов 1–3 выше для нашего <code>showNotifier</code> функция. Мы разместим код прямо под строкой <code>class Index extends React.Component</code>:</p> <p>Вы заметите, что мы добавили строчку <code>event.preventDefault();</code>. Это помешает нашим <code><fo</code>rm> от его поведения по умолчанию для передачи данных формы на сервер.</p> <p>Теперь у нас есть весь код для нашего финала <code>Index</code> страница:</p> <h3 id="testing"><span class="ez-toc-section" id="%D0%A2%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5"></span>Тестирование<span class="ez-toc-section-end"></span></h3> <p>Давайте проверим, что наше <code>Notifier</code> работает как ожидалось. Запустите программу локально с помощью <code>yarn dev</code> и перейдите к пункту Если вы не запустили приложение, перейдите к тому, который я развернул: https://notifier.builderbook.org.</p> <p>Сначала нажмите «Отправить», не добавляя ничего в текстовое поле.</p> <figure class="kg-card kg-image-card"><img src="https://sdelay-vse.com/wp-content/uploads/2022/07/1656629294_670_kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii.png" class="kg-image" alt="1*tFZ2EbE513_ACJqNMPiHYw" width="600" height="400" loading="lazy" title="Как показывать сообщения в программе с помощью Material-UI в веб-приложении React 5"></figure> <p>Затем добавьте число 4 и нажмите «Отправить».</p> <figure class="kg-card kg-image-card"><img src="https://sdelay-vse.com/wp-content/uploads/2022/07/1656629294_253_kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii.png" class="kg-image" alt="1*ov1Nt7TI_VcHWOgn-zb9WQ" width="600" height="400" loading="lazy" title="Как показывать сообщения в программе с помощью Material-UI в веб-приложении React 6"></figure> <p>Теперь добавьте любой другой номер и нажмите «Отправить».</p> <figure class="kg-card kg-image-card"><img src="https://sdelay-vse.com/wp-content/uploads/2022/07/1656629294_745_kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii.png" class="kg-image" alt="1*61lDH0rzRRsReG4X36GV8A" width="600" height="400" loading="lazy" title="Как показывать сообщения в программе с помощью Material-UI в веб-приложении React 7"></figure> <p>Помните, что мы написали код, чтобы закрыть панель закусок, когда пользователь отходит от нее (мы написали a <code>handleSnackbarClose()</code> функцию и передал ее в <code>onClose</code> реквизит Snackbar). Увидев панель закусок, щелкните где-нибудь на экране, кроме самой панели закусок. Снекбар должен немедленно закрыться.</p> <p>Приятной особенностью Material-UI является мобильная оптимизация. Нам не нужно писать лишний код, чтобы наше информационное сообщение хорошо смотрелось на мобильных устройствах. Убедитесь в этом сами, перейдя к инструментам разработчика Chrome и изменив режим просмотра с компьютера на мобильный. Наше сообщение отображается в верхней части экрана:</p> <figure class="kg-card kg-image-card"><img src="https://sdelay-vse.com/wp-content/uploads/2022/07/1656629294_91_kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii.png" class="kg-image" alt="1*3t4ur9VU3LOw2ytbKHrvAQ" width="600" height="400" loading="lazy" title="Как показывать сообщения в программе с помощью Material-UI в веб-приложении React 8"></figure> <p>Ууууу! Вы успешно добавили информационное сообщение в программе к веб-программе React! Ваш окончательный код должен совпадать с кодом в папке tutorials/4-end нашего репозитория builderbook.</p> <h4 id="customize-notifier-component"><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_Notifier"></span>Настройка компонента Notifier<span class="ez-toc-section-end"></span></h4> <p>Теперь, когда у вас есть рабочий <code>Notifier</code> компонент, давайте посмотрим, как мы можем изменить UX, изменив реквизиты компонента SnackBar Material-UI. Вот полный список реквизита, который можно использовать.</p> <p>Сначала изменим продолжительность Snackbar. Инсайдер ваш <code>Notifier</code> компонент, найдите <code>autoHideDuration</code> опора. Измените его значение с <code>3000</code> к <code>1000</code> и сравнить. Вы увидите это на <code>1000</code>Снекбар закрывается быстрее.</p> <p>Во-вторых, давайте изменим положение Snackbar. Найди <code>anchorOrigin</code> prop и изменить его значение с <code>top</code> и <code>right</code> к <code>bottom</code> и <code>left</code>, соответственно. Проверьте, где сейчас появляется Снекбар:</p> <figure class="kg-card kg-image-card"><img src="https://sdelay-vse.com/wp-content/uploads/2022/07/1656629294_710_kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii.png" class="kg-image" alt="1*9ANw1zxyhHSQBOECUR_G2Q" width="600" height="400" loading="lazy" title="Как показывать сообщения в программе с помощью Material-UI в веб-приложении React 9"></figure> <p>Наконец, давайте сделаем Snackbar <code>message</code> включить гиперссылку. Напомним, что мы добавили <code>dangerouslySetInnerHTML={{ __html: this.state.message }}</code> к нашему <code>message</code> prop на панели закусок, чтобы мы могли написать HTML внутри него.</p> <p>Измените код для нашего <code>Correct answer!</code> и <code>Incorrect answer.</code> следующие сообщения:</p> <p>Теперь пользователи будут видеть сообщения ниже. Обратите внимание на темно-синие гиперссылки для текста внутри <code><</code>;a> теги.</p> <figure class="kg-card kg-image-card"><img src="https://sdelay-vse.com/wp-content/uploads/2022/07/1656629295_830_kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii.png" class="kg-image" alt="1*fGzjKrwd2noPg34wQUOTCw" width="600" height="400" loading="lazy" title="Как показывать сообщения в программе с помощью Material-UI в веб-приложении React 10"></figure> <figure class="kg-card kg-image-card"><img src="https://sdelay-vse.com/wp-content/uploads/2022/07/1656629295_822_kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii.png" class="kg-image" alt="1*lYm3vmPuDAx4klVt33BwWw" width="600" height="400" loading="lazy" title="Как показывать сообщения в программе с помощью Material-UI в веб-приложении React 11"></figure> <p>Если вы узнаете, как создавать веб-приложения с помощью JavaScript, ознакомьтесь с нашим репо Github и нашей книгой, где мы подробно освещаем эту и многие другие темы.</p> <p>Чтобы получить обновления по электронной почте о наших учебниках, подпишитесь здесь.</p> <div class='yarpp yarpp-related yarpp-related-website yarpp-related-none yarpp-template-list'> <p>Нет связанных сообщений</p> </div> </div><!-- .entry-content --> <span class="entry-tags"> </span><!-- .entry-tags --> </article><!-- #post-## --> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/kak-pokazyvat-soobshheniya-v-programme-s-pomoshhyu-material-ui-v-veb-prilozhenii-react/#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://sdelay-vse.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.</label></p> <p class="cptch_block"><span class="cptch_wrap cptch_math_actions"> <label class="cptch_label" for="cptch_input_19"><span class="cptch_span">8</span> <span class="cptch_span"> − </span> <span class="cptch_span"><input id="cptch_input_19" class="cptch_input cptch_wp_comments" type="text" autocomplete="off" name="cptch_number" value="" maxlength="2" size="2" aria-required="true" required="required" style="margin-bottom:0;display:inline;font-size: 12px;width: 40px;" /></span> <span class="cptch_span"> = </span> <span class="cptch_span">5</span> <input type="hidden" name="cptch_result" value="HF0=" /><input type="hidden" name="cptch_time" value="1660659446" /> <input type="hidden" name="cptch_form" value="wp_comments" /> </label></span></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='46585' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area sidebar"> <div id="firstsite-tabs-2" class="widget widget-firstsite-tabs widget_tabs posts-thumbnail-widget"> <div class='tabs tabs_default'> <ul class="horizontal"> <li class="active"><a href="#tab1" title="Популярный"><i class="fa fa-star"></i> Популярный</a></li> <li><a href="#tab2" title="Последний"><i class="fa fa-clock-o"></i> Последний</a></li> <li><a href="#tab3" title="Комментарии"><i class="fa fa-comments"></i> Комментарии</a></li> <li><a href="#tab4" title="Теги"><i class="fa fa-tag"></i> Теги</a></li> </ul> <div id='tab1' class="tab-content widget-posts-thumbnail"> <ul><li class="clear"><a href="https://sdelay-vse.com/kak-vosstanovit-stranicu-v-odnoklassnikax-posle-udaleniya/" rel="bookmark"><div class="thumbnail-wrap"><img width="179" height="150" src="https://sdelay-vse.com/wp-content/uploads/2013/11/19.jpg?v=1655146196" class="attachment-firstsite_widget_thumb size-firstsite_widget_thumb wp-post-image" alt="Как восстановить страницу в одноклассниках после удаления" loading="lazy" title="Как восстановить страницу в одноклассниках после удаления 22"></div><div class="entry-wrap">Как восстановить страницу в одноклассниках после удаления</div><div class="gradient"></div></a></li><li class="post-list post-list-1"><span>1</span><a href="https://sdelay-vse.com/kak-izmenit-imya-i-familiyu-v-kontakte/" rel="bookmark">Как изменить имя и фамилию В Контакте</a></li><li class="post-list post-list-2"><span>2</span><a href="https://sdelay-vse.com/kak-vosstanovit-udalennuyu-informaciyu-pisma-i-kontakty-v-elektronnoj-pochte/" rel="bookmark">Как восстановить удаленную информацию письма и контакты в электронной почте</a></li><li class="post-list post-list-3"><span>3</span><a href="https://sdelay-vse.com/kak-izmenit-sochetanie-klavish-dlya-smeny-yazyka-v-windows-8/" rel="bookmark">Как изменить сочетание клавиш для смены языка в Windows 8</a></li><li class="post-list post-list-4"><span>4</span><a href="https://sdelay-vse.com/skolko-mozhno-zarabotat-na-seo-sprint/" rel="bookmark">Сколько можно заработать на SEO sprint</a></li><li class="post-list post-list-5"><span>5</span><a href="https://sdelay-vse.com/kakoj-xosting-vybrat/" rel="bookmark">Какой хостинг выбрать?!</a></li><li class="post-list post-list-6"><span>6</span><a href="https://sdelay-vse.com/kak-pomenyat-fajlovuyu-sistemu-na-fleshke/" rel="bookmark">Как поменять файловую систему на флешке</a></li><li class="post-list post-list-7"><span>7</span><a href="https://sdelay-vse.com/kak-smenit-avatar-v-windows-8/" rel="bookmark">Как сменить аватар в Windows 8</a></li><li class="post-list post-list-8"><span>8</span><a href="https://sdelay-vse.com/kak-izmenit-startovuyu-stranicu-v-google-chrome/" rel="bookmark">Как изменить стартовую страницу в Google Chrome</a></li><li class="post-list post-list-9"><span>9</span><a href="https://sdelay-vse.com/kak-izmenit-startovuyu-stranicu-v-yandeks-brauzere/" rel="bookmark">Как изменить стартовую страницу в Яндекс браузере</a></li><li class="post-list post-list-10"><span>10</span><a href="https://sdelay-vse.com/kak-otpravit-sms-besplatno-na-telefon-s-kompyutera/" rel="bookmark">Как отправить SMS бесплатно на телефон с компьютера</a></li></ul> </div> <div id='tab2' class="tab-content widget-posts-thumbnail"> <ul><li class="clear"><a href="https://sdelay-vse.com/proektirovanie-programm-v-srede-unix-annotacziya-nauch/" rel="bookmark"><div class="thumbnail-wrap"><img width="150" height="150" src="https://sdelay-vse.com/wp-content/uploads/2022/08/proektirovanie-programm-v-srede-unix-annotacziya-nauch.jpg?v=1660597217" class="attachment-firstsite_widget_thumb size-firstsite_widget_thumb wp-post-image" alt="proektirovanie programm v srede unix annotacziya nauch" loading="lazy" title="Проектирование программ в среде Unix: аннотация науч 23"></div><div class="entry-wrap">Проектирование программ в среде Unix: аннотация науч</div><div class="gradient"></div></a></li><li class="post-list post-list-1"><span>1</span><a href="https://sdelay-vse.com/pochemu-vy-dolzhny-primenit-princzip-edinoj-otvetstvennosti-k-besservernym-sistemam/" rel="bookmark">Почему вы должны применить принцип единой ответственности к бессерверным системам</a></li><li class="post-list post-list-2"><span>2</span><a href="https://sdelay-vse.com/nauchites-kodirovat-adaptivnuyu-navigaczionnuyu-panel-s-pomoshhyu-css-flexbox/" rel="bookmark">Научитесь кодировать адаптивную навигационную панель с помощью CSS Flexbox</a></li><li class="post-list post-list-3"><span>3</span><a href="https://sdelay-vse.com/rukovodstvo-dlya-nachinayushhih-biblioteki-ustojchivosti-komnaty/" rel="bookmark">Руководство для начинающих библиотеки устойчивости комнаты</a></li><li class="post-list post-list-4"><span>4</span><a href="https://sdelay-vse.com/rukovodstvo-react-dlya-nachinayushhih/" rel="bookmark">Руководство React для начинающих</a></li><li class="post-list post-list-5"><span>5</span><a href="https://sdelay-vse.com/nachalo-raboty-s-kubernetes-dlya-vashego-saas/" rel="bookmark">Начало работы с Kubernetes для вашего SaaS</a></li><li class="post-list post-list-6"><span>6</span><a href="https://sdelay-vse.com/vvod-v-progressivnye-veb-prilozheniya/" rel="bookmark">Ввод в прогрессивные веб-приложения</a></li><li class="post-list post-list-7"><span>7</span><a href="https://sdelay-vse.com/kak-upravlyat-svoimi-nalogami-kak-nezavisimyj-razrabotchik-ili-startap/" rel="bookmark">Как управлять своими налогами как независимый разработчик или стартап</a></li><li class="post-list post-list-8"><span>8</span><a href="https://sdelay-vse.com/ponimanie-moej-modeli-prosmotra-s-pomoshhyu-pandas-i-seaborn/" rel="bookmark">Понимание моей модели просмотра с помощью Pandas и Seaborn</a></li><li class="post-list post-list-9"><span>9</span><a href="https://sdelay-vse.com/kak-testirovat-webhooks-vo-vremya-lokalnoj-razrabotki/" rel="bookmark">Как тестировать Webhooks во время локальной разработки</a></li><li class="post-list post-list-10"><span>10</span><a href="https://sdelay-vse.com/chego-ya-uznal-iz-intervyu-po-programmirovaniyu/" rel="bookmark">Чего я узнал из интервью по программированию</a></li></ul> </div> <div id='tab3' class="tab-content"> <ul class="tab-comments"> <li class="clear"> <a href="https://sdelay-vse.com/kontakty/#comment-839"><img alt='' src='https://secure.gravatar.com/avatar/9fa44fb1f2da17535fb46d0ca0bbfffa?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/9fa44fb1f2da17535fb46d0ca0bbfffa?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/kontakty/#comment-839"><strong>Admin</strong><span>What do you mean?</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/kontakty/#comment-838"><img alt='' src='https://secure.gravatar.com/avatar/dfa55dedfbbc1c79b50b020ff11a0e73?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/dfa55dedfbbc1c79b50b020ff11a0e73?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/kontakty/#comment-838"><strong>Davidlauby</strong><span>Salam, qiym?tinizi bilm?k ist?dim.</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/kak-formatirovat-fleshku/#comment-831"><img alt='' src='https://secure.gravatar.com/avatar/f88920c040b1927b492a5c3f86b6737f?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/f88920c040b1927b492a5c3f86b6737f?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/kak-formatirovat-fleshku/#comment-831"><strong>Сергей</strong><span>Здравствуйте! Могу ли Я отформатиравать микроSD 64GB(exFAT) в FAT32 непосредственно…</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/otvet/#comment-824"><img alt='' src='https://secure.gravatar.com/avatar/60a410d06e7d3d5a341e3929709980c3?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/60a410d06e7d3d5a341e3929709980c3?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/otvet/#comment-824"><strong>Алексей Григорьевич</strong><span>Ну. и на хрена я всё Это писал, если никто…</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/dlya-chego-nuzhen-planshet/#comment-822"><img alt='' src='https://secure.gravatar.com/avatar/aa7825ab5b2adfbf34bfe84026a6273e?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/aa7825ab5b2adfbf34bfe84026a6273e?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/dlya-chego-nuzhen-planshet/#comment-822"><strong>Maok</strong><span>Я года три назад взял себе хороший и не дешевый…</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/otvet/#comment-818"><img alt='' src='https://secure.gravatar.com/avatar/60a410d06e7d3d5a341e3929709980c3?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/60a410d06e7d3d5a341e3929709980c3?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/otvet/#comment-818"><strong>Алексей Григорьевич</strong><span>Жду ответа!!!</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/otvet/#comment-817"><img alt='' src='https://secure.gravatar.com/avatar/60a410d06e7d3d5a341e3929709980c3?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/60a410d06e7d3d5a341e3929709980c3?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/otvet/#comment-817"><strong>Алексей Григорьевич</strong><span>Уважаемые коллеги! На мой ПК (c Windows 7) в течение…</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/kak-izmenit-startovuyu-stranicu-v-yandeks-brauzere/#comment-813"><img alt='' src='https://secure.gravatar.com/avatar/0e618fcd446ef5a3125a77ece6e119fa?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/0e618fcd446ef5a3125a77ece6e119fa?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/kak-izmenit-startovuyu-stranicu-v-yandeks-brauzere/#comment-813"><strong>Serge</strong><span>О, да!!! Спасибо! Мы сделали это! В смысле, обломали разработчиков…</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/kak-vosstanovit-stranicu-v-odnoklassnikax-posle-udaleniya/#comment-812"><img alt='' src='https://secure.gravatar.com/avatar/a2f6f49a5004018d4479988bdaba68e4?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/a2f6f49a5004018d4479988bdaba68e4?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/kak-vosstanovit-stranicu-v-odnoklassnikax-posle-udaleniya/#comment-812"><strong>Любаня</strong><span>Если человек сам удалил свой профиль, а потом решил восстановить…</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/kak-vosstanovit-stranicu-v-odnoklassnikax-posle-udaleniya/#comment-811"><img alt='' src='https://secure.gravatar.com/avatar/a2f6f49a5004018d4479988bdaba68e4?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/a2f6f49a5004018d4479988bdaba68e4?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/kak-vosstanovit-stranicu-v-odnoklassnikax-posle-udaleniya/#comment-811"><strong>Любаня</strong><span>Зачем вы здесь-то об этом просите? И так на каждом…</span></a> </li> <li class="clear"> <a href="https://sdelay-vse.com/kak-pomenyat-fajlovuyu-sistemu-na-fleshke/#comment-809"><img alt='' src='https://secure.gravatar.com/avatar/11877cc307f1bc01fd39a8a3370a0874?s=64&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/11877cc307f1bc01fd39a8a3370a0874?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /></a> <a href="https://sdelay-vse.com/kak-pomenyat-fajlovuyu-sistemu-na-fleshke/#comment-809"><strong>Андрей Дацюк</strong><span>а если у меня только одна файловая система и нельзя…</span></a> </li> </ul> </div> <div id='tab4' class="tab-content"> <div class="tags-wrap clear"> </div> </div> </div><!-- .tabs --> </div><div id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2> <ul> <li class="cat-item cat-item-10"><a href="https://sdelay-vse.com/category/zhelezo/">Железо</a> (76) <ul class='children'> <li class="cat-item cat-item-16"><a href="https://sdelay-vse.com/category/zhelezo/videokarty/">Видеокарты</a> (3) </li> <li class="cat-item cat-item-30"><a href="https://sdelay-vse.com/category/zhelezo/kolonki/">Колонки</a> (1) </li> <li class="cat-item cat-item-22"><a href="https://sdelay-vse.com/category/zhelezo/kompyuter/">Компьютер</a> (26) </li> <li class="cat-item cat-item-20"><a href="https://sdelay-vse.com/category/zhelezo/monitory/">Мониторы</a> (5) </li> <li class="cat-item cat-item-27"><a href="https://sdelay-vse.com/category/zhelezo/naushniki/">Наушники</a> (2) </li> <li class="cat-item cat-item-17"><a href="https://sdelay-vse.com/category/zhelezo/planshety/">Планшеты</a> (7) </li> <li class="cat-item cat-item-19"><a href="https://sdelay-vse.com/category/zhelezo/smartfony/">Смартфоны</a> (19) </li> <li class="cat-item cat-item-13"><a href="https://sdelay-vse.com/category/zhelezo/fleshki-usb/">Флешки USB</a> (8) </li> <li class="cat-item cat-item-29"><a href="https://sdelay-vse.com/category/zhelezo/chasy/">Часы</a> (1) </li> </ul> </li> <li class="cat-item cat-item-21"><a href="https://sdelay-vse.com/category/igry/">Игры</a> (2) </li> <li class="cat-item cat-item-8"><a href="https://sdelay-vse.com/category/internet/">Интернет</a> (35) <ul class='children'> <li class="cat-item cat-item-32"><a href="https://sdelay-vse.com/category/internet/zarabotok-v-internete/">Заработок в Интернете</a> (3) </li> <li class="cat-item cat-item-11"><a href="https://sdelay-vse.com/category/internet/socialnye-seti/">Социальные сети</a> (8) </li> </ul> </li> <li class="cat-item cat-item-26"><a href="https://sdelay-vse.com/category/kompyuternye-aksessuary/">Компьютерные аксессуары</a> (1) </li> <li class="cat-item cat-item-12"><a href="https://sdelay-vse.com/category/nastrojka/">Настройка</a> (18) </li> <li class="cat-item cat-item-36"><a href="https://sdelay-vse.com/category/novosti/">Новости</a> (6) </li> <li class="cat-item cat-item-18"><a href="https://sdelay-vse.com/category/novye-texnologii/">Новые технологии</a> (1) </li> <li class="cat-item cat-item-23"><a href="https://sdelay-vse.com/category/obzory/">Обзоры</a> (35) </li> <li class="cat-item cat-item-2"><a href="https://sdelay-vse.com/category/operacionnaya-sistema/">Операционная система</a> (28) <ul class='children'> <li class="cat-item cat-item-24"><a href="https://sdelay-vse.com/category/operacionnaya-sistema/windows-10/">Windows 10</a> (1) </li> <li class="cat-item cat-item-5"><a href="https://sdelay-vse.com/category/operacionnaya-sistema/windows-7/">Windows 7</a> (5) </li> <li class="cat-item cat-item-6"><a href="https://sdelay-vse.com/category/operacionnaya-sistema/windows-8/">Windows 8</a> (17) </li> <li class="cat-item cat-item-7"><a href="https://sdelay-vse.com/category/operacionnaya-sistema/windows-8-1/">Windows 8.1</a> (19) </li> <li class="cat-item cat-item-4"><a href="https://sdelay-vse.com/category/operacionnaya-sistema/windows-xp/">Windows XP</a> (1) </li> </ul> </li> <li class="cat-item cat-item-31"><a href="https://sdelay-vse.com/category/programmirovanie/">Программирование</a> (6 358) </li> <li class="cat-item cat-item-9"><a href="https://sdelay-vse.com/category/programmy/">Программы</a> (35) </li> <li class="cat-item cat-item-28"><a href="https://sdelay-vse.com/category/telefony/">Телефоны</a> (6) </li> <li class="cat-item cat-item-35"><a href="https://sdelay-vse.com/category/xaker/">Хакер</a> (5) </li> <li class="cat-item cat-item-25"><a href="https://sdelay-vse.com/category/eto-interesno/">Это интересно</a> (14) </li> </ul> </div> <div id="wpp-2" class="widget popular-posts"> <p class="widget-title">Популярные статьи</p> <div class="wpp-widget-placeholder" data-widget-id="wpp-2"></div> </div> <div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(89234437, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/89234437" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --></div></div> </aside><!-- #secondary --> </div><!-- #content .site-content --> <footer id="colophon" class="site-footer"> <div class="container"> <div class="clear"></div> <div id="site-bottom" class="container clear"> <div class="menu-menyu-container"><ul id="footer-menu" class="footer-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-448"><a href="https://sdelay-vse.com/">ГЛАВНАЯ</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2477"><a href="https://sdelay-vse.com/category/novosti/">Новости</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2115"><a href="https://sdelay-vse.com/otvet/">Задать вопрос!?</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1037"><a href="https://sdelay-vse.com/kontakty/">Контакты</a></li> </ul></div> <div class="site-info"> © 2022 <a href="https://sdelay-vse.com">Сделай Всё</a> </div><!-- .site-info --> </div><!-- #site-bottom --> </footer><!-- #colophon --> </div><!-- .container --> </div><!-- #page --> <div id="back-top"> <a href="#top" title="Back to top"><span class="genericon genericon-collapse"></span></a> </div> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://sdelay-vse.com/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.27.8' type='text/css' media='all' /> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/themes/firstsite/assets/js/superfish.js?ver=6.0.1' id='superfish-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/themes/firstsite/assets/js/html5.js?ver=6.0.1' id='html5-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/themes/firstsite/assets/js/owl.carousel.js?ver=6.0.1' id='owl-carousel-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/themes/firstsite/assets/js/jquery.tabslet.js?ver=20220401' id='tabslet-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/themes/firstsite/assets/js/index.js?ver=20220601' id='firstsite-index-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/themes/firstsite/assets/js/jquery.custom.js?ver=20220601' id='firstsite-custom-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-includes/js/comment-reply.min.js?ver=6.0.1' id='comment-reply-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=2.2.0' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1' id='js-cookie-js'></script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.31.1-1659535607' id='ez-toc-js-js'></script> <script type='text/javascript' id='cptch_front_end_script-js-extra'> /* <![CDATA[ */ var cptch_vars = {"nonce":"73f4d4885e","ajaxurl":"https:\/\/sdelay-vse.com\/wp-admin\/admin-ajax.php","enlarge":"","time_limit":"120"}; /* ]]> */ </script> <script type='text/javascript' src='https://sdelay-vse.com/wp-content/plugins/captcha-bws/js/front_end_script.js?ver=6.0.1' id='cptch_front_end_script-js'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>