React18快速入门

需要先安装并配置React相关的工具和插件

下载安装Node.js,这里以MacOS Node.js v22.6.0为例
终端命令行检查是否安装成功

复制代码
node -v
npm -v

Node.js快速入门

npm设置镜像源

复制代码
#设置为阿里镜像源
npm config set registry https://registry.npmmirror.com
#查看是否生效
npm get registry 

下载并安装WebStorm

使用WebStorm创建React项目,这里命名为my-react-app



打开package.json文件查看如何运行该项目

接着在命令行中运行react-scripts start


接着打开src/index.js文件,可以看到页面内容部分主要是通过加载App.js文件完成的。

1.数据渲染

修改src/App.js文件

复制代码
//数据渲染事例1
function App() {
  const divContent = '标签内容'
  const divTitle = '标签标题'
  return (
    <div title={divTitle}>
      {divContent}
    </div>
  );
}

export default App;

刷新浏览器可以看到新的修改页面

安装React Developer Tools插件后,当访问基于React构建的网站时,将看到ComponentsProfiler面板

修改src/App.js文件

复制代码
//数据渲染事例2
import {Fragment} from 'react'
function App() {
  const list = [
    {id:1,name:'Tom'},
    {id:2,name:'Jack'},
    {id:3,name:'Brown'},
  ]
  const listContent = list.map((item) => {
    return (
        <li key={item.id}>{item.name}</li>
    )
  })
  return (
    <Fragment>
      <ul>{listContent}</ul>
    </Fragment>
  );
}

export default App;

2.事件处理

修改src/App.js文件

复制代码
function App() {
  function handleClick() {
    alert('点击了按钮!');
  }
  return (
      <button onClick={handleClick}>
        按钮
      </button>
  );
}

export default App;

3.状态处理

修改src/App.js文件

复制代码
function App() {
    let divContent = '默认内容'
    function handleClick() {
    divContent = '新内容'
  }
  return (
      <div>
          <p>{divContent}</p>
          <button onClick={handleClick}>
            按钮
          </button>
      </div>
  );
}

export default App;

点击按钮,我们发现页面中的divContent没有发生变化,为了实现这种变化需要引入useState

修改src/App.js文件

复制代码
import { useState } from 'react';

function App() {

    const [data,setData] = useState({
        title:'默认标题',
        content:'默认内容'
    })
    function handleClick() {
        setData({
            ...data,//展开运算符把上面data的属性展开放到这里来
            content:'新内容'//只对content做修改
        })
  }
  return (
      <div>
          <div title={data.title}>{data.content}</div>
          <button onClick={handleClick}>
            按钮
          </button>
      </div>
  );
}

export default App;

4.组件间通讯

修改src/App.js文件

复制代码
function Article({title,detailData}){
    return (
        <div>
            <h2>{title}</h2>
            <Detail {...detailData} />
        </div>
    )
}

function Detail({content,active}){
    return (
        <div>
            <p>{content}</p>
            <p>{active ? '激活' : '未激活'}</p>
        </div>
    )
}

function App() {

    const articleData = {
        title:'标题1',
        detailData: {
            content:'内容1',
            active:true,
        }
    }

    return (
        <Article {...articleData} />
    );
}

export default App;

5.各种React Hooks

相关推荐
Python私教2 天前
FastAPI+React19 ERP系统实战 第01期
react·fastapi
一笑code3 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
ZHOU_WUYI15 天前
GitHub OAuth 认证示例
flask·github·react
SuperherRo16 天前
Web攻防-XSS跨站&浏览器UXSS&突变MXSS&Vue&React&Electron框架&JQuery库&写法和版本
vue.js·electron·jquery·react·xss·mxss·uxss
飞鸟malred17 天前
nextjs入门
前端·react·nextjs
aiguangyuan22 天前
React 动态路由的使用和实现原理
react·前端开发
aiguangyuan22 天前
手写简版React-router
react·前端开发
aiguangyuan22 天前
React-router实现原理剖析
react·前端开发
aiguangyuan23 天前
React 19 新特性
react·前端开发
亦世凡华、23 天前
React--》使用vite构建器打造高效的React组件库
经验分享·react·组件库·组件库开发