01 React新建开发环境

https://create-react-app.dev/docs/getting-started

npx create-react-app my-app

JSX使用表达式嵌入

function App() {const count = 100;function getSelfName() {return "SelfName"}return (<div>Hello World!<div>{'This is Javascript message~!'}</div><div>{count}</div><div>{getSelfName()}</div><div>{new Date().getDate()}</div><div style={{color: "red"}}>This red Div</div></div>);
}export default App;

实现列表渲染

import React from 'react';const data = [{id: 1, name: 'Alice', sex: 'Female', phone: '123-456-7890'},{id: 2, name: 'Bob', sex: 'Male', phone: '987-654-3210'},{id: 3, name: 'Charlie', sex: 'Male', phone: '555-123-4567'}
];function App() {return (<div><ul>{data.map(user => (<li key={user.id}><div>ID: {user.id}</div><div>Name: {user.name}</div><div>Sex: {user.sex}</div><div>Phone: {user.phone}</div></li>))}</ul></div>);
}export default App;

根据条件渲染对应界面

function App() {const loggedIn = true;return (<div><div>{loggedIn ? (<h1>Welcome User!</h1>) : (<button onClick={() => alert('log in')}>Log In</button>)}</div><div>{loggedIn && <h2>Welcome User h2</h2>}</div></div>);
}

使用函数渲染复杂对应界面

import React from 'react';function ComponentA() {return <h1>This is Component A</h1>;
}function ComponentB() {return <h1>This is Component B</h1>;
}function App() {const condition = true; // 设置条件，可以根据需要修改const renderComponent = () => {if (condition) {return <ComponentA />;} else {return <ComponentB />;}};return (<div>{renderComponent()}</div>);
}export default App;

当在React中为按钮添加事件时，你可以使用onClick属性来指定一个函数，在按钮被点击时触发该函数。以下是一些使用React为按钮添加事件的常见示例：

1. 基本用法：

import React from 'react';class MyComponent extends React.Component {handleClick() {console.log('Button clicked!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;

2. 传递参数：

import React from 'react';class MyComponent extends React.Component {handleClick(param) {console.log('Button clicked with param:', param);}render() {return (<button onClick={() => this.handleClick('Hello')}>Click me</button>);}
}export default MyComponent;

3. 使用箭头函数：

import React from 'react';class MyComponent extends React.Component {handleClick = () => {console.log('Button clicked!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;

4. 使用Hooks：

import React, { useCallback } from 'react';const MyComponent = () => {const handleClick = useCallback(() => {console.log('Button clicked!');}, []);return (<button onClick={handleClick}>Click me</button>);
};export default MyComponent;

5. 使用函数组件：

import React from 'react';const MyComponent = () => {const handleClick = () => {console.log('Button clicked!');};return (<button onClick={handleClick}>Click me</button>);
};export default MyComponent;

6. 事件对象：

import React from 'react';class MyComponent extends React.Component {handleClick(event) {console.log('Button clicked!');console.log('Event object:', event);}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;

7. 阻止默认行为：

import React from 'react';class MyComponent extends React.Component {handleClick(event) {event.preventDefault();console.log('Default behavior prevented!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;

8. 事件对象和自定义参数：

import React from 'react';class MyComponent extends React.Component {handleClick = (event, customParam) => {event.preventDefault(); // 阻止默认行为console.log('Button clicked!');console.log('Custom parameter:', customParam);console.log('Event object:', event);}render() {const customParam = 'Hello'; // 自定义参数return (<button onClick={(event) => this.handleClick(event, customParam)}>Click me</button>);}
}export default MyComponent;