Портфолио #dev.to: улучшите свое присутствие в Интернете с интегрированной витриной статей
В современном быстро меняющемся мире технологий демонстрация своего опыта имеет первостепенное значение. Вы написали познавательные статьи на #dev.to, и теперь пришло время расширить свой охват.
Представьте себе, что вы легко объединяете свои статьи dev.to с веб-сайтом личного портфолио, создавая полную демонстрацию своих достижений.
В этом уроке мы отправимся в увлекательное путешествие по интеграции API dev.to с разделом вашего портфолио, созданным в React. Будьте готовы расширить свое присутствие в Интернете и очаровать свою аудиторию гармоничным сочетанием технологий и контента.
Установка React
Это начальные шаги для создания вашего приложения в реакции.
Шаг 1 Настройка среды
Прежде чем начать, убедитесь, что на вашем компьютере установлен Node.js, поскольку для запуска React требуется Node.js. Вы можете скачать его с https://nodejs.org/.
Шаг 2 Создайте новое приложение React.
Чтобы создать новое приложение в React, вы можете использовать официальный инструмент командной строки под названием «Create React App». Откройте терминал и выполните следующую команду:
npx create-react-app my-personal-siteШаг 3 Перейдите в каталог приложений.
После создания приложения перейдите в каталог, в котором оно было создано, с помощью команды:
cd my-personal-siteШаг 4 Запустите приложение
Попав в каталог приложения, вы можете запустить сервер разработки, чтобы увидеть, как ваше приложение выглядит в браузере. Выполните следующую команду:
npm startШаг 5 Объявление переменных
Чтобы сохранить сообщения списка, укажите имя пользователя, которое у вас есть на dev.to, и последний путь URL-адреса для API.
const [posts, setPosts] = useState([]);
const USERNAME = 'jcvb';
const DEV_TO_API = `https://dev.to/api/articles?username=${USERNAME}`; Шаг 6 Получите публикации
Использовал перехватчик useEffect для получения данных после монтирования компонента. Пустой массив зависимостей ([]) гарантирует, что эффект запускается только один раз, аналогично поведению компонентаDidMount в компонентах класса.
useEffect(() => {
async function fetchPosts() {
try {
const response = await fetch(DEV_TO_API);
const postsData = await response.json();
setPosts(postsData);
} catch (error) {
console.error('Error fetching posts:', error);
}
}
fetchPosts();
}, []); // Empty dependency array means this effect runs once after mountШаг 7 Отобразите результаты
Добавлен ключевой реквизит для каждого
- элемент, предоставляющий React уникальный идентификатор для эффективного обновления списка.
return (
<div>
<h1>Post Lists</h1>
{posts.length > 0 ? (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
) : (
<p>No posts available.</p>
)}
</div>
);
