【React】：今天写了一个基础简单的demo：

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

复制代码

基于FP，效果如下：

我也准备学学react ，空了用RN开发一个app玩玩

上面这段代码，很经典

1.return，一个有 return 一个没有
=> (...)：通道畅通，结果直接流出来（自动 return）。
=> { ... }：通道被大括号截住了，你需要手动把结果 return 出来。

2。{ text, onClick, style }是什么意思？
更简洁：不需要到处写 props.。
更清晰：看函数的第一行（函数签名），就能立刻知道这个组件需要哪些参数（text, onClick, style）。如果只写一个 (props)，你还得去读代码通过 props.xxx 才知道它用了什么。