2_2-React Typescript 2023 - 2. JSX-创建一个卡片

一、新建文件

frontend\src\Components\Card\Card.css

frontend\src\Components\Card\Card.tsx

frontend\src\Pages

二、code

 1.Card.css

//tsrafce 回车可创建代码结构
import React from 'react'
import './Card.css'
type Props = {}

const Card = (props: Props) => {
  return <div className="card">
      <img
        src="https://images.unsplash.com/photo-1612428978260-2b9c7df20150?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
        alt="Image"
      />
        <div className="details">
            <h2>苹果</h2>
            <p>$100</p>
        </div>
        <p  className="info">
            他的股价的波动很大，投资需谨慎
        </p>
    </div>

};

export default Card

2.frontend\src\App.tsx

import './App.css';
import Card from './Components/Card/Card';

function App() {
  return (
    <div className="App">
      <Card/>
    </div>
  );
}

export default App;

3.frontend\src\App.css

.card {
  width: 350px;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 50px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.card img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin: 5px;
}

.card .details {
  margin: 10px;
}

.card .details h2 {
  font-weight: 600;
}

.card .details p {
  text-transform: uppercase;
  font-weight: 300;
}

4.frontend\src\index.css

删除内容

5.运行

npm start

6.结果