论坛 › 电脑技术 › 【React】：今天写了一个基础简单的demo：

legs+ 发表于 2026-1-6 15:17:05

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

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.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

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

legs+ 发表于 2026-1-6 22:39:33

上面这段代码，很经典

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

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

legs+ 发表于 2026-1-6 22:48:32

查看完整版本: 【React】：今天写了一个基础简单的demo：