如何编写react
编写 React 的基本步骤
安装 Node.js 和 npm
确保系统已安装 Node.js（包含 npm）。可通过官网下载并安装最新版本。
创建 React 项目
使用 create-react-app 快速搭建项目结构：
npx create-react-app my-app
cd my-app
npm start组件开发
函数组件示例
创建一个简单的函数组件并导出：
import React from 'react';
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
export default Welcome;类组件示例
通过 class 定义具有状态的组件：
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}状态管理
使用 useState Hook
在函数组件中管理局部状态：
import React, { useState } from 'react';
function Toggle() {
const [isOn, setIsOn] = useState(false);
return (
<button onClick={() => setIsOn(!isOn)}>
{isOn ? 'ON' : 'OFF'}
</button>
);
}生命周期与副作用
useEffect 示例
处理组件挂载、更新和卸载时的逻辑：
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <div>Seconds: {seconds}</div>;
}路由配置
安装 React Router
通过 react-router-dom 实现页面导航：
npm install react-router-dom基本路由设置
在应用中定义路由路径：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}样式处理
CSS Modules
使用模块化 CSS 避免命名冲突：
import styles from './Button.module.css';
function Button() {
return <button className={styles.error}>Delete</button>;
}内联样式
通过 JavaScript 对象定义样式：
const style = {
color: 'white',
backgroundColor: 'blue'
};
function StyledDiv() {
return <div style={style}>Styled Content</div>;
}组件通信
父子组件传递数据
通过 props 向下传递数据：
function Parent() {
const data = "Hello from parent";
return <Child message={data} />;
}
function Child(props) {
return <p>{props.message}</p>;
}子组件调用父组件方法
通过回调函数实现反向通信：
function Parent() {
const handleClick = () => console.log('Child clicked');
return <Child onClick={handleClick} />;
}
function Child(props) {
return <button onClick={props.onClick}>Click Me</button>;
}
