// 数据列表
const arr = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王二' }，
  { id: 4, name: '麻子' }
]

function App() {
  return (
    <div className="App">
      <ul>
        {
          arr.map(item => <li>{item.name}</li>)
        }
      </ul>
    </div>
  )
}

export default App

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

key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用
key 在当前列表中要唯一的字符串或者数值（String/Number）
如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

4.jsx条件渲染

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

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

// 布尔值
const flag = true
function App() {
  return (
    <div className="App">
      {/* 条件渲染字符串 */}
      {flag ? '前端真难' : '前端简单'}
      {/* 条件渲染标签/组件 */}
      {flag ? <span>this is span</span> : null}
    </div>
  )
}
export default App

5.jsx样式处理

1）行内样式：

function App() {
  return (
    <div className="App">
      //最外面{}是表达式,内部{}是对象,驼峰写法,用','隔开
      <div style={{ color : 'red' , fontSize : '24px' }}>this is a div</div>
    </div>
  )
}

export default App

2）行内结合声明变量：（常用写法，推荐）

const styleObj = {
    color:red
}

function App() {
  return (
    <div className="App">
      <div style={ styleObj }>this is a div</div>
    </div>
  )
}

export default App

3）使用className动态类名控制

/* app.css */
.title{
    color : #E13500;
}

// 引入样式文件
import './app.css'
const showTitle = true
function App() {
  return (
    <div className="App">
      // 表达式+三元 使用class会报错，必须使用className
      <div className={ showTitle ? 'title' : ''}>this is a div</div>
    </div>
  )
}
export default App

6.jsx注意事项

1）jsx必须有一个根节点，如果没有根节点则使用<></>（幽灵节点）代替根节点，相当于vue中的<template></template>标签

2）所有标签必须形成闭合，双标签闭合或者单标签闭合都可

3）jsx语法更贴近js语法，属性名采用驼峰命名法，例：className,htmlFor

4）jsx支持多行（换行），如需换行，使用（）包裹，防止bug出现

7.格式化配置

根据个人需求，配不配置都可以 这是基于vscode配置格式化工具，提高开发效率

1）安装vsCode prettier插件

2）修改配置文件 setting.json (全选覆盖原先的即可）

{
  "git.enableSmartCommit": true,
  // 修改注释颜色
  "editor.tokenColorCustomizations": {
    "comments": {
      "fontStyle": "bold",
      "foreground": "#206f42"
    }
  },
  // 配置文件类型识别
  "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
}

文章链接：

1.创建React项目(入门保姆级）

2.CSS单行/多行文本溢出显示省略号(...)

3.css中background属性引入图片url()中地址

4.async/await 搭配 promise使用