React 入门：环境搭建、JSX、组件、事件与状态管理

1.环境搭建

使用creat-react-app快速搭建开发环境

执行命令

npx create-react-app 文件名

//for example
npx create-react-app react-basic

根据提示:

cd 对应目录
npm start 即可启动项目

1.1 清理文件目录

src下的文件仅保留App.js和index.js

App.js中写代码,会插入到index.html中
index.js要清除不用的代码,清理后的代码如下:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

App.js 中的代码如下:

function App() {
  return (
    <div>
      这是 app
    </div>
  );
}
export default App;

2.JSX基础

概念:JSX是Javascript和XML(HTML)的缩写,表示在 JS 代码中编写 HTML 模板结构,它是 React 中编写 UI 模版的方式

JSX 并不是标准的 JS 语法,它是 JS 的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中识别

2.1 识别JS表达式

在JSX中可以通过大括号语法{}识别 JavaScript 中的表达式,比如常见的变量,函数调用,方法调用等等
1.使用引号传递字符串
2.使用 JavaScript 变量
3.函数调用和方法调用
4.使用 JavaScript 对象

// 定义一个变量
let count=1;
//定义一个函数
function  getName(){
  return "我是函数"
}
function App() {
  return (
    <div className="App">
      <div>这是 app</div>
      {/* 1.使用引号传递字符串 */}
      {'这是字符串'}
      {/* 2.识别 js 变量 */}
      {count}
      {/* 3.函数调用 */}
      {getName()}
      {/* 4.方法调用 */}
      {new Date().getDate()}
      {/* 5.使用 JS对象 */}
      <div style={{color:'red'}}>我是红字</div>
    </div>
  );
}
export default App;

2.2 列表渲染

map什么结构,返回什么结构
注意事项:要加上一个独一无二的 key,key 在 react 框架内部使用,提升更新性能

// 定义一个数组
const student =[
  {id:1,name:"小王"},
  {id:2,name:"小李"},
  {id:3,name:"小张"}

]
function App() {
  return (
    <div className="App">
  <ul>
    {student.map(item=><li>我是云南的</li>)}
  </ul>
      
    </div>
  );
}

export default App;

function App() {
  return (
    <div className="App">
  <ul>
    {student.map(item=><li key={item.id}>{item.name}</li>)}
  </ul>
    </div>
  );
}

2.3 简单条件渲染

可以通过逻辑与运算符&&或三元表达式实现基础的条件渲染

{flag&&<span>this is span</span>}

{loading?<span>this is span</span>:<span>this is not span</span>}

2.4 复杂条件渲染

复杂条件渲染需要定义核心函数,然后调用函数渲染模版

// 定义文章类型
const article=3
//定义核心函数

function getArticleTem()
{
  if(article==0){
    return <div>我是无图文章</div>
  }else if(article==1)
  {
    return <div>我是有图文章</div>
  } else{
    return <div>我是多图文章</div>
  }
}
function App() {
  return (
    <div className="App">
      {getArticleTem()}
    </div>
  );
}
export default App;

2.5 react 事件绑定

事件绑定写在示例中

1.基本使用

function App() {
  const handleClick=()=>{
    console.log('button 被点击')
  }
  return (
    <div className="App">
       <button onClick={handleClick}>click me</button>
    </div>
  );
}

2.拿到事件回调函数中的形参 e

function App() {
  const handleClick=(e)=>{
    console.log('button 被点击',e)
  }
  return (
    <div className="App">
       <button onClick={handleClick}>click me</button>
    </div>
  );
}

3.传递自定义参数

function App() {
  const handleClick=(name)=>{
    console.log('button 被点击',name)
  }
  return (
    <div className="App">
       <button onClick={()=>handleClick('jack')}>click me</button>
    </div>
  );
}

4,既要自定义参数,并且还要事件对象 e

function App() {
  const handleClick=(name,e)=>{
    console.log('button 被点击',name,e)
  }
  return (
    <div className="App">
       <button onClick={(e)=>handleClick('jack',e)}>click me</button>
    </div>
  );
}

2.6 组件

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

// 1.定义组件
function Button(){
//  业务逻辑
//返回 UI
return <button>click me!</button>
}


function App() {
  
  return (
    <div className="App">
       {/* 1.自闭合标签 */}
       <Button/>
       {/* 2.成对标签 */}
       <Button></Button>
    </div>
  );
}

2.7 useState

useState 是一个 React Hook(函数),它允许我们向组件中添加一个状态变量,从而控制影响组件的渲染结果
本质:和普通 JS 变量不同的是,状态变量一旦发生变化组件的视图 UI 也会跟着变化(数据驱动视图)

const [count,setCount]=useState(0)

• 1.useState 是一个函数,返回值是一个数组
• 2 .数组中的第一个参数是状态变量,第二个参数是 set 函数用来修改状态变量
• 3.useState 的参数将作为 count 的初始值

import {useState} from 'react'
function App() {
  const [count,setCount]=useState(0)
  const handleClick=()=>{
    setCount(count+1)
  }
  
  return (
    <div className="App">
       <button onClick={handleClick}>{count}</button>
    </div>
  );
}

export default App;

useState修改状态的规则

• 状态不可变
  在 React 中,状态被认为是只读的,我们应该始终替换它而不是修改它,直接修改状态不能引发视图更新
  
• 修改对象状态
  规则:对于对象类型的状态变量,应该始终传给 set 方法一个全新的对象来进行修改
  

2.8 基础样式控制

React 组件基础的样式控制有两种方式

1. 行内样式(不推荐)
   写法一:

 <div className="App">
       <span style={{color:'red',fontSize:'50px'}}>道阻且长</span>
    </div>

写法二:

const style={
  color:'red',
  fontSize:'50px'
}
function App() {
  return (
    <div className="App">
       <span style={style}>道阻且长</span>
    </div>
  );
}

2. class 类名控制

写.css 文件,用 className 引入控制

3.classname工具类优化类名控制

先看这个代码:

<span
  key={item.type}
  onClick={() => handleTabChange(item.type)}
  className={`nav-item ${type === item.type && 'active'}`}
>
  {item.text}
</span>

这是在用 JavaScript 的模板字符串来动态生成 className。

• nav-item: 这是一个基础类名，无论如何都会有。
• ${type === item.type && ‘active’}: 这是动态部分。它利用了逻辑与 && 的短路特性：
• 如果 type === item.type 这个条件为 true，表达式会返回后面的 ‘active’，最终 className 就是 “nav-item active”。
• 如果条件为 false，表达式返回 false，最终 className 会变成 “nav-item false”。这在 HTML 中虽然通常无害，但并不规范，也可能在某些情况下导致意想不到的样式问题。

第二段代码

className={classNames('nav-item', { active: type === item.type })}

这里用了一个专门的工具函数 classNames (需要先安装引入这个库)。它的用法非常灵活和清晰：

• 传入字符串参数: 像 ‘nav-item’ 这样的字符串，会直接被包含在最终的 class 列表里。
• 传入对象参数: 对象的 键 (key) 是你想要添加的类名（比如 active），值 (value) 是一个布尔判断条件（比如 type === item.type）。
• 如果值为 true，这个键（类名）就会被包含进来。
• 如果值为 false，这个键就会被忽略。

4.受控表单绑定

概念:使用React组件的状态(useState)控制表单的状态

步骤如下:
1.准备一个 React 状态值

cosnt [value,setValue]=useState('')

2.通过 value 属性绑定状态,通过 onChange 属性绑定状态同步的函数

<input
	type='text'
	value={value}
	onChange={(e)=>setValue(e.target.value)}
/>

5.React获取DOM

在 React 组件中获取/操作 DOM,需要使用 useRef 钩子函数,分两步
1.使用 useRef 创建 ref 对象,并于 JSX 绑定

const inputRef=useRef(null)
<input type='text' ref={inputRef}>

2.在 DOM 可用时,通过 inputRef.current 拿到 DOM 对象

console.log(inputRef.current)