ReactJsx

jsx

创建元素

// cra 入口 index.js
import React from 'react';
import ReactDOM from 'react-dom';

// 创建并渲染React元素
const title = React.createElement('h1', null, '你好呀 React')
ReactDOM.render(title, document.getElementById('root'))

import React from 'react';
import ReactDOM from 'react-dom';

/* jsx写法
 &
 * 推荐使用jsx语法
 &
 * 写jsx就跟写html一样，更直观、友好
 &
 * jsx更能体现react声明式的特点(描述ui长什么样子)
 *
 */ 

const title = <p>这是p标签<span>p里边的span</span></p>
ReactDOM.render(title, document.getElementById('root'))

jsx注意事项

import React from 'react';
import ReactDOM from 'react-dom';

// jsx使用注意事项
/**
 * React元素的属性名使用驼峰命名法
 &
 * 特殊属性名：class => className 、 for => htmlFor 、tabindex => tabIndex
 &
 * 没有子节点的react元素可以用 /> 结束  单 <span/> 也是可以的，但不要和html弄混了
 &
 * 推荐使用小括号()包裹jsx, 从而避免js中的自动插入分号陷进。 结构也更加清晰
 *
 */

/** 
 *  其他.....
 *  基于javascript个xml的扩展语法
    他可以作为值使用
    他并不是字符串
    他也不是html 他可以配合js表达式一起使用， 他不可以和js的 语句一起使用(for,if 等…)
    所有的标签名必须小写，必须闭合，哪怕是单标签
    class写成className
    style 接收的是一个对象{}，并不是字符串
    最外层只能有一个容器，
    差值表达式{}
    代码注释 尽量使用快捷键 Ctrl + /
    dangerouslySetInnerHTML={{__html:item}} 解析html标签，在input框中输入html标签可用
    点击label标签激活文本框，不能直接使用for 使用htmlFor
    参考资料： https://blog.csdn.net/weixin_46146313/article/details/107025994
 */
const title = (
  // 使用小括号里面也可以换行了
  <p className="abc">这是p标签<span>
    p里边的span
  </span>
    <span />
  </p>
)

ReactDOM.render(title, document.getElementById('root'))

jsx中使用javascript

import React from 'react';
import ReactDOM from 'react-dom';

// jsx中使用javascript表达式
// jsx中使用javascript表达式的注意事项  
/* 
 *
 * 单花括号中可以使用任意的JavaScript表达式
 &
 * JSX本身也是一个js表达式
 &
 * JSX中不能使用对象，但是在style属性中可以使用
 &
 * 不能在单花括号中直接使用 if/for 等语句
 *
 */ 
const name = '牛恒'
const age = '23'
const title = (
  <p className="abc">这是p标签
  <span>
    p里边的span
  </span>
    <span />  <br />
    名字叫：{name} <br />
    年龄是：{age} <br />
  </p>
)

ReactDOM.render(title, document.getElementById('root'))

jsx条件渲染

import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = true
// jsx条件渲染  场景 loading效果
// if else
// const renderIf = () => {
//   if (isLoading) {
//     return (
//       <div>loading...</div>
//     )
//   }
//   return (
//     <div>数据加载完成显示</div>
//   )
// }

// 三木运算符
// const renderIf = () => {
//   return (
//     isLoading
//       ? <div>loading...</div>
//       : <div>数据加载完成显示</div>
//   )
// }

// 条件与
const renderIf = () => {
  return (
    isLoading
    && (<div>loading...</div>)
  )
}
const title = (
  <div className="if">
    <h1>条件渲染</h1>
    {renderIf()}
  </div>
)

ReactDOM.render(title, document.getElementById('root'))

jsx列表渲染

import React from 'react';
import ReactDOM from 'react-dom';

const songs = [
  { id: 1, name: '南山南' },
  { id: 2, name: 'King' },
  { id: 3, name: 'mc' },
]

// 列表渲染
/**
 * 如果要渲染一组数据，应该使用数组的map方法
 &
 * 注意： 渲染列表时应该添加key属性，key属性的值要保证唯一
 &
 * 原则： map遍历谁，就给谁添加key属性
 &
 * 注意:  尽量避免使用索引号作为key
 * 
 */

const renderMap = () => {
  return (
    <ul>
      {songs.map((item) => {
        return <li key={item.id}>{item.name}</li>
      })}
    </ul>
  )
}
const title = (
  <div className="if">
    <h1>列表渲染</h1>
    {renderMap()}
  </div>
)

ReactDOM.render(title, document.getElementById('root'))

jsx样式处理

/**
 *
 * jsx样式处理
 &
 * 第一种  style = {{color: red , background :skyblue}}  style 中的是一个对象
 &
 * 第二种  使用className 起类名  引入外部样式
 * 
 */

jsx总结

/**
 *
 * jsx 总结
 * 1.jsx是React 的核心内容
 &
 * 2.jsx表示在js代码中写html结构，是React声明式的体现
 &
 * 3.使用jsx配合嵌入的表达式 、条件渲染、 列表渲染，可以描述任意ui结构
 &
 * 4.推荐使用className的方式给jsx添加样式
 &
 * 5.React完全利用js语言自身的能力来编写ui，而不是造轮子增强html功能（例如v-if、 vi-show）。
 *
 */