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构建的网站时，将看到Components和Profiler面板

修改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