ニュースビューアUIの作成
8699 ワード
[フォルダ構成]
componentsフォルダ内
NewsItem.js:ニュース情報を表示するコンポーネント
NewsList.js:APIを要求し、ニュースデータを含む配列を素子配列に変換してレンダリングするコンポーネント
JSONには次のフィールドが表示されます.
•タイトル:タイトル
•説明:内容
•url:リンク
•urlToImage:ニュース画像
componentsフォルダ内
NewsItem.js:ニュース情報を表示するコンポーネント
NewsList.js:APIを要求し、ニュースデータを含む配列を素子配列に変換してレンダリングするコンポーネント
JSONには次のフィールドが表示されます.
•タイトル:タイトル
•説明:内容
•url:リンク
•urlToImage:ニュース画像
//NewsItem.js
import React from "react";
import styled from "styled-components";
const NewsItemBlock = styled.div`
display: flex;
.thumbnail {
margin-right: 1rem;
img {
display: block;
width: 160px;
height: 100px;
object-fit: cover;
}
}
.contents {
h2 {
margin: 0;
a {
color: black;
}
}
p {
margin: 0;
line-height: 1.5;
margin-top: 0.5rem;
white-space: normal;
}
}
& + & {
margin-top: 3rem;
}
`;
const NewsItem = ({ article }) => {
const { title, description, url, urlTolmage } = article;
return (
<NewsItemBlock>
{urlTolmage && (
<div className="thumbnail">
<a href={url} target="_blank" rel="noopener noreferrer">
<img src={urlTolmage} alt="thumbnail" />
</a>
</div>
)}
<div className="contents">
<h2>
<a href={url} target="_blank" rel="noopener noreferrer">
{title}
</a>
</h2>
<p>{description}</p>
</div>
</NewsItemBlock>
);
};
export default NewsItem;
まだデータがロードされていないので、サンプルデータをsampleArticleというオブジェクトに入れておき、各コンポーネントに渡して偽のコンテンツを表示させます.//NewsList.js
import React from "react";
import styled from "styled-components";
import NewsItem from "./NewsItem";
const NewsListBlock = styled.div`
box-sizing: border-box;
padding-bottom: 3rem;
width: 768px;
margin: 0 auto;
margin-top: 2rem;
@media screen and (max-width: 768px) {
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
`;
const sampleArticle = {
title: "제목",
description: "내용",
url: "https://google.com",
urlToImage: "https://via.placeholder.com/160",
};
const NewsList = () => {
return (
<NewsListBlock>
<NewsItem article={sampleArticle} />
<NewsItem article={sampleArticle} />
<NewsItem article={sampleArticle} />
<NewsItem article={sampleArticle} />
<NewsItem article={sampleArticle} />
<NewsItem article={sampleArticle} />
</NewsListBlock>
);
};
export default NewsList;
//App.js
import React from 'react';
import NewsList from './components/NewsList';
const App = () => {
return <NewsList />;
};
export default App;
Reference
この問題について(ニュースビューアUIの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@roum02/뉴스-뷰어-UI-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol