react18基础速成

1、项目搭建

npx create-react-app my-react-app(项目名)

cd 项目名进入项目目录

终端输入 npm start 启动项目

浏览器查看

项目搭建成功

2、JSX

JavaScript语法和HTML语法写在一起就是JSX语法

jsx只能返回一个根元素,即最外层的div,也可以换成空标签<></>

3、数据渲染

3.1插值

插值可以使用的位置:1、标签内容2、标签属性

javascript 复制代码
function App() {
  const divContent = "标签内容";
  const divTtitle = "标签标题";
  return <div title={divTtitle}>{divContent}</div>;
}

export default App;

3.2条件渲染

javascript 复制代码
function App() {
  const divTtitle = "标签标题";
  let divContent = null;
  const flag = false;
  if (flag) {
    divContent = <span>flag为true</span>;
  } else {
    divContent = <span>flag为false</span>;
  }
  return <div title={divTtitle}>{divContent}</div>;
}

export default App;

3.3列表渲染

列表种的key唯一值是必要的,并且不推荐使用下标为key

javascript 复制代码
function App() {
  const list = [
    { id: 1, name: "小吴" },
    { id: 2, name: "小李" },
    { id: 3, name: "小花" },
  ];
  const listContent = list.map((item) => <li key={item.id}>{item.name}</li>);

  return <ul>{listContent}</ul>;
}

export default App;

我们给每个列表数据之后加一条虚线,并且还要符合jsx中只有一个根元素的原则,我们可以使用空标签,但是空标签不能写属性,并且遍历是存在多个根元素,这种情况类似一个documentFragment的情况,我们就可以使用Fragment组件来完成

javascript 复制代码
import { Fragment } from "react";

function App() {
  const list = [
    { id: 1, name: "小吴" },
    { id: 2, name: "小李" },
    { id: 3, name: "小花" },
  ];
  const listContent = list.map((item) => (
    <Fragment>
      <li key={item.id}>{item.name}</li>
      <li>-------------------------</li>
    </Fragment>
  ));

  return <ul>{listContent}</ul>;
}

export default App;

4、事件处理

例如点击事件,react的事件大多数是驼峰命名的

javascript 复制代码
function App() {
  function handleClick(e) {
    console.log("点击了按钮", e);
  }

  return <button onClick={handleClick}>按钮</button>;
}

export default App;

5、useState状态处理

类似于vue的响应式状态机制

javascript 复制代码
import { useState } from "react";

function App() {
  const [content, setContent] = useState("标签的默认内容");
  function handleClick() {
    setContent("新内容");
  }

  return (
    <>
      <div>
        {content}
        <button onClick={handleClick}>按钮</button>
      </div>
    </>
  );
}

export default App;

5.1 对象形式的状态

javascript 复制代码
import { useState } from "react";

function App() {
  const [data, setData] = useState({
    title: "默认标题",
    content: "默认内容",
  });

  function handleClick() {
    setData({
      ...data,
      content: "新标题",
    });
  }

  return (
    <>
      <div>
        <div title={data.title}>{data.content}</div>
        <button onClick={handleClick}>按钮</button>
      </div>
    </>
  );
}

export default App;

5.2数组形式的状态

javascript 复制代码
import { useState } from "react";

function App() {
  const [data, setData] = useState([
    { id: 1, name: "小吴" },
    { id: 2, name: "小李" },
    { id: 3, name: "小花" },
  ]);
  const listData = data.map((item) => <li key={item.id}>{item.name}</li>);

  let id = 3;
  function handleClick() {
    setData([...data, { id: ++id, name: "小明" }]);
  }

  return (
    <>
      <div>
        <ul>{listData}</ul>
        <button onClick={handleClick}>按钮</button>
      </div>
    </>
  );
}

export default App;

如果显示时需要过滤某个数据可以用filter

javascript 复制代码
import { useState } from "react";

function App() {
  const [data, setData] = useState([
    { id: 1, name: "小吴" },
    { id: 2, name: "小李" },
    { id: 3, name: "小花" },
  ]);
  const listData = data.map((item) => <li key={item.id}>{item.name}</li>);

  function handleClick() {
    setData(data.filter((item) => item.id !== 2));
  }

  return (
    <>
      <div>
        <ul>{listData}</ul>
        <button onClick={handleClick}>按钮</button>
      </div>
    </>
  );
}

export default App;
相关推荐
SYKMI1 小时前
@JsonFormat时区问题
java·前端·数据库
海盐泡泡龟3 小时前
web常见的攻击方式有哪些?如何防御?
前端·vue.js·webpack
EndingCoder5 小时前
React从基础入门到高级实战:React 基础入门 - React Hooks 入门
前端·javascript·react.js·前端框架
EndingCoder5 小时前
React从基础入门到高级实战:React 基础入门 - JSX与组件基础
前端·javascript·react.js·前端框架
Space Chars5 小时前
【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
服务器·前端·http
Quke陆吾6 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
Oscar_02087 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
shmily麻瓜小菜鸡7 小时前
前端项目中实现页面看起来像是浏览器缩放到了80%的效果
前端
EndingCoder7 小时前
从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3
How_doyou_do7 小时前
Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置
前端·javascript·vue.js