React 基本使用

react的概述

React主要用于页面的构建 从MVC的角度看

• 从MVC的角度看

  react仅仅是V视图层，只负责页面的渲染，没有完整的MC功能

• react 的特点

  1、声明式：

  只需要描述UI（HTML）看起来是什么样，就跟写HTML一样（使用的就是jsx语法）

  2、基于组件

  组件是react最重要的部分

  组件表示页面中的部分内容

  组合、复用多个组件、可以实现完整的页面功能

  3、学习一次随处使用

  可以开发Web应用

  可以开发移动端原生应用

  可以开发VR 等等..

react脚手架的使用

react的安装

npx create-react-app 项目名称

react脚手架意义

• 脚手架是开发 现代Web 应用的必备
• 充分利用Webpack、Babel、ESLint等工具辅助项目开发
• 零配置、无需手动配置繁琐的工具即可使用
• 关注业务、而不是工具配置

react基本使用

创建react元素

React.createElement(标签名，配置属性，内容) 第三个参数及其之后的，都表示子节点

渲染React元素

React.render（react元素，渲染的节点）

jsx

为什么使用jsx

createElement（）的问题:

1. 不简洁
2. 不直观
3. 不优雅

jsx是声明式语法、提升了开发效率

为什么脚手架中可以使用JSX语法

1. JSX不是标准的ECMAsScript语法、是一个扩展语法
2. 需要使用babel编译处理后，才能在浏览器中使用
3. 脚手架中已有babel默认配置、无需手动配置
4. 通过的是@babel/preset-react这个包来转换语法

注意点

• React元素的属性名使用驼峰命名法
• 特殊属性名：class -> className 、 for -> htmlFor 、 tabindex -> tabIndex
• 没有内容的元素开业写成单标签
• 推荐使用小括号包裹jsx语法

基本使用

• 嵌入JS表达式

  { JS表达式 }

• jsx的条件渲染

  在函数中通过if/else、逻辑运算符或者三元来判断渲染出来值

  在使用js表达式调用函数的返回出来的jsx

• jsx列表渲染

  利用数组的map（）方法

  渲染列表时应该添加key，key值保证唯一

  map遍历谁，就给谁加key

• jsx样式处理

  行内 -> style -> {{ 驼峰命名法的样式 }}

  类名 -> className -> 绑定类名写样式

react完全利用js语言自身的能力来编写UI，而不是造轮子增强HTML功能

感谢阅读！！！