【React】：用react写了一个简单的demo：

1. import React from 'react'
   
2. import ReactDOM from 'react-dom'
   
3. import asabenehImage from './images/asabeneh.jpg'
   
4. 
   
5. // Fuction to show month date year
   
6. 
   
7. const showDate = (time) => {
   
8.   const months = [
   
9.     'January',
   
10.     'February',
    
11.     'March',
    
12.     'April',
    
13.     'May',
    
14.     'June',
    
15.     'July',
    
16.     'August',
    
17.     'September',
    
18.     'October',
    
19.     'November',
    
20.     'December',
    
21.   ]
    
22. 
    
23.   const month = months[time.getMonth()].slice(0, 3)
    
24.   const year = time.getFullYear()
    
25.   const date = time.getDate()
    
26.   return ` ${month} ${date}, ${year}`
    
27. }
    
28. 
    
29. // Header Component
    
30. const Header = ({
    
31.   data: {
    
32.     welcome,
    
33.     title,
    
34.     subtitle,
    
35.     author: { firstName, lastName },
    
36.     date,
    
37.   },
    
38. }) => {
    
39.   return (
    
40.     <header>
    
41.       <div className='header-wrapper'>
    
42.         <h1>{welcome}</h1>
    
43.         <h2>{title}</h2>
    
44.         <h3>{subtitle}</h3>
    
45.         <p>
    
46.           {firstName} {lastName}
    
47.         </p>
    
48.         <small>{showDate(date)}</small>
    
49.       </div>
    
50.     </header>
    
51.   )
    
52. }
    
53. 
    
54. // TechList Component
    
55. const TechList = ({ techs }) => {
    
56.   const techList = techs.map((tech) => <li key={tech}>{tech}</li>)
    
57.   return techList
    
58. }
    
59. 
    
60. // User Card Component
    
61. const UserCard = ({ user: { firstName, lastName, image } }) => (
    
62.   <div className='user-card'>
    
63.     <img src={image} alt={firstName} />
    
64.     <h2>
    
65.       {firstName}
    
66.       {lastName}
    
67.     </h2>
    
68.   </div>
    
69. )
    
70. 
    
71. // A button component
    
72. 
    
73. const Button = ({ text, onClick, style }) => (
    
74.   <button style={style} onClick={onClick}>
    
75.     {text}
    
76.   </button>
    
77. )
    
78. 
    
79. const buttonStyles = {
    
80.   backgroundColor: '#61dbfb',
    
81.   padding: 10,
    
82.   border: 'none',
    
83.   borderRadius: 5,
    
84.   margin: 3,
    
85.   cursor: 'pointer',
    
86.   fontSize: 18,
    
87.   color: 'white',
    
88. }
    
89. 
    
90. // Main Component
    
91. const Main = ({ user, techs, greetPeople, handleTime }) => (
    
92.   <main>
    
93.     <div className='main-wrapper'>
    
94.       <p>Prerequisite to get started react.js:</p>
    
95.       <ul>
    
96.         <TechList techs={techs} />
    
97.       </ul>
    
98.       <UserCard user={user} />
    
99.       <Button text='Greet People' onClick={greetPeople} style={buttonStyles} />
    
100.       <Button text='Show Time' onClick={handleTime} style={buttonStyles} />
     
101.     </div>
     
102.   </main>
     
103. )
     
104. 
     
105. // Footer Component
     
106. const Footer = ({ copyRight }) => (
     
107.   <footer>
     
108.     <div className='footer-wrapper'>
     
109.       <p>Copyright {copyRight.getFullYear()}</p>
     
110.     </div>
     
111.   </footer>
     
112. )
     
113. 
     
114. // The App, or the parent or the container component
     
115. // Functional Component
     
116. const App = () => {
     
117.   const data = {
     
118.     welcome: 'Welcome to 30 Days Of React',
     
119.     title: 'Getting Started React',
     
120.     subtitle: 'JavaScript Library',
     
121.     author: {
     
122.       firstName: 'Asabeneh',
     
123.       lastName: 'Yetayeh',
     
124.     },
     
125.     date: new Date(), // date needs to be formatted to a human readable format
     
126.   }
     
127.   const date = new Date()
     
128.   const techs = ['HTML', 'CSS', 'JavaScript']
     
129.   // copying the author from data object to user variable using spread operator
     
130.   const user = { ...data.author, image: asabenehImage }
     
131. 
     
132.   const handleTime = () => {
     
133.     alert(showDate(new Date()))
     
134.   }
     
135.   const greetPeople = () => {
     
136.     alert('Welcome to 30 Days Of React Challenge, 2020')
     
137.   }
     
138. 
     
139.   return (
     
140.     <div className='app'>
     
141.       <Header data={data} />
     
142.       <Main
     
143.         user={user}
     
144.         techs={techs}
     
145.         handleTime={handleTime}
     
146.         greetPeople={greetPeople}
     
147.       />
     
148.       <Footer copyRight={date} />
     
149.     </div>
     
150.   )
     
151. }
     
152. const rootElement = document.getElementById('root')
     
153. ReactDOM.render(<App />, rootElement)
     

复制代码

源代码如上，效果图如下



数据、方法以及要渲染的内容

今天，我又仿写了一个

1. 原始代码：
   
2. 
   
3. 
   
4. import React, { useState, useEffect } from 'react';
   
5. import blogPost from '../../data/blog1.json';
   
6. import { NavLink } from 'react-router-dom';
   
7. 
   
8. /**
   
9. * @author
   
10. * @function AllPosts
    
11. **/
    
12. 
    
13. const AllPosts  = (props) => {
    
14. 
    
15.   const [posts, setPosts] = useState([]);
    
16. 
    
17.   useEffect(()=>{
    
18. 
    
19.     const posts = blogPost.data;
    
20.     setPosts(posts);
    
21.   }, posts);
    
22. 
    
23.   return(
    
24. 
    
25.     <div className="row">
    
26. 
    
27. {
    
28.   posts.map(post => {
    
29. 
    
30.     return(
    
31. 
    
32.      
    
33. 
    
34. 
    
35.       <div className="col-md-3">
    
36. 
    
37. 
    
38.            <img src={post.blogImage} style={{width: "100%"}} />
    
39.    
    
40.     <p className="lead">
    
41.     <NavLink key={post.id} to={`/post/${post.id}`}>  <div className = "post-title">{post.blogTitle}</div>  </NavLink>
    
42. 
    
43.     </p>
    
44. 
    
45. 
    
46.        </div>
    
47.            
    
48.      
    
49. 
    
50. 
    
51. 
    
52. 
    
53.     )
    
54. 
    
55.   })
    
56. }
    
57. 
    
58.     </div>
    
59.    )
    
60. 
    
61. }
    
62. 
    
63. export default AllPosts

复制代码

然后，通过改写

1. 版本A:
   
2. 
   
3. import React from 'react';
   
4. import blogPost from '../../data/blog.json';
   
5. import { NavLink } from 'react-router-dom';
   
6. 
   
7. const AllPosts = () => {
   
8.   // 直接读取数据，无需 State 和 Effect
   
9.   const posts = blogPost.data;
   
10. 
    
11.   return (
    
12.     <div className="row">
    
13.       {posts.map((post) => (
    
14.         // 1. 修正 key 的位置到最外层
    
15.         <div className="col-md-3" key={post.id}>
    
16.          
    
17.           {/* 2. 添加 alt 属性 */}
    
18.           <img
    
19.             src={post.blogImage}
    
20.             alt={post.blogTitle}
    
21.             style={{ width: "100%" }}
    
22.           />
    
23. 
    
24.           {/* 3. 修正 HTML 嵌套，将 p 改为 div，或者直接去掉 p */}
    
25.           <div className="lead">
    
26.             <NavLink to={`/post/${post.id}`}>
    
27.               <div className="post-title">{post.blogTitle}</div>
    
28.             </NavLink>
    
29.           </div>
    
30.         </div>
    
31.       ))}
    
32.     </div>
    
33.   );
    
34. };
    
35. 
    
36. export default AllPosts;
    
37. 
    
38. 
    
39. 版本B:
    
40. 
    
41. import React, { useState, useEffect } from 'react';
    
42. import blogPost from '../../data/blog.json'; // 假设未来这里会被 API 替换
    
43. import { NavLink } from 'react-router-dom';
    
44. 
    
45. const AllPosts = () => {
    
46.   const [posts, setPosts] = useState([]);
    
47. 
    
48.   useEffect(() => {
    
49.     // 模拟从数据源获取数据
    
50.     const loadedPosts = blogPost.data;
    
51.     setPosts(loadedPosts);
    
52.   }, []); // 1. 修正：使用空数组作为依赖项，确保只在挂载时执行一次
    
53. 
    
54.   return (
    
55.     <div className="row">
    
56.       {posts.map((post) => (
    
57.         <div className="col-md-3" key={post.id}> {/* 2. 修正 key 位置 */}
    
58.           <img
    
59.             src={post.blogImage}
    
60.             alt={post.blogTitle} // 3. 添加 alt
    
61.             style={{ width: "100%" }}
    
62.           />
    
63.           <div className="lead"> {/* 4. 修正 HTML，p 改为 div */}
    
64.             <NavLink to={`/post/${post.id}`}>
    
65.               <div className="post-title">{post.blogTitle}</div>
    
66.             </NavLink>
    
67.           </div>
    
68.         </div>
    
69.       ))}
    
70.     </div>
    
71.   );
    
72. }
    
73. 
    
74. export default AllPosts;

复制代码