React基本概述、项目创建以及JSX语法

r囧r小猫 2022-12-27 01:54 269阅读 0赞

### React ###

*  React 概述
 *   *  React简介
     *  项目搭建
     *  项目结构说明
     *  基本使用
 *  JSX
 *   *  JSX简介
     *  JSX中的表达式
     *  条件渲染
     *  循环渲染
     *  理解循环
     *  CSS样式处理
     *  总结

# React 概述 #

## React简介 ##

*  React 是一个 MVC 框架
 *  React 主要是用来构建 UI
 *  React 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源

React 特点：

*  声明式：使用 React 编写UI界面和写HTML几乎一样
 *  高效： React通过对DOM的模拟，最大限度地减少与DOM的交互
 *  灵活：React可以与已知的库或框架很好地配合

## 项目搭建 ##

# 创建 react 项目，项目名是 myapp
    npx create-react-app myapp
    # 进入my-app 目录
    cd myapp
    # 启动项目
    npm start

**注意事项：**

*  项目名称中**不能有大写字母**
 *  npx 是 npm v5.2.0 之后提供的命令，使用npx后不需要先全局安装脚手架
 *  要在项目根目录下启动项目

创建之后项目效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]

## 项目结构说明 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 1]  
修改项目端口号： 在 package.json 文件中修改 scripts 节点

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 2]  
语法格式：

"start" : "set PORT = 端口号 && react-scripts start"

## 基本使用 ##

*  导入 react 和 react-dom 两个包
 *  使用 JSX 语法创建 react 元素
 *  调用 ReactDOM.render() 方法将元素渲染到页面中

index.js 文件

// 1. 导入 react 和 react-dom 两个包
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 2. 创建 react 元素
    const jsx = <h1>Hello World</h1>
    
    // 3. 调用 ReactDOM.render() 方法将元素渲染到页面中
    // 参数1: react元素
    // 参数2: html 页面中的 DOM 元素
    ReactDOM.render(jsx, document.querySelector('#app'))

index.html 文件

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app"></div>
    </body>
    </html>

# JSX #

## JSX简介 ##

JSX 是 JavaScript XML 的简写，就是在 JavaScript 中写 XML 格式的代码（我们只需要写 HTML）

优势： 和 HTML 一样，简单直观

**注意点**： 使用小括号包裹 JSX，避免 JS 格式化时自动插入分号

const jsx = (
      <div>
        <h1>用户信息</h1>
        <ul>
          <li>用户名: admin</li>     
          <li>密码: 123456</li>     
        </ul>
      </div>
    )

## JSX中的表达式 ##

在 JSX 中，可以在 \{ \} 中嵌入表达式

*  变量 （除了对象都可以）
 *  算数表达式
 *  函数表达式
 *  jsx自身也能作为表达式

不能出现在 \{ \} 中的东西

*  变量中保存了一个对象 （只有 style 中可以使用对象）
 *  `if/for` 等流程控制不能出现在 \{\} 中

import React from 'react'
    import ReactDOM from 'react-dom'
    
    
    const a = 10
    const b = 3
    const arr = ['吃', '喝', '玩', '乐']
    const flag = false
    const fn = () => { 
      console.log('这是一个函数')
    }
    const subJsx = <div>我是另一个JSX</div>
    
    const obj = { 
      a: 'Hi',
      b: '~~'
    }
    
    // 必须有一个根节点
    const jsx = (
      <div>
        <div>{  a + b }</div>
        <div>{  a - b }</div>
        <div>{  a * b }</div>
        <div>{  a / b }</div>
        <div>{  a % b }</div>
        <div>{  arr }</div>
        <div>{  flag ? '真的' : '假的' }</div>
        <div>{  fn() }</div>
        <div>{  subJsx }</div>
        { /* 对象和流程控制都不能写在 {} 之间 */}
        { /* <div>{ obj }</div> */}
        { /* <div>{ for (var i = 0; i < 10; i++) {} }</div> */}
      </div>
    )
    
    ReactDOM.render(jsx, document.querySelector('#app'))

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 3]

## 条件渲染 ##

核心思想：使用函数将渲染的业务逻辑封装，在 jsx 中直接调用函数

const flag = true
    
    const show = (flag) => { 
      if (flag) { 
        return (
          <div>我是真的</div>
        )
      } else { 
        return (
          <div>我是假的</div>
        )
      }
    }
    
    const s = show(flag)
    ReactDOM.render(s,document.querySelector('#app'))

![在这里插入图片描述][20201207141545666.png]

## 循环渲染 ##

核心思想：

*  使用数组的 `map()` 方法循环将每个单元的数据改造成 `jsx` ，并保存在一个新的数组中
 *  在 `{}` 中的数组是可以直接被循环渲染的
 *  **注意**： 要使用 `key` 绑定每一次循环，`key` 值要唯一

const userAry = [
      { id: 1, username: 'zs', age: 20, gender: 1},
      { id: 2, username: 'ls', age: 22, gender: 0},
      { id: 3, username: 'ww', age: 21, gender: 1}
    ]
    
    const jsx = (
      <table border="1" width="500" align="center">
        <thead>
          <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
    
        <tbody>
          { 
            userAry.map(item=>{ 
              return(
                <tr key={ item.id}>
                <td>{ item.id}</td>
                <td>{ item.username}</td>
                <td>{ item.age}</td>
                <td>{ item.gender === 1 ? '男' : '女'}</td>
              </tr>
              )
            })
          }
        </tbody>
      </table>
    )

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 4]

## 理解循环 ##

*  map()的作用是对数组中的每个单元进行加工
 *  map循环结束之后会得到一个新的数组
 *  \{\} 能直接循环数组并渲染每个单元

const hobbies = ['吃', '喝', '玩', '乐']
    const arr = hobbies.map(item => { 
        return <div>{ item}</div>
    })
    const jsx = (
      <div>{  arr }</div>
    )
    
    
    arr = [
        <div>吃</div>,
        <div>喝</div>,
        <div>玩</div>,
        <div>乐</div>
    ]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 5]

## CSS样式处理 ##

两种方式：

1.  style 方式(行内方式)： 对象形式设置样式 （不推荐）

const jsx = <div style={  { color: 'red', fontSize: '32px'} }>Hello World</div>

![在这里插入图片描述][20201207142542391.png]

1.  className方式(类名方式)

*  className 就是标签中的 class属性，在 jsx 中必须使用 className
 *  css样式写在一个独立的文件内
 *  使用 import 导入css文件

import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 导入css文件
    import './index.css'
    
    // className 属性用来设置类名
    const jsx = <div className="title">Hello World</div>
    
    ReactDOM.render(jsx, document.querySelector('#app'))

## 总结 ##

*  JSX 是在js代码中编写html结构，是React声明式的一个体现
 *  JSX 中可以使用各种表达式，表达式要写在 `{ }` 中
 *  JSX 中条件渲染是用函数完成的，在函数内计算出最终的 JSX 再在 \{\} 中调用该函数
 *  JSX 中的循环渲染使用 `map()` 方法
 *  JSX 中使用样式有 `style` 和 `className` 两种方式
    
    1.  style中使用对象方式设置样式；
    2.  className中来设置类名，样式写在另一个文件中，并且使用 import 导入css文件

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]: /images/20221120/cd0fff109a6341d2a354b0a31ba6e2b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/df4c3a3f8ce4488493162589b9f8b3f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201207140505447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201207141302879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70
[20201207141545666.png]: https://img-blog.csdnimg.cn/20201207141545666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201207142256519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201207142439960.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70
[20201207142542391.png]: https://img-blog.csdnimg.cn/20201207142542391.png