Как создать клон хакерских новостей с помощью React

Hacker News — популярный сайт среди предпринимателей и разработчиков. Он содержит контент, посвященный информатике и предпринимательству.

Простой макет Hacker News может подойти некоторым людям. Однако, если вам нужна более привлекательная и персонализированная версия, вы можете использовать полезные API для создания собственного пользовательского интерфейса Hacker News. Кроме того, создание клона Hacker News может помочь вам укрепить свои навыки React.

Настройка проекта и сервера разработки

Пакеты, необходимые для этого проекта, включают:

• React Router для обработки маршрутизации в Одностраничное приложение (SPA).
instagram viewer
• HTMLReactParser для разбора HTML, возвращаемого Интерфейс прикладного программирования (API).
• MomentJS для обработки дат, возвращаемых API.

Откройте терминал и запустите:

пряжа создать вите

Вы также можете использовать Менеджер пакетов узлов (NPM) если вы предпочитаете его пряже. Приведенная выше команда должна использовать инструмент сборки Vite для создания базового проекта. Назовите свой проект и, когда будет предложено указать структуру, выберите Реагировать и установите вариант на JavaScript.

Сейчас CD в папку проекта и установите упомянутые ранее пакеты, выполнив следующие команды в терминале:

пряжа добавить html-реагировать-парсер
пряжа добавить
пряжа добавить момент
пряжа разработчик

После установки всех пакетов и запуска сервера разработки откройте проект в любом редакторе кода и создайте три папки в источник папка а именно: компоненты, крючки, и страницы.

в компоненты папку, добавьте два файла Комментарии.jsx и Navbar.jsx. в крючки папка, добавить один файл useFetch.jsx. Затем в страницы папку, добавьте два файла ListPage.jsx и PostPage.jsx.

Удалить App.css файл и заменить содержимое main.jsx файл со следующим:

Импортировать Реагировать от«реагировать»
Импортировать {Браузермаршрутизатор} от'реакция-маршрутизатор-дом'
Импортировать РеактДОМ от'реакция-дом/клиент'
Импортировать Приложение от'./App.jsx'
Импортировать'./index.css'
ReactDOM.createRoot(документ.getElementById('корень')).оказывать(



 </BrowserRouter>
 </React.StrictMode>,
)

в App.jsx файл, удалите весь шаблонный код и измените файл так, чтобы остался только функциональный компонент:

функцияПриложение() {
возвращаться (
 <>
 </>
 )
}
экспортпо умолчанию Приложение

Импортируйте необходимые модули:

Импортировать { Маршруты, Маршрут } от'реакция-маршрутизатор-дом'
Импортировать Страница списка от'./страницы/СписокСтраниц'
Импортировать Навбар от'./компоненты/навигационная панель'
Импортировать СообщениеСтраница от'./страницы/PostPage'

Во фрагмент React добавьте Маршруты компоненты с тремя Маршрут дочерние компоненты с путями: /, /:type, и /item/:id соответственно.

'/'
 элемент={<> <Навбар /><Страница списка /></>}>
 </Route>
'/:тип'
 элемент={<> <Навбар /><Страница списка /></>}>
 </Route>
'/элемент/: идентификатор'
 элемент={}>
 </Route>
</Routes>

Создание пользовательского хука useFetch

Этот проект использует два API. Первый API отвечает за получение списка сообщений в данной категории. (тип), в то время как второй API — это API Algolia, который отвечает за получение определенного сообщения и его Комментарии.

Открой useFetch.jsx файл, определите хук как экспорт по умолчанию и импортируйте использование состояния и использованиеЭффект крючки.

Импортировать { useState, useEffect } от"реагировать";
экспортпо умолчаниюфункцияиспользованиеFetch(тип, идентификатор) {
}

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

константа [данные, setData] = useState();
константа [ошибка, setError] = useState(ЛОЖЬ);
константа [загрузка, setLoading] = useState(истинный);

Затем добавьте использованиеЭффект хук с зависимостями: идентификатор и тип.

использоватьЭффект(() => {
}, [идентификатор, тип])

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

асинхронныйфункциявыборка данных() {
позволять ответ, URL, параметр;
если (тип) { 
 URL = " https://node-hnapi.herokuapp.com/"; 
 параметр = тип.toLowerCase(); 
 }
ещеесли (идентификатор) { 
 URL = " https://hn.algolia.com/api/v1/items/"; 
 параметр = id.toLowerCase(); 
 }
пытаться {
 ответ = Ждите принести(`${URL}${параметр}`);
 } ловить (ошибка) {
 установитьОшибка(истинный);
 }
если (ответ) если (ответ.статус!== 200) {
 установитьОшибка(истинный);
 } еще {
позволять данные = Ждите ответ.json();
 установитьЗагрузка(ЛОЖЬ);
 установитьДанные (данные);
 }
}
выборка данных();

Наконец, верните загрузка, ошибка, и данные переменные состояния как объект.

возвращаться {загрузка, ошибка, данные};

Отображение списка постов в зависимости от запрашиваемой категории

Всякий раз, когда пользователь переходит к / или /:type, React должен отображать Страница списка компонент. Чтобы реализовать этот функционал, сначала импортируйте необходимые модули:

Импортировать { useNavigate, useParams } от"реагировать-роутер-дом";
Импортировать использованиеFetch от"../хуки/useFetch";

Затем определите функциональный компонент, а затем назначьте динамический параметр, тип к тип переменная. Если динамический параметр недоступен, установите тип переменная к Новости. Затем позвоните в использованиеFetch крюк.

экспортпо умолчаниюфункцияСтраница списка() {
позволять {тип} = useParams();
константа перейти = использоватьNavigate();
если (! тип) тип = "Новости";
константа {загрузка, ошибка, данные} = useFetch (тип, нулевой);
}

Затем верните соответствующий код JSX в зависимости от того, какой из загрузка, ошибка, или данные переменные верны.

если (ошибка) {
возвращаться<див>Что-то пошло не так!див>
}
если (загрузка) {
возвращаться<див>Загрузкадив>
}
если (данные) {
документ.title = type.toUpperCase();
возвращаться<див>
'тип списка'>{тип}</div>
{данные.карта(элемент =>
"элемент">
"название предмета"
 onClick={() => перейти(`/элемент/${item.id}`)}>
 {элемент.название}
 </div>
 {item.domain && 
"элемент-ссылка"
 onClick={() => открыть(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Создание компонента PostPage

Сначала импортируйте соответствующие модули и компоненты, затем определите функциональный компонент по умолчанию, назначьте идентификатор динамический параметр к идентификатор переменная и, вызовите использованиеFetch крюк. Убедитесь, что вы разрушили структуру ответа.

Импортировать {Ссылка, useParams} от"реагировать-роутер-дом";
Импортировать разобрать от'html-реакция-парсер';
Импортировать момент от"момент";
Импортировать Комментарии от"../компоненты/Комментарии";
Импортировать использованиеFetch от"../хуки/useFetch";
экспортпо умолчаниюфункцияСообщениеСтраница() {
константа {id} = useParams();
константа {загрузка, ошибка, данные} = useFetch(нулевой, идентификатор);
}

И так же, как с Страница списка компонент, визуализируйте соответствующий JSX на основе состояния следующих переменных: загрузка, ошибка, и данные.

если (ошибка) {
возвращаться<див>Что-то пошло не так!див>
}
если (загрузка) {
возвращаться<див>Загрузкадив>
}
если (данные) {
документ.title=данные.название;
возвращаться<див>
"Заголовок поста">{данные.название}</div>
"пост-метаданные">
 {data.url && 
 имя_класса="пост-ссылка">Посетить сайт</Link>}
"пост-автор">{данные.автор}</span>
"пост-время">
 {момент (data.created_at).fromNow()}
 </span>
 </div>
 {данные.текст && 
"посттекст">
 {анализ (данные.текст)}</div>}
"пост-комментарии">
"метка комментариев">Комментарии</div>

 </div>
 </div>
}

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

Импортировать разобрать от'html-реакция-парсер';
Импортировать момент от"момент";
экспортпо умолчаниюфункцияКомментарии({комментарииданные}) {
возвращаться<>
 {commentsData.map(комментарийДанные =><УзелкомментарийДанные={комментарийданные}ключ={commentData.id}
 />)}
 </>
}

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

функцияУзел({ комментарийДанные }) {
возвращаться<дивclassName="комментарий">
 {
 commentData.text &&
 <>
'комментарий-метаданные'>
{commentData.author}</span>

 {момент (commentData.created_at).fromNow()}
 </span>
 </div>
'комментарий-текст'>
 {анализ (commentData.text)}</div>
 </>
 }
'комментарии-ответы'>
 {(commentData.children) && 
 комментарийДанные.дети.карта(ребенок =>
)}
 </div>
 </div>
}

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

Создание компонента навигации

Открой Navbar.jsx файл и импортировать NavLink модуль из реакция-маршрутизатор-дом модуль. Наконец, определите функциональный компонент и верните родителя навигация элемент с пятью NavLink элементы, указывающие на соответствующие категории (или типы).

Импортировать { Навлинк } от"реагировать-роутер-дом"
экспортпо умолчаниюфункцияНавбар() {
возвращаться<навигация>
"/Новости">Главная</NavLink>
"/лучший">Лучший</NavLink>
"/показывать">Показать</NavLink>
"/просить">Спросить</NavLink>
"/ работа">Работа</NavLink>
 </nav>
}

Поздравляю! Вы только что создали свой собственный внешний клиент для Hacker News.

Укрепите свои навыки React, создав приложение-клон

Создание клона Hacker News с помощью React может помочь укрепить ваши навыки работы с React и предоставить практическое одностраничное приложение для работы. Есть много способов, которыми вы могли бы пойти дальше. Например, вы можете добавить в приложение возможность поиска сообщений и пользователей.

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