React学习D11.课程安排 2.React 介绍 3. 搭建React开发环境使用cra，底层有webpack构建

1.课程安排

2.React 介绍

3. 搭建React开发环境

使用cra，底层有webpack构建

3.1 在项目命令行搭建开发环境

搭建成功：

3.2 快速跑起项目

成功启动！

3.3 项目结构

只保留两个js文件

3.4 JSX介绍

3.4.1 JSX的本质（babel解析，开发者只要遵循JSX语法，就可以高效率开发）

注意：浏览器不能直接识别JSX，是babel自动解析成浏览器能识别的语法 Babel

3.4.2 JSX使用（以下介绍高频场景）

const count=100
function getName(){return '张三'}
function App() {
  return (
    <div className="App">
     this is app
     {/* 1. 使用引号耗材你弟字符串 */}
     {'你好 '}
     {/* 2. 使用JavaScript变量 */}
      {count}
      {/* 函数调用 */}
      {getName()}
      {/* 3. 方法调用 */}
      {new Date().getTime()}
      {/* 4. 使用JavaScript对象 这里举例使用内联样式*/}
      <div style={{color:'red'}}>this is div</div>
    </div>
  );
}

export default App;

结果：

3.4.3 JSX实现列表渲染

重点：遍历需要绑定唯一个key值拓展；key是react框架内部使用提升更新性能

// 定义list
const list=[
  {id:1,name:'张三'},
  {id:2,name:'李四'},
  {id:3,name:'王五'},
]
function App() {
  return (
    <div className="App">
     <ul>
      {/* 注意：使用map需要绑定唯一的key值 */}
      {list.map(item=><li key={item.id}>{item.name}{item.id}</li>)}
     </ul>
    </div>
  );
}

export default App;

3.4.4 JSX实现条件渲染

与运算：两者为真则为真，则显示，即连接符后的为ture则显示

const isLogin = true;
function App() {
  return (
    <div className="App">
   {/*  1. 逻辑与运算 */}
   {isLogin && <h1>欢迎来到首页</h1>}
   
   {/* 三元运算 */}
   {isLogin ? <h1>为真</h1> : <h1>请先登录</h1>}
    </div>
  );
}

export default App;

结果：

3.4.5 JSX中实现复杂条件渲染

如下图：无图、双图、多图

const aType=1
// 定义核心函数（根据文章类型返回不同的JSX模板）
function getaType(){
  if(aType===1){
    return <h1>我是无图文章</h1>
  }else if(aType===2){
    return <h1>我是单图文章</h1>
  }else if(aType===3){
    return <h1>我是多图文章</h1>
  }
}
function App() {
  return (
    <div className="App">
 {/* 通过调用函数渲染不同的模板 */}
 {getaType()}
    </div>
  );
}

export default App;

结果：（const aType=1（当aType=1时渲染无图））

3.5 React学习

3.5.1 React基础事件绑定

3.5.1.1 简单尝试绑定button事件


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

export default App;

结果：

3.5.1.2 获取事件参数


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

export default App;

3.5.1.3 获取自定义参数（要用到箭头函数的引用写法）

常用于做删除和编辑


function App() {
  const handelClick = (e) => {
    console.log('按钮被点击了',e);
  };
    const buttonClick = (name) => {
    console.log('获取自定义事件',name);
  };
  return (
    <div className="App">
      <button onClick={handelClick}>点我获取参数</button>
      <button onClick={() => buttonClick('自定义函数被获取了')}>自定义事件</button>
    </div>
  );


  
}

export default App;

3.5.1.4 同时要事件对象和自定义参数


function App() {

    const complexClick = (name,e) => {
    console.log('获取自定义事件',name,e);
  };
  return (
    <div className="App">
      <button onClick={(e) => complexClick('自定义函数被获取了',e)}>自定义事件</button>
    </div>
  );  
}

export default App;

3.5.2 React中的组件

// 1.定义组件(也可以通过箭头函数得方式定义组件)
function Button(){
  // 组件逻辑
  return (
    <button>
      我是按钮
    </button>
  )
}
function App() {
  return (
    <div className="App">
      {/* 使用组件 */}
      <Button />
      <Button></Button>
    </div>
  );
}

()
export default App;

结果：

3.6 useState（用于定义响应式变量=>数据驱动视图）

3.6.1 useState基础用法

// 使用useState实现计数器案例：点击自增
import React, { useState } from 'react';
function App() {
  // 1.调用useState 添加一个状态变量
// useState(0) 是 React 的 Hook，它返回一个包含两个元素的数组：

// - 第一个元素：当前的状态值（这里是 0 ）
// - 第二个元素：更新状态的函数
// 使用解构赋值
  const[count,setCount] = useState(0);
  // 2.点击事件回调
  const handleClick=()=>{
    // 1、使用传入的新值修改count
    // 2、重新使用新的count渲染UI
    setCount(count+1);
    console.log(count);
  }

  return (
    <div className="App">
      <button onClick={handleClick}>{count}</button>
    </div>
  );


  
}

export default App;

结果：

3.6.2 useState使用规则

3.6.2.1 状态不可变

3.6.2.2 修改对象状态

使用展开运算符再进行覆盖

// 使用useState实现计数器案例：点击自增
import React, { useState } from 'react';
function App() {
  const [user,setUser] = useState({name:'张三'});
  const changeForm=()=>{
  setUser({
      ...user,
    name:'李四'
  })
  console.log(user)
  }
  return (
    <div className="App">
      <button onClick={changeForm}>{user.name}</button>
    </div>
  );
}

export default App;

注意：setUser 不会立即更新 user ，React 会批量处理状态更新，然后在下一次渲染时才使用新值！，所以第一次会先consle出张三，后面才会更新出李四

React学习D1