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

legs+

import React from 'react'
import ReactDOM from 'react-dom'
import asabenehImage from './images/asabeneh.jpg'
const UserCard = ({ user: { firstName, lastName, image } }) => (
<div className='user-card'>
<img src={image} alt={firstName} />
<h2>
{firstName}
{lastName}
</h2>
</div>
)
const Button = ({ text, onClick, style }) => (
<button style={style} onClick={onClick}>
{text}
</button>
)
const buttonStyles = {
backgroundColor: '#61dbfb',
padding: 10,
border: 'none',
borderRadius: 5,
margin: 3,
cursor: 'pointer',
fontSize: 18,
color: 'white',
}
const Header = (props) => {
const {
welcome,
title,
subtitle,
author: { firstName, lastName },
date,
} = props.data
return (
<header>
<div className='header-wrapper'>
<h1>{welcome}</h1>
<h2>{title}</h2>
<h3>{subtitle}</h3>
<p>
{firstName} {lastName}
</p>
<small>{date}</small>
</div>
</header>
)
}
const TechList = ({ techs }) => {
return techs.map((tech) => <li key={tech}>{tech}</li>)
}
const Main = (props) => {
return (
<main>
<div className='main-wrapper'>
<p>Prerequisite to get started react.js:</p>
<ul>
<TechList techs={props.techs} />
</ul>
<UserCard user={props.user} />
<Button
text='Greet People'
onClick={props.greetPeople}
style={buttonStyles}
/>
<Button
text='Show Time'
onClick={props.handleTime}
style={buttonStyles}
/>
</div>
</main>
)
}
const Footer = (props) => {
return (
<footer>
<div className='footer-wrapper'>
<p>Copyright {props.date.getFullYear()}</p>
</div>
</footer>
)
}
const App = () => {
const showDate = (time) => {
const months = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December',
]
const month = months[time.getMonth()].slice(0, 3)
const year = time.getFullYear()
const date = time.getDate()
return ` ${month} ${date}, ${year}`
}
const handleTime = () => {
alert(showDate(new Date()))
}
const greetPeople = () => {
alert('Welcome to 30 Days Of React Challenge, 2020')
}
const data = {
welcome: 'Welcome to 30 Days Of React',
title: 'Getting Started React',
subtitle: 'JavaScript Library',
author: {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
},
date: 'Oct 7, 2020',
}
const techs = ['HTML', 'CSS', 'JavaScript']
const user = { ...data.author, image: asabenehImage }
return (
<div className='app'>
<Header data={data} />
<Main
user={user}
techs={techs}
handleTime={handleTime}
greetPeople={greetPeople}
/>
<Footer date={new Date()} />
</div>
)
}
export default App;

复制代码

基于FP，效果如下：

simonzhd · 发表于 2026-1-6 17:59:02| 字数 26

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

legs+ · 发表于 2026-1-6 22:39:33| 字数 245

上面这段代码，很经典

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

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

legs+ · 发表于 2026-1-6 22:48:32| 字数 0

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

本帖子中包含更多资源

本帖子中包含更多资源

活跃会员

热心会员

发帖达人

最佳新人