本篇为初始环境的搭建与环境测试，下篇开始正式搭建电商平台。

前言

1. 一个项目开始前所需的技术储备

-熟练掌握HTML、JS、TS的基础知识。

-了解一定的编程概念，例如函数、类。

-保持对知识充满探索的态度。

1. 项目配置所需的开发环境

使用脚手架工具create-react-app。

储备知识：终端命令行、代码编辑器👉https://code.visualstudio.com/

nodejs指路👉https://nodejs.org/en/

（node-v查看版本号不要太高啊~，依赖管理工具版本号npm -v）

1. 结合：搭建reactjs项目，使用npx命令

npx create-react-app my-app //自动设置一切配置
cd my-app //进入项目根目录
npm install //安装依赖
npm start //启动网站

亦可以使用react脚手架直接搭建ts语言的项目

首先要在终端cd 进入桌面
npx create-react-app my-app --template typescript   //创建react+ts项目名为my-app
cd进入文件夹my-app
npm install 安装依赖
npm start运行，启动网站

---

正文 碎片化知识

TC泛型：泛型是在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的特性。

React.FC：React.FC标识函数式组件，是在typescript中使用的一个泛型

常用方式-----为React.FC传入一个props，约束类型

一个例子：

场景，在robot子组件中使用props接收app组件传来的三个参数

1.定义接口
interface RobotProps{
    id:number,
    name:string,
    email:string
}
2.为React.FC传入props
const app: React.FC<RobotProps> = ({id,name,email}) => {
       return( <li>
            <h2>{name}</h2>
            <img src={`https://www.robohash.org/${id}`} alt="robot" />
            <p>{email}</p>
        </li>)
}

以上即可将数据完全展示在页面中be like：

配置react的css样式（css module 模组化）

方式1---TS的定义声明

配置custom.d.ts(不配置使用styles会报错的~如下图)

declare module "*.css" {
    const css :{[key:string]:string}
    export default css
}

回到App.tsx中👇

配置后，使用styles的方式引用css中样式名称👇即可生效

 <div className={styles.app}>
      <ul className={styles.robotList}>
       123
      </ul>
    </div>

方式2----css模组

该方式需要安装插件

npm指路👉https://www.npmjs.com/package/typescript-plugin-css-modules

npm i typescript-plugin-css-modules

.vscode/settings.json

{
	"typescript.tsdk": "node_modules/typescript/lib",
	"typescript.enablePromptUseWorkspaceTsdk": true
}

插件配置成功后，倘若想要在robot.tsx中引用robot.module.css中的样式，只需直接导入styles即可使用。

import styles from "./Robots.module.css"
-------------------------------------------
 <div className={styles.cardContainer}>styles中包含了Robots.module.css中所有样式名称
           
</div>

引用代码即使用，再次运行界面，已成功加入css模块。

本文正在参加「金石计划 . 瓜分6万现金大奖」 ”