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

相关推荐
lypzcgf1 天前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
小浣熊喜欢揍臭臭2 天前
react+umi项目如何添加electron的功能
javascript·electron·react
叫我阿柒啊2 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
lypzcgf2 天前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
叫我阿柒啊4 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
OEC小胖胖4 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
OEC小胖胖4 天前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
lypzcgf4 天前
Coze源码分析-资源库-创建提示词-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
袋鼠云数栈前端7 天前
实现一个 AI 编辑器 - 行内代码生成篇
大数据·ai·react