Affordable Excellence in Education

COSC 498VI – Special Topics in Computer

Science

Lab Session II
Props in React
Building a Dynamic Article List

Fall 2023

Dr. Roaa Soloh

CIS Department
 Affordable Excellence in Education

Create a New React Project

Mainly you will now use the following command:
Create-vite: This is the command-line utility used to create new Vite
projects.
Tutorial2: This is the name you're giving to your Vite project. You can
replace "tutorial2" with any name you prefer for your project directory.

Figure 1 First Command

Create the Article Component:

• Create a new component called Article.js.
• Define the Article component to accept two props: title and
content.
// Article.js
import React from 'react';

function Article({ title, content }) {

return (
<div className="article">
<h2>{title}</h2>
<p>{content}</p>
</div>
);
}

export default Article;

 Affordable Excellence in Education

Create the ArticleList Component:

• Create a new component called ArticleList.js.
• Define the ArticleList component to accept an array of articles as
a prop.
• In the ArticleList component, use the map function to iterate
through the array of articles and render each Article component
with the corresponding title and content props.
import React from 'react';
import Article from './Article';

function ArticleList({ articles }) {

return (
<div className="article-list">
{articles.map((article, index) => (
<Article key={index} title={article.title}
content={article.content} />
))}
</div>
);
}

export default ArticleList;

Provide some styling:

/* Article.css */
.article {
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
border-radius: 5px;
}

.article h2 {
font-size: 1.5rem;
 Affordable Excellence in Education

margin-bottom: 8px;
}

.article p {
font-size: 1rem;
}
/* ArticleList.css */
.article-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}

/* Additional styling for the overall container

(App.js) */
.app {
text-align: center;
padding: 20px;
}

.app h1 {
font-size: 2rem;
margin-bottom: 20px;
}