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;