react第一天内容简单总结

react是构建用户页面的框架，包含四个大的部分：

• react: 核心库，
• react-dom: dom操作(用jsx来操作dom元素)
• react-router：路由,（类似vueRouter)
• redux：集中状态管理(类似vuex)

react特点：

1）声明式 用类似写html标签的形式来创建用户页面，它通过数据驱动视图变化，若数据发生变化它能很快更新dom

2）组件化（react核心)  封装组件可以实现复用，也可以使业务逻辑看起来更清晰，还能使整个项目修改起来更方便，节省时间

3）学习一次，哪里都是可以使用的    开发的三个主要方向：

使用react/rect-dom可以开发Web应用  使用react/react-native可以开发移动端原生应用（react-native）RN   使用react可以开发VR（虚拟现实）应用（react/react360）

创建react项目方式1

先全局安装脚手架工具包

命令：npm i -g create-react-app

用脚手架工具来创建项目

命令：create-react-app 项目名

创建方式2

直接使用npx来创建项目
npx create-react-app 项目名

区别：后者不用经常更新react版本，它拿到的都是最新的版本

使用react的步骤

1. 导入包： React， ReactDOM
2. 创建 react元素
3. 渲染元素到某个dom上

创建react元素的步骤

React.createElement的格式:

React.createElement('标签名',{标签上的属性1：值1},子元素1，子元素2)

JSX的注意事项

1. jsx必须要有一个根节点，可以写<></>
2. 属性名不能用js中的关键字。例如class, for   class 代替 className   for 代替 htmlFor
3. 单标签要闭合
4. 换行建议使用( )包裹,()里面的内容作为一个整体来渲染
5. 老版本(16.8)先引入react才能使用jsx

嵌入表达式的格式

{ JS 表达式 }类似vue的插值表达式{{}}的写法

单花括号中可以写什么？

表达式

定义：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）

特点：有值（或者能够计算出一个值）； 能被console.log()

其他的jsx表达式

注释

不可以写

1. 对象
2. js语句：if 语句/ switch-case 语句/ 变量声明语句

JSX-条件渲染

• if/else
• 三元运算符
• 逻辑与(&&)运算符
• switch case

JSX-列表渲染

在JSX中使用数组的map方法生成HTML结构

// 普通的渲染结构
// const element = (
//   <div className="App">
//     <div className="comment-container">
//       {/* 评论数 */}
//       <div className="comment-head">
//         <span>{state.list.length} 评论</span>
//       </div>
//       {/* 排序 */}
//       <div className="tabs-order">
//         <ul className="sort-container">
//           {state.tabs.map((item) => (
//             <li
//               className={item.type === state.active ? 'on' : ''}
//               key={item.id}>
//               按{item.name}排序
//             </li>
//           ))}
//           {/* <li className="on">按{热度}排序</li> */}
//           {/* <li>按时间排序</li> */}
//         </ul>
//       </div>

//       {/* 添加评论 */}
//       <div className="comment-send">
//         <div className="user-face">
//           <img className="user-head" src={avator} alt="" />
//         </div>
//         <div className="textarea-container">
//           <textarea
//             cols="80"
//             rows="5"
//             placeholder="发条友善的评论"
//             className="ipt-txt"
//           />
//           <button className="comment-submit">发表评论</button>
//         </div>
//         <div className="comment-emoji">
//           <i className="face" />
//           <span className="text">表情</span>
//         </div>
//       </div>

//       {/* 评论列表 */}
//       {state.list.map((item) => (
//         <div className="comment-list" key={item.id}>
//           <div className="list-item">
//             <div className="user-face">
//               <img className="user-head" src={item.img} alt="" />
//             </div>
//             <div className="comment">
//               <div className="user">{item.author}</div>
//               <p className="text">{item.comment}</p>
//               <div className="info">
//                 <span className="time">{item.time}</span>
//                 <span className={item.attitude === 1 ? 'like liked' : 'like'}>
//                   <i className="icon" />
//                 </span>
//                 <span className="hate hated">
//                   <i className="icon" />
//                 </span>
//                 <span className="reply btn-hover">删除</span>
//               </div>
//             </div>
//           </div>

//           {/* <div className="list-item">
//           <div className="user-face">
//             <img className="user-head" src="./images/avatar.png" alt="" />
//           </div>
//           <div className="comment">
//             <div className="user">西西弗的守望</div>
//             <p className="text">这个视频太好笑了</p>
//             <div className="info">
//               <span className="time">2021-10-08 09:05:00</span>
//               <span className="like liked">
//                 <i className="icon" />
//               </span>
//               <span className="hate hated">
//                 <i className="icon" />
//               </span>
//               <span className="reply btn-hover">删除</span>
//             </div>
//           </div>
//         </div> */}
//         </div>
//       ))}
//     </div>
//   </div>
// )

列表渲染中的key

它是唯一值（只要不重复就行)，有id用id，没有就用index代替

有key的情况:会在后面添加一个dom，没有key，则会一个一个比对相当消耗性能

JSX 样式处理

行内样式写法：

<dom元素 style={ {css属性1：值1,css属性2：值2} }></dom元素>

要点：

1. 为啥有两个{{ }}
   1. 外层的{}表示 要开始写js了
   2. 内层的{}表示是一个对象
2. 属性名是小驼峰格式 (background-color ===> backgroundColor)
3. 属性值是字符串, 如果单位是px，可以简写数值

使用 className类名来书写样式

• 用className（不是class）定义类名
• 把样式写在额外的.css文件中，然后引入.css文件

导入本地图片

如果发现显示不出来，就用import导入来使用

import avatar from './images/avatar.png'

环境配置-引入prettier-now

步骤

1. 安装vscode插件prettier-now
2. 补充配置

.vscode\settings.json

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 编辑器设置 - 保存时做格式化
  "editor.formatOnSave": true,
  // 编辑器设置 - 默认采用prettier-now做格式化
  // 如果使用的是prettier，这的设置应该是 esbenp.prettier-vscode
  "editor.defaultFormatter":"remimarsal.prettier-now",

  // 控制缩进
  "prettier.useTabs": false, // 缩进不使用tab，使用空格 
  "prettier.tabWidth": 2, // 缩进字节数
  
  // 函数声明时小括号前后要加空格
  // 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
  // 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
  "prettier.spaceBeforeFunctionParen": true,

  // react的jsx让>与结束标签同行
  "prettier.jsxBracketSameLine": true,
  "prettier.bracketSpacing": false, // 去掉数组内部前后的空格
  "prettier.semi": false, // 不要给语句加;
  "prettier.singleQuote": true, // 采用单引号
  "prettier.trailingComma": "none", // 不要尾随逗号,
  "prettier.printWidth": 80, // 每行超过80列就换行

  // 在.js中，写div按下tab就可以自动补全，而不需要写<div再补全
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}