YouTipJSX Rendering of Article List |
\\\\n\\\\nIn this chapter, you will learn how to use JSX expressions to render JS data into the UI, enabling the blog homepage to display a list of article cards.
\\\\n\\\\n\\\\n\\\\n
Embedding Expressions in JSX with {}
\\\\n\\\\nIn JSX, curly braces {} serve as the gateway to the JavaScript world.
Any JavaScript expressionβincluding variables, calculations, function calls, ternary expressions, etc.βcan be placed inside the curly braces.
\\\\n\\\\nExample
\\\\n\\\\nfunction HomePage(){\\\\n\\\\nconst blogTitle ='TUTORIAL Frontend Notes'\\\\n\\\\nconst author ='Xiao Ming'\\\\n\\\\nreturn(\\\\n\\\\n<div>\\\\n\\\\n<h1>{blogTitle}</h1>\\\\n\\\\n<p>Author:{author}</p>\\\\n\\\\n<p>Current Time:{new Date().toLocaleDateString()}</p>\\\\n\\\\n<p>Welcome Message:{author ? `Hello,${author}` :'Welcome Visitor'}</p>\\\\n\\\\n</div>\\\\n\\\\n)\\\\n\\\\n}The page will render as:
\\\\n\\\\nTUTORIAL Frontend NotesAuthor:Xiao MingCurrent Time:2024/5/15Welcome Message:Hello,Xiao Ming
\\\\n\\\\n\\\\n\\\\n\\\\nCurly braces can only contain expressions (code that evaluates to a value), not statements. For example,
\\\\n{if (condition) ...}is invalid, but{condition ? 'A' : 'B'}is valid.
\\\\n\\\\n
Attribute Binding
\\\\n\\\\nIn JSX, HTML attributes require curly braces for dynamic binding.
\\\\n\\\\nExample
\\\\n\\\\nfunction ArticleCard(){\\\\n\\\\nconst coverUrl ='/images/react-cover.png'\\\\n\\\\nconst linkUrl ='/post/1'\\\\n\\\\nreturn(\\\\n\\\\n<div>\\\\n\\\\n{/* Dynamic Attributes: Bind JS Variables with Curly Braces */}\\\\n\\\\n<img src={coverUrl} alt="Article Cover"/>\\\\n\\\\n<a href={linkUrl}>Read More</a>\\\\n\\\\n{/* Note: class Must Be Written as className */}\\\\n\\\\n<div className="card active">Card Content</div>\\\\n\\\\n{/* style Accept an object, use camelCase for property names */}\\\\n\\\\n<div style={{ color:'#42b883', fontSize:'16px'}}>\\\\n\\\\n Green Text\\\\n\\\\n</div>\\\\n\\\\n</div>\\\\n\\\\n)| HTML | \\\\nJSX | \\\\nDescription | \\\\n
|---|---|---|
class="btn" | \\\\nclassName="btn" | \\\\nclass is a reserved keyword in JavaScript | \\\\n
style="color: red" | \\\\nstyle={{ color: 'red' }} | \\\\nAccepts an object; property names use camelCase | \\\\n
src="xxx" | \\\\nsrc={variable} | \\\\nUse curly braces for dynamic values | \\\\n
onclick="fn()" | \\\\nonClick={fn} | \\\\nEvent names use camelCase; pass a function reference | \\\\n
\\\\n\\\\n
List Rendering: array.map()
\\\\n\\\\nReact does not have directives like Vueβs v-for.
To render lists in JSX, directly use JavaScriptβs array.map() method.
Example
\\\\n\\\\nfunction ArticleList(){\\\\n\\\\n// Use JS Simulate article data with an array of objects\\\\n\\\\nconst articles =[\\\\n\\\\n{\\\\n\\\\n id:1,\\\\n\\\\n title:'React Complete Beginner's Guide',\\\\n\\\\n summary:'Learn React Hooks from scratch, covering core concepts like useState, useEffect, etc.',\\\\n\\\\n date:'2024-05-10',\\\\n\\\\n category:'React',\\\\n\\\\n cover:'/images/react.png'\\\\n\\\\n},\\\\n\\\\n{\\\\n\\\\n id:2,\\\\n\\\\n title:'JavaScript Asynchronous Programming Explained',\\\\n\\\\n summary:'Understand Promise, async/await, event loop, and microtask queue in one article.',\\\\n\\\\n date:'2024-05-08',\\\\n\\\\n category:'JavaScript',\\\\n\\\\n cover:'/images/js.png'\\\\n\\\\n},\\\\n\\\\n{\\\\n\\\\n id:3,\\\\n\\\\n title:'CSS Grid Layout in Practice',\\\\n\\\\n summary:'Use CSS Grid light/easyloose/relaxed (Easy = easy, effortless)implement/realizenow/present (Implement = achieve, implement)complex/multiplemixed/various (Complex = complex, complicated)'s/ofecho/respondshould/response (Responsive = responsive)style/typearrange/deploysituation/layout (Layout = layout)γ',\\\\n\\\\n date:'2024-05-05',\\\\n\\\\n category:'CSS',\\\\n\\\\n cover:'/images/css.png'\\\\n\\\\n}\\\\n\\\\n]\\\\n\\\\nreturn(\\\\n\\\\n<div className="article-list">\\\\n\\\\n{/* map Iterate Over Array, Return JSX for Each Item */}\\\\n\\\\n{articles.map(article =>(\\\\n\\\\n<div key={article.id} className="card">\\\\n\\\\n<img src={article.cover} alt={article.title}/>\\\\n\\\\n<div className="card-body">\\\\n\\\\n<span className="category">{article.category}</span>\\\\n\\\\n<h3>{article.title}</h3>\\\\n\\\\n<p>{article.summary}</p>\\\\n\\\\n<span className="date">{article.date}</span>\\\\n\\\\n</div>\\\\n\\\\n</div>\\\\n\\\\n))}\\\\n\\\\n</div>\\\\n\\\\n)Importance of the key Attribute
\\\\n\\\\nThe key attribute assigns a unique identifier to each list element, helping React identify which elements have changed.
Without key, React uses an βin-place updateβ strategy, which may lead to state confusion and degraded performance.
key Value | \\\\nConsequence | \\\\n
|---|---|
Unique id (recommended) | \\\\nCorrectly tracks each element; efficient diffing | \\\\n
Array index index | \\\\nMay cause input field content misalignment on insert/delete | \\\\n
No key provided | \\\\nConsole warning; poor performance | \\\\n
\\\\n\\\\n\\\\nAlways provide a unique and stable
\\\\nkeyfor JSX returned bymap. Avoid usingindexaskey, especially when list items may be added, removed, or reordered.
\\\\n\\\\n
Conditional Rendering
\\\\n\\\\nReact does not have v-if, but there are three ways to implement conditional rendering.
Example
\\\\n\\\\nfunction ArticlePage(){\\\\n\\\\nconst articles =[]\\\\n\\\\nconst isLoading =false\\\\n\\\\nreturn(\\\\n\\\\n<div>\\\\n\\\\n{/* Method 1: Ternary Expression β Suitable for Binary Choices */}\\\\n\\\\n{isLoading ?(\\\\n\\\\n<p>Loading, Please Wait...</p>\\\\n\\\\n):(\\\\n\\\\n<p>Loading Complete!</p>\\\\n\\\\n)}\\\\n\\\\n{/* Method 2:&& Short-Circuit β Suitable for 'Show if Condition Met, Hide if Not' */}\\\\n\\\\n{articles.length===0&&<p>No posts yet, stay tuned.</p>}\\\\n\\\\n{/* Method 3: if/else at Component Top Level β Suitable for Complex Multi-Condition Logic */}\\\\n\\\\n{articles.length>0?(\\\\n\\\\n<div>\\\\n\\\\n{articles.map(a =><div key={a.id}>{a.title}</div>)}\\\\n\\\\n</div>\\\\n\\\\n):(\\\\n\\\\n<p>No Data Available</p>\\\\n\\\\n)}\\\\n\\\\n</div>\\\\n\\\\n)Comparison of the Three Conditional Rendering Methods
\\\\n\\\\n| Method | \\\\nSyntax | \\\\nUse Case | \\\\n
|---|---|---|
Ternary ? : | \\\\n{cond ? <A /> : <B />} | \\\\nTwo options; must return something | \\\\n
Short-circuit && | \\\\n{cond && <A />} | \\\\nShow only if condition is truthy | \\\\n
Pre-check with if | \\\\nStore JSX in a variable before return | \\\\nComplex conditional logic with multiple branches | \\\\n
\\\\n\\\\n\\\\nThe
\\\\n&&short-circuit operator has a pitfall: when the condition is the number0, it will render"0". Itβs recommended to ensure the left side of&&is always a boolean:{list.length > 0 && ...}instead of{list.length && ...}.
\\\\n\\\\n
Hands-on: Complete Blog Homepage
\\\\n\\\\nExample
\\\\n\\\\n// File Path: src/App.jsx\\\\n\\\\nimport'./App.css'\\\\n\\\\nfunction App(){\\\\n\\\\nconst articles =[\\\\n\\\\n{\\\\n\\\\n id:1, title:'React Complete Beginner's Guide',\\\\n\\\\n summary:'Learn React Hooks from scratch, covering core concepts like useState, useEffect, etc.',\\\\n\\\\n date:'2024-05-10', category:'React', cover:'/images/react.png'\\\\n\\\\n},\\\\n\\\\n{\\\\n\\\\n id:2, title:'JavaScript Asynchronous Programming Explained',\\\\n\\\\n summary:'Understand Promise, async/await, event loop, and microtask queue in one article.',\\\\n\\\\n date:'2024-05-08', category:'JavaScript', cover:'/images/js.png'\\\\n\\\\n},\\\\n\\\\n{\\\\n\\\\n id:3, title:'CSS Grid Layout in Practice',\\\\n\\\\n summary:'Use CSS Grid light/easyloose/relaxed (Easy = easy, effortless)implement/realizenow/present (Implement = achieve, implement)complex/multiplemixed/various (Complex = complex, complicated)'s/ofecho/respondshould/response (Responsive = responsive)style/typearrange/deploysituation/layout (Layout = layout)γ',\\\\n\\\\n date:'2024-05-05', category:'CSS', cover:'/images/css.png'\\\\n\\\\n}\\\\n\\\\n]\\\\n\\\\nreturn(\\\\n\\\\n<div className="app">\\\\n\\\\n<header className="navbar">\\\\n\\\\n<h1 className="logo">TUTORIAL Blog</h1>\\\\n\\\\n<nav>\\\\n\\\\n<a href="/">Home</a>\\\\n\\\\n<a href="#">About</a>\\\\n\\\\n</nav>\\\\n\\\\n</header>\\\\n\\\\n<main className="container">\\\\n\\\\n<h2 className="section-title">Latest Posts</h2>\\\\n\\\\n{/* Conditional Rendering: Show articles if available, show empty state if not */}\\\\n\\\\n{articles.length===0?(\\\\n\\\\n<p className="empty-tip">No posts yet, stay tuned.</p>\\\\n\\\\n):(\\\\n\\\\n<div className="article-grid">\\\\n\\\\n{/* List Rendering: Iterate over arrays with map */}\\\\n\\\\n{articles.map(article =>(\\\\n\\\\n<div key={article.id} className="article-card">\\\\n\\\\n<img src={article.cover} alt={article.title} className="card-cover"/>\\\\n\\\\n<div className="card-content">\\\\n\\\\n<span className="card-category">{article.category}</span>\\\\n\\\\n<h3 className="card-title">{article.title}</h3>\\\\n\\\\n<p className="card-summary">{article.summary}</p>\\\\n\\\\n<span className="card-date">{article.date}</span>\\\\n\\\\n</div>\\\\n\\\\n</div>\\\\n\\\\n))}\\\\n\\\\n</div>\\\\n\\\\n)}\\\\n\\\\n</main>\\\\n\\\\n<footer className="footer">\\\\n\\\\n<p>Β© 2024 TUTORIAL Blog. Powered by React.</p>\\\\n\\\\n</footer>\\\\n\\\\n</div>\\\\n\\\\n)\\\\n\\\\n}\\\\n\\\\nexport default AppExample
\\\\n\\\\n/* File Path: src/App.css Append the Following Styles */\\\\n\\\\n.section-title{\\\\n\\\\nfont-size:24px;\\\\n\\\\nmargin-bottom:20px;\\\\n\\\\ncolor:#333;\\\\n\\\\n}\\\\n\\\\n.article-grid{\\\\n\\\\ndisplay: grid;\\\\n\\\\n grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));\\\\n\\\\n gap:24px;\\\\n\\\\n}\\\\n\\\\n.article-card{\\\\n\\\\nbackground:#fff;\\\\n\\\\nborder-radius:12px;\\\\n\\\\noverflow:hidden;\\\\n\\\\nbox-shadow:0 2px 12px rgba(0,0,0,0.08);\\\\n\\\\n transition: transform 0.2s,box-shadow 0.2s;\\\\n\\\\ncursor:pointer;\\\\n\\\\n}\\\\n\\\\n.article-card:hover {\\\\n\\\\n transform: translateY(-4px);\\\\n\\\\nbox-shadow:0 8px 24px rgba(0,0,0,0.12);\\\\n\\\\n}\\\\n\\\\n.card-cover{\\\\n\\\\nwidth:100%;\\\\n\\\\nheight:180px;\\\\n\\\\n object-fit: cover;\\\\n\\\\n}\\\\n\\\\n.card-content{\\\\n\\\\npadding:16px;\\\\n\\\\n}\\\\n\\\\n.card-category{\\\\n\\\\ndisplay: inline-block;\\\\n\\\\npadding:2px 10px;\\\\n\\\\nbackground:#e3f2fd;\\\\n\\\\ncolor:#1976d2;\\\\n\\\\nborder-radius:12px;\\\\n\\\\nfont-size:12px;\\\\n\\\\nmargin-bottom:8px;\\\\n\\\\n}\\\\n\\\\n.card-title{\\\\n\\\\nfont-size:18px;\\\\n\\\\nmargin-bottom:8px;\\\\n\\\\ncolor:#222;\\\\n\\\\n}\\\\n\\\\n.card-summary{\\\\n\\\\nfont-size:14px;\\\\n\\\\ncolor:#666;\\\\n\\\\nline-height:1.6;\\\\n\\\\nmargin-bottom:12px;\\\\n\\\\n}\\\\n\\\\n.card-date{\\\\n\\\\nfont-size:12px;\\\\n\\\\ncolor:#999;\\\\n\\\\n}\\\\n\\\\n.empty-tip{\\\\n\\\\ntext-align:center;\\\\n\\\\ncolor:#999;\\\\n\\\\npadding:60px 0;\\\\n\\\\nfont-size:16px;\\\\n\\\\n}\\\\n\\\\n
Chapter Summary
\\\\n\\\\nIn this chapter, you learned four core JSX operations: embedding expressions with {}, attribute binding (className / style), list rendering with map() and key, and conditional rendering (ternary / short-circuit).
With this knowledge, your blog homepage can now dynamically render article cards based on JS data.