实现一个react
创建 React 项目
使用 create-react-app 快速初始化项目：
npx create-react-app my-app
cd my-app
npm start组件基础结构
创建一个简单的函数组件：
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
export default Greeting;状态管理
使用 useState Hook 管理组件状态：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}生命周期与副作用
使用 useEffect 处理副作用：
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // 空依赖数组表示仅在挂载时执行
}事件处理
绑定事件处理器示例：
function Button() {
const handleClick = (event) => {
console.log('Button clicked', event);
};
return <button onClick={handleClick}>Click Me</button>;
}条件渲染
使用三元运算符进行条件渲染：
function UserGreeting(props) {
return props.isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please sign in.</h1>
);
}列表渲染
使用 map 渲染列表：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) => (
<li key={number.toString()}>{number}</li>
))}
</ul>
);
}表单处理
受控组件示例：
function NameForm() {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<form>
<input type="text" value={value} onChange={handleChange} />
</form>
);
}样式处理
内联样式示例：
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray'
};
function StyledDiv() {
return <div style={divStyle}>Styled Content</div>;
}组件通信
父子组件通信示例：
function Parent() {
const [message, setMessage] = useState('Hello from parent');
return <Child message={message} />;
}
function Child(props) {
return <p>{props.message}</p>;
}
