React入门第二步：搞懂JSX语法

JSX 是一个 JavaScript 的语法扩展，它不是字符串，也不是 HTML。

JSX 可以很好地描述 UI 交互的本质形式，它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。

基本使用

\src\index.js

 
 
 
 
  
  
  
  import React from 'react'
  
  
  
  import ReactDom from 'react-dom'
  
  
  
  
  
  
  
  // 看上去是 HTML，但是实际是JSX 
  
  
  
  const title = Hello React
  
  
  
  // 调用 ReactDom.render方法，传入 jsx和节点对象
  
  
  
  ReactDom.render(title,document.getElementById('root'))

在使用 JSX 时，可以简单直接的按照 HTML 的规则来使用(你需要牢记它并不是 html )，那么有多行代码时，需要使用括号 () 包裹。

 
 
 
 
  
  
  
  import React from 'react'
  
  
  
  import ReactDom from 'react-dom'
  
  
  
  
  
  
  
  // 使用括号包裹jsx ，可以换行，代码更加整洁
  
  
  
  const title = (
  
  
  
    
  
  
  
     Hello React
  
  
  
      嘿嘿嘿

)

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

设置 VS Code 编辑器，让 JSX 代码补全：

 
 
 
 
  
  
  
  文件--选择项--设置--用户设置
  
  
  
  
  
  
  
  在用户设置添加
  
  
  
  "emmet.includeLanguages": {
  
  
  
           "javascript":"javascriptreact"
  
  
  
  }

如下图所示：

JSX 表达式

前面说到 JSX 具有 JavaScript 的全部功能，而在具体使用时可以直接套用 HTML 的规则。换句话说，在 HTML 规则里，如何展现 JS 的能力呢?

先来一点简单的常常甜头，JSX 中的能够进行：

动态显示数据 {}
调用方法: 自定义 + 内置
支持表达式, 支持三元表达式
模板字符串

接下来，我们开始搞它：

 
 
 
 
  
  
  
  import React from 'react';
  
  
  
  import ReactDOM from 'react-dom';
  
  
  
  
  
  
  
  const name= '西岭老湿'
  
  
  
  
  
  
  
  function sayHello () {
  
  
  
    return '大家好'
  
  
  
  }
  
  
  
  
  
  
  
  const obj = {
  
  
  
    name: '刘备',
  
  
  
    age: 100
  
  
  
  }
  
  
  
  
  
  
  
  const flag = true
  
  
  
  
  
  
  
  // 请开始你的表演====
  
  
  
  const title = (嘿嘿
) // JSX 本身也是可直接食用的值哟
  
  
  
  
  
  
  
  const App = (
  
  
  
      
  
  
  
        {/* 注释在 jsx 中是这么个熊样子*/}
  
  
  
  
  
  
  
       name
 {/* 这就鸳鸯(原样)展示了*/}
  
  
  
  
  
  
  
       {name}
 {/* 动态获取变量数据 */}
  
  
  
  
  
  
  
       {sayHello()}
 {/* 调用个函数违法吗? 不 */}
  
  
  
  
  
  
  
        {/* 执行原生 JS 不合理吗? 合理 */}
  
  
  
       {console.log('1111')}
  
  
  
       {Math.random()}
  
  
  
       {JSON.stringify(obj)}
  
  
  
  
  
  
  
        {/* 三元运算让你吃醋了? 没有 */}
  
  
  
       {flag ? '登录的状态' :'执行登录'}
  
  
  
  
  
  
  
        {/* 模板字符下,字符串和变量结婚,可以吗? 可以 */}
  
  
  
       {`hello, ${name}`}
  
  
  
  
  
  
  
        {/* JSX 也是可直接食用的值哟 */}
  
  
  
       {title}

// 01 jsx 本身就是一个表达式
const names =
西岭老湿
// 02 添加属性
const age =99
// 03 jsx 添加子元素（JSX只有一个父元素）
// 04 单标签必须闭合
// 组件
functionApp() {
return (
// 返回中只能有一个JSX 块
//
// 报错
{/* jsx 本身就是一个表达式 */}
{names}
{/* 添加属性 */}
用户年龄属性
{/* 字符串属性 */}
用户年龄属性
{/* 动态属性 */}
{/* 单标签必须闭合 */}
{/* */}{/*报错*/}
{/* 单标签正确写法 */}

// 事件处理函数
const event1 =function(){
alert('嘿嘿 React')
}
functionApp (){
return (
事件绑定
{/* 事件名使用驼峰法命名、直接使用函数赋值，不是函数调用 */}
你点啊
)
}
exportdefault App

//事件传参
const event1 =function(name,age){
alert(name)
alert(age)
}
functionApp (){
return (
事件绑定
{/* 因为事件绑定需要接收函数本身，作为事件处理，不能直接调用 */}
{/* 因此传参需要使用箭头函数返回事件处理函数,而不能是函数调用 */}
{event1('西岭',16)}}>你点啊
{/* 或者使用 bind等其方式，将函数本身作为返回值传入 */}
你再点一下试试
{/* 再次强调 JSX 就是 JS 扩展，就是JS */}
)
}
exportdefault App

// 事件对象传参
const event1 =function (ev) {
console.log(ev);
}
functionApp() {
return (
事件绑定
{/* 01 函数无传参 */}
{/* 事件对象默认传入，因此直接在事件处理函数中形参接收即可 */}
点一下？
{/* 02 箭头函数传参
因为事件对象有默认传入，而使用箭头函数时，则需要在箭头函数中传入后
再在箭头函数返回的函数中传入 */}
{ event1(ev,'西岭',16) }}>你点啊
{/* 03 bind 等其方式
将函数本身作为返回值传入，事件对象默认会添加在最后一个参数中
无论有无参数传入，事件对象都不需要写，事件处理函数按顺序接收即可 */}
你再点一下试试
)
}
exportdefault App

const item1 = [1,3,5]
functionApp() {
return (
{/* JSX 默认会对数组进行结构 */}
{item1}
)
}
exportdefault App

const item1 = [1,3,5]
const item2 = [
item1
,
item1
,
item1
]
functionApp() {
return (
{/* JSX 默认会对数组进行结构 */}
{item1}
{/* 数组值为 jsx 同样可以直接使用*/}
{item2}
)
}
exportdefault App

// 数组数据
const arr = [
{ id:1,name:'痴心绝对' },
{ id:2,name:'像我这样的人' },
{ id:3,name:'南山南' }
]
// === 数据遍历 ===
functionloops() {
var a2 = []
// 循环遍历数据
for (var i =0; i < arr.length; i++) {
// 将数组内容结构为JSX 数组
a2.push({arr[i].name})
}
return a2
}
functionApp() {
return (
{/* 调用遍历函数，获取 JSX 数组展示 */}
{loops()}
)
}
exportdefault App

// 数组数据
const arr = [
{ id:1,name:'绝对痴心' },
{ id:2,name:'像我这样帅的人' },
{ id:3,name:'南山难' }
]
functionApp() {
return (
{/* map 方法遍历数组 */}
{arr.map(item=>
{item.id}--{item.name}
)}
)
}
exportdefault App

//声明样式对象
const styles = {
color:'red',
// 样式的属性名需要处理,要么
// font-size:'20px', // 直接使用报错
fontSize:'30px',// 转大写 √
'background-color':'pink'// 引号包裹 √
}
functionApp (){
return (
{/* 内联样式需要以对象形式展示 */}
西岭老湿
真的很帅
)
}
exportdefault App

// 引入外联样式文件
import './App.css'
function App (){
return (
小蓝同学
胖蓝
)
}
export default App

import React from 'react'
import ReactDom from 'react-dom'
var f = false
const fun1 = ()=>{
if(f){
return(
哈哈哈哈
)
}else{
return(
嘿嘿
)
}
}
const title = (
// 使用括号，可以换行，代码更加整洁
{fun1()}
)
ReactDom.render(title,document.getElementById('root'))

React入门第二步：搞懂JSX语法

基本使用

Hello React

Hello React

JSX 表达式

嘿嘿

西岭老湿

事件绑定

事件绑定

事件传参

事件绑定

事件对象传参

事件绑定

列表渲染

{item1}

{item1}

{item.id}--{item.name}

样式设置

小蓝同学

条件渲染

哈哈哈哈

嘿嘿