JSX看着一篇足以入门

JSX 介绍

学习目标: 能够理解什么是 JSX,JSX 的底层是什么
概念: JSX 是 javaScriptXML(HTML) 的缩写,表示在 JS 代码中书写 HTML 结构
作用: 在 React 中创建 HTML 结构(页面 UI 结构)
优势:

1. 采用类似 HTML 的语法,降低学习成本,会 HTML 就会 JSX

2. 充分利用 JS 自生的可编程能力创建 HTML 结构
注意: JSX 并不是标准的 JS 语法,是 JS 的语法扩展,浏览器默认是不识别的,脚手架中内置的@babel/plugin-transform-react-jsx 包,用来解析该语法,将声明式的 JSX 解析为命令式的函数调用

JSX 中使用 js 表达式

学习目标: 能够在 JSX 中使用表达式
语法:
{JS 表达式}

js 复制代码
function App() {
  // 1.识别常规变量
  const name = '跟着老惠学前端'
  // 2.原生js方法调用
  const age = () => {
    return 25
  }
  //3.三元运算符
  const flag = true

  return (
    <div className="App">
      {name}
      {age()}
      {flag ? '真棒' : '真菜'}
    </div>
  )
}

export default App

可以使用的表达式

1.字符串、布尔值、数值、null、undefined、object([]/{})

2.算数运算(1+2)、字符串方法("abcde".split(''))、数组方法(['a','b'].join('-'))

3. fn()
特别注意

if 语句/switch-case 语句/变量声明语句,这些叫做语句,不是表达式,不能书写在{}中!!!

js 复制代码
// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {
  return 25
}
//3.三元运算符
const flag = true
// 其他的自行尝试...
return (
  <div className="App">
    {name}
    <br />
    {age()}
    <br />
    {flag ? '真棒' : '真菜'}
    <br />
  </div>
)

JSX 列表渲染

学习目标: 能够在 JSX 中实现列表渲染

页面的构建离不开重复的列表结构,比如歌曲列表,商品列表等等,Vue 中用的式 v-for 做到这一点,react 中又该如何实现呢?

实现: 使用数组的 map 方法
案例:

js 复制代码
// 技术方案:map 重复渲染的是哪个模板 就return那个
// 注意事项:遍历列表时同样需要一个类似number/string不可重复的key 提高diff性能
// key仅仅在内部使用,不会出现在真实的dom结构
const stu = [
  { id: 1, name: '小明', age: 18 },
  { id: 2, name: '李华', age: 19 },
  { id: 3, name: '小红', age: 17 },
  { id: 4, name: '小芳', age: 17 },
]

return (
  <div className="App">
    <ul>
      {stu.map((item) => (
        <li key={item.id}>
          姓名:{item.name},年龄:{item.age}
        </li>
      ))}
    </ul>
  </div>
)

运行结果:

JSX 条件渲染

学习目标: 能够在 JSX 中实现条件渲染
作用: 根据是否满足条件生成 HTML 结构,比如 Loading 效果
实现: 可以使用三元运算符或者逻辑&&(与)运算符
实例:

js 复制代码
function App() {
  // 条件渲染
  // 技术方案:1.三元表达式(常用) 2.逻辑&&(与)运算

  const flag = true
  return (
    <div className="App">
      1.三元表达式<br/>
      (1).简单版:
        {flag ? <span>this is span</span>:null}<br/>
      (2).复杂版(可用小括号包裹起来):
      {
        flag ? (<div>
          <span>this is span2</span>
        </div>) : null
        }
      2.&& (前面为true则显示,false则不显示))<br/>
        {true && <span>this is span</span>}
    </div>
  );
}

export default App;

运行结果:

JSX 模板精简原则

学习目标: 使模板中的逻辑跟简洁
实现: 复杂的多分枝的逻辑收敛为一个函数,通过一个专门的函数来写分支逻辑,模板中只负责调用
实例:

js 复制代码
// 有一个状态type有1,2,3三种
// 1 展示 h1
// 2 展示 h2
// 3 展示 h3

const title = (type) =>{
    if(type === 1){
        return <h1>this is h1</h1>
    }
    else if(type === 2){
        return <h2>this is h2</h2>
    }
    else if(type === 3){
        return <h3>this is h3</h3>
    }
}
  return (
    <div className="App">
      {title(1)}
      {title(3)}
      {title(2)}
    </div>
  );
}

export default App;

运行结果:

JSX 样式处理

学习目标: 能够在 JSX 中实现 CSS 样式处理

1. 行内样式
实现: 在元素身上绑定一个 style 样式

- 行内样式 · style

js 复制代码
function APP(){
    return (
        <div className="App">
            <div style={{color:'red',fontSize:'10px'}}>this is div</div>
        </div>
    )
}
export default App

- 行内样式·style·优化写法

js 复制代码
function App() {
  const divStyle1 = {
    color:'blue',
    fontSize:'20px'
  }
  return (
        <div className="App">
            <div style={divStyle1}>this is div</div>
        </div>
    )
}

export default App;

2. 类名样式
实现: 在元素身上绑定一个 className 属性即可

1. 创建一个 css 样式表文件 app.css

css 复制代码
.colors {
  color: peru;
  font-size: 40px;
}

2. JSX 中引入 css 文件

js 复制代码
// 使用import引入样式表文件
import './app.css'

3. 在元素上用 className 属性绑定 class 样式

js 复制代码
    <div className='colors'>类名样式</div>

运行结果:

JSX 动态类名控制

学习目标: 根据需求判断是否显示某个类名的样式
实现: 使用三元表达式或逻辑&&运算

js 复制代码
import './app.css';
function App() {
  const color1 = true
  const color2 = true
    return (
        <div className="App">
            1. 三元:
            <div className={color1?'colors':''}>类名样式</div>
            2. &&(与)
            <div className={color2 && 'colors'}>类名样式</div>
        </div>
    )
}

export default App;

运行结果:

JSX 注意事项

学习目标: 掌握 JSX 实际开发过程中的一些注意事项

1. JSX 必须具有一个根节点,如果没有根节点可以使用<></>(幽灵节点)代替根节点将所有元素包裹起来

js 复制代码
function App() {
    return (
      <>
        <div className="App">1</div>
        <div className={htmlFor(i in 10)}>2</div>
      </>
    )
}

export default App;

2. 所有标签必须形成闭合(
),成对闭合或者自闭( )和都可以
  3. JSX 中的语法更加贴近 JS 语法,属性名采用驼峰命名法 class -> className; for -> htmlFor
  4. JSX 支持多行(换行),如果需要换行,需使用 ()包裹,防止出现 Bug

相关推荐
一颗松鼠3 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
有梦想的咸鱼_5 分钟前
go实现并发安全hashtable 拉链法
开发语言·golang·哈希算法
海阔天空_201310 分钟前
Python pyautogui库:自动化操作的强大工具
运维·开发语言·python·青少年编程·自动化
天下皆白_唯我独黑17 分钟前
php 使用qrcode制作二维码图片
开发语言·php
夜雨翦春韭21 分钟前
Java中的动态代理
java·开发语言·aop·动态代理
小远yyds23 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
何曾参静谧35 分钟前
「C/C++」C/C++ 之 变量作用域详解
c语言·开发语言·c++
q567315231 小时前
在 Bash 中获取 Python 模块变量列
开发语言·python·bash
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js