React基础

//React:框架的核心包
//reactDOM:专门做渲染相关的包

import React from 'react';
import ReactDOM from 'react-dom/client';
//应用的全局样式文件
import './index.css';
//引入根组件
import App from './App';

//渲染根组件APP到一个id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

JSX介绍

目标任务: 能够理解什么是JSX，JSX的底层是什么

概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

作用：在React中创建HTML结构（页面UI结构）

优势：

采用类似于HTML的语法，降低学习成本，会HTML就会JSX
充分利用JS自身的可编程能力创建HTML结构

JSX中使用js表达式

目标任务: 能够在JSX中使用表达式

语法

{ JS 表达式 }
const name = 'dd'

<h1>你好，我叫{name}</h1>   //    <h1>你好,我叫dd</h1>

可以使用的表达式

字符串、数值、布尔值、null、undefined、object（ [] / {} ）
1 + 2、'abc'.split('')、['a', 'b'].join('-')
fn()

特别注意

if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

JSX列表渲染

目标任务: 能够在JSX中实现列表渲染

页面的构建离不开重复的列表结构，比如歌曲列表，商品列表等，我们知道vue中用的是v-for，react这边如何实现呢？

实现：使用数组的map 方法

注意点：需要为遍历项添加 key 属性

[HMR] WAITING FOR UPDATE SIGNAL FROM WDS.

CHILD IN A LIST SHOULD HAVE A UNIQUE "KEY" PROP.

WARNING: EACH

CHECK THE TOP-LEVEL RENDER CALL USING (UT/ SES HTTPS://RSACTJ5,ARB/HINK(WAMINB-KEYS FOR MORE INFONMAT

AT LI

1key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用

2key 在当前列表中要唯一的字符串或者数值（String/Number）

3如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值

4如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

JSX条件渲染

目标任务: 能够在JSX中实现条件渲染

作用：根据是否满足条件生成HTML结构，比如Loading效果

实现：可以使用三元运算符或逻辑与(&&)运算符

JSX样式处理

目标任务: 能够在JSX中实现css样式处理

● 行内样式 - style

● 行内样式 - style - 更优写法

● 类名 - className（推荐）

● 类名 - className - 动态类名控制

JSX注意事项

目标任务: 掌握JSX在实际应用时的注意事项

1.JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代

2.所有标签必须形成闭合，成对闭合或者自闭合都可以

3.JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor

4.JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现

格式化配置

目标任务: 基于vscode配置格式化工具，提高开发效率

1 安装vsCode prettier插件

2 修改配置文件 setting.json

{
  "git.enableSmartCommit": true,
  // 修改注释颜色
  "editor.tokenColorCustomizations": {
    "comments": {
      "fontStyle": "bold",
      "foreground": "#82e0aa"
    }
  },
  // 配置文件类型识别
  "files.associations": {
    "*.js": "javascript",
    "*.json": "jsonc",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "extensions.ignoreRecommendations": false,
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.hg": true,
    "**/.svn": true,
    "**/CVS": true,
    "**/node_modules": false,
    "**/tmp": true
  },
  // "javascript.implicitProjectConfig.experimentalDecorators": true,
  "explorer.confirmDragAndDrop": false,
  "typescript.updateImportsOnFileMove.enabled": "prompt",
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "editor.fontWeight": "500",
  "[json]": {},
  "editor.tabCompletion": "on",
  "vsicons.projectDetection.autoReload": true,
  "editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.fontSize": 16,
  "debug.console.fontSize": 14,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.minimap.enabled": true,
  "emmet.extensionsPath": [
    ""
  ],
  // vue eslint start 保存时自动格式化代码
  "editor.formatOnSave": true,
  // eslint配置项，保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "vetur.ignoreProjectWarning": true,
  // 让vetur使用vs自带的js格式化工具
  // uni-app和vue 项目使用
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.semicolons": "remove",
  // // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // // 指定 *.js 文件的格式化工具为vscode自带
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  // // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.jsxBracketSameLine": true,
  // 函数前面加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  // eslint end
  // react
  // 当按tab键的时候，会自动提示
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    // jsx的提示
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  // end
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // @路径提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "git.ignoreMissingGitWarning": true,
  "window.zoomLevel": 1
}

React ｜ 青训营笔记