React 六角学院-学习笔记(元件基础)

使用vite安装环境

在terminal终端机输入
npm create vite@latest
安装后依照指令自行取名(这里取名sample)后选择react js
cd sample
npm i
npm run dev

安装好环境后

建立元件(简化程式码 重複以外的地方可用props传递变更)

//App.jsx

import Card from "./Card";function App() {  return (    <>      <h2>Vegetable every month</h2>      <p>        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, quis.      </p>      <Card        title="Basic"        price={1000}        content="every week"        callToAction="免费试用"      />      <Card        title="Pro"        price="联繫客服"        content="every month"        callToAction="每月都有菜"      />    </>  );}export default App;

//新增Card.jsx至src(与App.jsx同层)const Card = (props) => {  return (    <>      <div className="card mb-4">        <div className="card-header">          <h4 className="my-0">{props.title}</h4>        </div>        <div className="card-body">          <h1 className="card-title">            {typeof props.price === "number" ? `$${props.price}` : props.price}          </h1>          <p>{props.content}</p>          <button type="button" className="btn btn-outline-primary">            {props.callToAction}          </button>        </div>      </div>    </>  );};export default Card;

解构 将prop改为解构式(减少重複)

//Card.jsxconst Card = ({ title, price, content, callToAction }) => {  return (    <>      <div className="card mb-4">        <div className="card-header">          <h4 className="my-0">{title}</h4> //下略

以资料驱动元件(减少重複，且有几份资料就有几张卡片)

//App.jsximport Card from "./Card";function App() {  const products = [    //资料    {      id: 1,      title: "Basic",      price: 1000,      content: "every week",      callToAction: "免费试用",    },    {      id: 2,      title: "Pro",      price: "联繫客服",      content: "every month",      callToAction: "每月都有菜",    },  ];  return (    <>      <h2>Vegetable every month</h2>      <p>        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, quis.      </p>      {products.map((product) => {        return (          <Card            title={product.title}            price={product.price}            content={product.content}            callToAction={product.callToAction}            key={product.id} //记得补上key属性(且必须唯一)          />        );      })}    </>  );}export default App;

巢状元件

//src同层建立PrimaryButton元件//PrimaryButton.jsxconst PrimaryButton = ({ className, callToAction }) => {  return (    <button type="button" className={`btn ${className}`}>      {callToAction}    </button>  );};export default PrimaryButton;//Card.jsximport PrimaryButton from "./PrimaryButton";//将{content}下button改为{title === "Pro" ? (            <PrimaryButton              className="btn-primary"              callToAction={callToAction}            />          ) : (            <PrimaryButton              className="btn-outline-primary"              callToAction={callToAction}            />          )}