React的基础用法-创建组件、渲染组件、处理状态和事件
创建组件
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
渲染组件
import React from 'react';
import ReactDOM from 'react-dom';
const element = <Greeting name="John" />;
ReactDOM.render(element, document.getElementById('root'));
Props(属性)
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
const element = <Greeting name="John" />;
State(状态)
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>
);
}
事件处理
function Button() {
function handleClick() {
alert('Button clicked!');
}
return <button onClick={handleClick}>Click me</button>;
}