React学习--- JSX的学习

React学习— JSX

1.概述

​ JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之 间可以互相嵌套。可以理解为在 JS 中编写与 XML 类似的语言,一种定义带属性树结构 （DOM 结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种 编译器将这些标记编译成标准的 JS 语言。

​ 虽然你可以完全不使用 JSX 语法，只使用 JS 语法，但还是推荐使用 JSX，可以定义 包含属性的树状结构的语法，类似 HTML 标签那样的使用，而且更便于代码的阅读。

​ 这就是 JSX ，他是 JavaScrip 的一种扩展语法。我们推荐在 React 中使用这种语法 来描述 UI 信息。JSX 可能会让你想起某种模板语言，但是它具有 JavaScrip 的全部能力。

​ 我们把这种东西称之为，react 元素，它可以很好的描述 UI 信息（dom 节点的组合）

XML和HTML的区别：

1. HTML标签语言语法松散，XML语法严格，区分大小写
2. HTML主要是做页面传输，XML主要是做数据传输的
3. HTML所有标签都是定义好的，XML所有标签都是自定义的

2.JSX重构Hello world

ReactDOM.render(
 <h1>欢迎进入 React 的世界</h1>,
 document.getElementById('root') // 渲染到哪里
)

参数 1 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。

3.JSX语法中的js表达式

1. 嵌入js表达式

   js 表达式必须通过 {表达式} 的方式才能嵌入到 jsx 语法中.

   <h1>欢迎进入 React 的世界 {
         
          1+1 } </h1>
   

2. 属性绑定

   <h1 title={
         
          a + 1 }>欢迎进入 React 的世界</h1>
   

   class 的绑定用 className

   <h1 className={
         
         `big ${
           
           i==index?'active':''}`}>欢迎进入 React 的世界</h1>
   

   style 的动态绑定

   <h1 style={
         
         {
         
         width:20,fontSize:20}} >user</h1>
   
   

   label 中使用 for 的时候，要改成 htmlfor

   <h1 htmlFor="xxx">欢迎进入 React 的世界</h1>
   

3. 数组渲染

   直接渲染

   const list = [
    <li key="1">sunyang</li>,
    <li key="2">lining</li>,
    <li key="3">chenhe</li>
   ]
   

   数组成员可以是简单数据 number, string , 也可以是 dom 元素

   处理并渲染

   当数组成员是复合数据时,需要经过 forEach 或 map 方法处理后再渲染输出; map作用是将数据渲染成标签

   const list = [
    {
         
          name:'sunyang',age:10 },
    {
         
          name:'lining',age:20 },
    {
         
          name:'chenhe',age:30 }
   ];
   <ul>
    {
         
         
    list.map(function (item) {
         
         
    return <li key={
         
         item.age}>{
         
         item.name}</li>
    })
    }
   </ul>
   

4. JSX语法中的注释

   写法一（不推荐）： { // 注释 // … }

   写法二（推荐，把多行写到单行中）： { /* 单行注释 */ }

   写法三（多行）： { /* * 多行注释 */ }

注释在 babel 转换过程中会被忽略掉, 不会出现在最终的 js 代码中.

5. JSX基本语法规则

   1. 必须有且只能有一个根节点
   2. 多标签写到包到一个小括号中，防止 JavaScript 自动分号不往后执行的问题。
   3. 遇到以 < 开头的 HTML 标签就用 HTML 规则解析
   4. 遇到以 { 开头代码块，就用 JavaScript 规则解析
   5. 单标签不能省略结束标签 , 必须结束 />
   6. JSX 允许直接在模板中插入 JavaScript 变量
   7. 如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中

4.案例

在项目src文件夹中创建components文件交放组件

在components文件夹下创建Input.jsx文件

//rcc 生成class形式的组件
//rsf 生成函数式的组件
import './Input.scss'
import React, {
    
     Component } from 'react';

class Input extends Component {
    
    
    render() {
    
    
        // 像class这样编译为js后会产生歧义的代码, 必须按照react规定的语法书写, 并且必须遵循小驼峰命名法
        return (
            <div className='input'>
                <input type="text" placeholder='输入商品名称' />
                <span>搜索</span>
            </div>
        );
    }
}

export default Input;

在components文件夹下创建Input.scss文件

.input{
    
    
    display: flex;
    margin: 10px;
    input{
    
    
        height: 40px;
        outline: none;
        padding-left: 20px;
        border: 1px solid #ccc;
        flex:1;
    }
    span{
    
    
        width: 80px;
        display: inline-block;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
}

在components文件夹下创建List.jsx文件

import React, {
    
     Component } from 'react';
//本地图片必须import导入, 才能使用
import logo from '../logo.svg'

import './List.scss'

class List extends Component {
    
    
    constructor(props){
    
    
        super(props);
        this.state = {
    
     //定义组件状态
            arr:[
                {
    
    name:'护肤',pic:logo},
                {
    
    name:'彩妆',pic:logo},
                {
    
    name:'香氛',pic:logo},
                {
    
    name:'进口酒',pic:logo},
                {
    
    name:'国产酒',pic:logo},
                {
    
    name:'精品奢货',pic:logo},
                {
    
    name:'食品百货',pic:logo},
                {
    
    name:'母婴专区',pic:logo},
                {
    
    name:'直播专区',pic:logo},
                {
    
    name:'特卖专场',pic:logo},
            ]
        }
    }
    render() {
    
    
        return (
            <div className='list'>
                {
    
    
                    // 列表渲染, 使用js中的map函数
                    this.state.arr.map((item)=>{
    
    
                        return (
                            <div className="cate">
                                <img src={
    
    item.pic} alt="" />
                                <div className="name"> {
    
    item.name} </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;

在components文件夹下创建List.scss文件

.list{
    
    
    display: flex;
    flex-wrap: wrap;
    .cate{
    
    
        width: 20%;
        text-align: center;
        img{
    
    
            width: 80%;
            border-radius: 50%;
        }
    }
}

在src文件夹中的App2.jsx文件

import logo from './logo.svg';
import './App.css';
import React from 'react';
import Input from './components/Input'
import List from './components/List'

class App extends React.Component{
    
    
  constructor(props){
    
     //在constructor中对组件状态进行初始化
    super(props);
    this.state = {
    
     //初始化组件状态
        
    }
  }

  render(){
    
     //render是必须的, render中必须通过return返回 组件模板
    return (
      <div className="App">
          {
    
    /* 渲染Input组件 */}
          <Input />

          {
    
    /* 渲染List组件 */}
          <List />

      </div>
    )
  }
}
export default App;

在index.js文件中

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App2';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

tMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();