# React学习

**Repository Path**: MirageClouds/react

## Basic Information

- **Project Name**: React学习
- **Description**: React学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-08
- **Last Updated**: 2024-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React基础(核心)

### React开发环境

* 安装React开发环境

  * 执行命令：`npx create-react-app 项目名称`
    * npx：Node.js工具命令，查找执行后续的包命令
    * create-react-app：核心包(固定写法)，用于创建react项目

  * 创建React项目的其他方法
    * <a href='https://zh-hans.react.dev/learn/start-a-new-react-project'>点击前往</a>

* 开发环境文件解析：

  * package：项目的包文件，包含了项目的包名称和短命令
  * package-lock：项目的包文件，包含了项目的包名称和地址
  * .gitignore：git忽略文件
  * src文件夹：
    * App.js：项目的根组件
    * index.js：项目的入口
  * public文件夹：
    * index.html：项目最终渲染到的位置

### React基础语法:JSX

* 什么是JSX：

  * JSX是JavaScript和XML(TML)的缩写，表示在**JS代码中编写HTML模板结构**，它是React中编写UI模板的方式
  * JSX并不是标准的JS语法，它是**JS语法的扩展**，浏览器本身不能识别，需要通过**解析工具做解析**之后才能在浏览器中运行
    * 流程
      * JSX语法->BABEL解析->浏览器运行模板

* 优势：

  * HTML的声明式模板写法
  * JS的可编程能力

* 语法：

  * JSX中使用JS表达式：

    * 在JSX中可以通过**大括号语法{}**识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等

    * ```react
      const count = 100
      
      function msg() {
          return `This is fucking msg function return`
      }
      
      function App() {
          return (
              <div>
                  {/*使用引号传递字符串*/}
                  {'This is fucking JavaScript String'}
                  {/*识别js变量*/}
                  {count}
                  {/*函数调用*/}
                  {msg()}
                  {/*方法调用*/}
                  {new Date().getFullYear()}
                  {/*使用js对象*/}
                  <div style={{color: 'red', fontSize: 40}}>This fucking div element</div>
              </div>
          );
      }
      ```

    * 注意，if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中
    
  * JSX实现列表渲染
  
    * 使用JS中的map函数进行渲染
  
    * ```react
      function ListMsg() {
          const list = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
              // 渲染列表，map循环那个结构就return那个结构
              // 要加上独一无二的key 字符串或number id
              // key的作用，React框架内部使用 用于提升性能
          return (
              list.map(
                  (item, index) => <li key={index} style={{listStyle: 'none'}}>{item}</li>
              )
          )
      }
      ```