Привет!

В этом уроке мы попытаемся создать очень простые новостные приложения…

Мы будем использовать Next JS в качестве рендеринга на стороне сервера (SSR) и будем реагировать на загрузку как интерфейсную платформу ...

В конце этого урока у нас будет две страницы, первая страница для деловых новостей из 3 стран (ID, SG, США), а вторая страница мы также будем отображать новости технологий из 3 стран ...

Живая демонстрация: https://news-app-pxvg8f8r2.now.sh/

Что мы узнаем в этом уроке?

  • Базовый Next JS (https://nextjs.org/)
  • Базовый загрузчик React (https://react-bootstrap.github.io/)
  • Получение данных с помощью пакета npm newsapi
  • Совместное выполнение нескольких API с помощью Promise All

Приятно попробовать после этого урока

  • Развертывание приложений Next Js на ZEIT

Подробнее о следующих js

Https://nextjs.org/docs/getting-started

Сначала нам нужно установить следующие js с помощью этой команды

npm init next-app

Убедитесь, что у вас хорошее интернет-соединение, чтобы установка была быстрее.

Выполните эту команду

cd news-apps

пряжа dev

Откройте браузер с этим URL-адресом

Http: // localhost: 3 000

Мы готовы со следующим js, теперь нам нужно установить реактивную загрузку, а также пакет npm для получения данных новостей.

Подробнее о реактивной загрузке

Https://react-bootstrap.github.io/getting-started/introduction

выполнить эту команду

npm установить newsapi response-bootstrap bootstrap

Итак, наш package.json будет

Давайте писать коды!

Откройте pages / index.js, удалите весь код и напишите этот код.

Как мы видим, мы используем компонент Header, поэтому давайте создадим компонент Header

создать папку макеты в папке страницы

Примечание:

Я не знаю, является ли эта структура папок лучшей практикой или нет

вы можете сообщить мне, если эта папка структуры не лучшая практика в комментарии ya ...

Создайте файл layouts / Header.js и напишите этот код.

Если мы выполним npm run dev и localhost: 3000, дисплей будет

Что, черт возьми, это за дизайн?

…

Подожди, подожди ... не сердись на меня, друг мой

К вашему сведению: если React Bootstrap не работает в следующем js, вам нужно создать файл _app.js на страницах и загрузить оттуда bootstrap.min.css.

Остановить команду с терминала и снова выполнить npm run dev

Обновите страницу

Если мы выберем Бизнес или Технологии в раскрывающемся списке новостей

Следующий js автоматически ищет файл business.js в папке pages, поскольку следующий js не может найти этот файл, будет отображена не найденная страница

Итак, давайте создадим pages / business.js и напишем этот код

В строке 2 мы импортируем компонент новостей, поэтому давайте напишем компонент новостей для отображения цели новостей (таблица новостей находится в этом компоненте).

создать папку компоненты на страницах

Создайте components / News.js с помощью этого кода.

в строке 5

импортировать newsapi из «../helpers/newsApi»;

Итак, давайте создадим папку helpers в корневой папке.

создайте файл helpers / newsApi.js и напишите этот код

Теперь перейдем к бизнес-странице.

На последнем этапе мы создадим одну страницу для отображения новостей технологий.

Просто создайте файл technology.js в папке pages.

и напишите этот код

Примечание

code technology.js совпадает с бизнес-кодом, разница в параметре, который мы отправляем на http://newsapi.org/

Готово… мы закончили отображать новости в категории «Технологии» и «Бизнес» из 3 стран с помощью Promise.All…

Кстати… в этом уроке я покажу вам свой ключ для получения данных новостей с http://newsapi.org/

но ради «сантуйиты» лучше использовать самоключ ...

  • ** santuyity: удобство

Полный код: https://github.com/onesinus/news_app

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

Если это руководство окажется для вас полезным, вы можете поделиться этой статьей и похлопать в ладоши, если вы…

Спасибо и наслаждайтесь своим кодом ...

Кодирование - это весело!

~ ospt