React学习（day1）

npm create vite@latest创建react项目

什么是JSX

（jsx)是JavaScript和XML（HTML）的缩写，表示在js代码中编写HTML模板结构，它是react中编写UI模板的方式。（js）的语法扩展

在jsx中使用js表达式

通过大括号语法{}识别，比如常见的变量、函数调用、方法调用等

• 使用引号传递字符串
• 使用javaScript变量
• 函数调用和方法调用
• 使用javaScript对象

注意：if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中。

渲染列表

map循环那个结构，return结构。注意加上一个独一无二的key（字符串或者number id）

key的作用：React框架内部使用，提升更新性能。

        <ul>
          {list.map(item=><li key={item.id}>{item.name}</li>)}
        </ul>

实现条件渲染

语法：通过逻辑与运算符&&、三元表达式（?:）实现基础的条件渲染

React基础事件绑定

语法：on + 事件名 = { 事件处理程序 }, 整体上遵循驼峰命名法

React组件

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可

  function toButton(){
    return <button>Click me</button>
  }
  // 在跟组件内<toButton></toButton>使用

useState基础使用

useState是一个React Hook （函数），它与允许向组件添加一个状态变量，从而控制影响组件的渲染结果

本质：个普通的js变量不同，状态变量一旦发生变化，组件的视图ui也会跟着变化

  const [count, setCount] = useState(0)
  //useState是一个函数，返回值是一个数组
  //数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
  //useState的参数将作为count的初始值

修改对象状态

规则：对于对象类型的状态变量，应该始终传递set方法一个全新的对象进行修改 

组件基础样式方案

React组件基础的样式控制

• 行内样式

 <div style={{color:'red',fontSize:'50px'}}>this is app</div>

• 类名控制

<div className='top'>顶部</div>

classnames优化类名控制

classnames是一个简单的js库，可以非常方便的通过条件动态控制class类名的显示

npm install classnames下载库

<div className={classNames('nav-item',{active:type == item.type})}>动态渲染</div>