万字血书 React—走近 React

npx create-react-app testdemocd testdemonpm i

npx create-react-app testdemo-ts --template typescriptcd testdemonpm i

{  "compilerOptions": {    "noImplicitAny": false, //不需要显示地声明变量的类型any    "target": "es5", //编译后的目标js版本    "lib": [      "dom",      "dom.iterable",      "esnext"    ], //库文件，过这些库文件，告诉typescript编译器可以使用哪些功能    "allowJs": true, //允许混合编译js文件    "skipLibCheck": true,    "esModuleInterop": true,    "allowSyntheticDefaultImports": true, //允许使用commonJs方式import默认文件    "strict": true,      "forceConsistentCasingInFileNames": true,    "noFallthroughCasesInSwitch": true,    "module": "esnext", //配置代码模块系统，Node.js的commonJs、ES6的esnext、requireJs的AMD    "moduleResolution": "node",// 决定编译器的工作方式    "resolveJsonModule": true,    "isolatedModules": true, //编译器会将每个文件作为单独的模块使用    "noEmit": true, //发生错误时候，编译器不会生成Js代码    "jsx": "react-jsx" //允许编译器支持编译react代码  },  "include": [    "src"  ] //使用此选项列出我们需要编译的文件， “文件路径”选项需要文件的相对或绝对路径}

1、npm install --save typescript @types/node @types/react @types/react-dom @types/jest2、所有js文件改为jsx文件3、import react

const element = <h1>Hello,world!</h1>

const name = '张三'// 1、使用JSX创建react元素const title = <h1>Hello {name}</h1>
//2、渲染react元素ReactDOM.render(title, document.getElementById('root'))

const loadData = () => {  if (loading) {    return <div>loading...</div>  }
  return <div>数据加载完成</div>}

const songs = [  { id: 1, name: '爱你' },  { id: 2, name: '年少有为' },  { id: 3, name: '南山南' },]  // 1、使用JSX创建react元素const list = (  <ul>    {songs.map(item => <li key={item.id}>{item.name}</li>)}  </ul>)

import './index.css'<div className="app">

import style from './index.css'<div className={style.app}>

declare module "*.css" {    const css: {        [key: string]: string //约定：导出key所在的对象，原始的类名和内容都会和转化为这个对象    };    export default css;}

npm i typescript-plugin-css-modules --save-dev

"plugins": [{   "name":"typescript-plugin-css-modules"}]

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

src/assets/imagessrc/assets/fontssrc/assets/icons

//构造函数constructor是唯一可以初始化state的地方constructor(props){    super(props);    this.state = {        count: 0    }}

//使用setState()修改数据，更新组件状态，调用render函数重新渲染onClick = {() => {    this.setState({isOpen: !this.state.isOpen});}}

onClick = {() => {    this.setState((preState, preProps) => {        return {count: preState.count + 1}    },() => {        console.log("count" ,this.state.conut)    });        this.setState((preState, preProps) => {        return {count: preState.count + 1}    },() => {        console.log("count" ,this.state.conut)    });}}

<ul>	{robots.map(r => <Robot id={r.id} name={r.name} email={r.email}></Robot>)}</ul>

//为Robot指定类型React.FC，FC(functional component)函数式组件的接口，接受泛型参数P(Props)const Robot: React.FC<RobotProps> = (props) => {    const id = props.id;    const name = props.name;    const email = props.email;    return (<div className={styles.cardContainer}>        <img src={`https://robohash.org/${id}`} alt="robot" />        <h2>{name}</h2>        <p>{email}</p>    </div>    );}