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 (
        

            Hello World!
            
{'This is Javascript message~!'}
            
{count}
            
{getSelfName()}
            
{new Date().getDate()}
            {color: "red"}}This red 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 (
        

            

                {data.map(user => (
                    user.id}
                        
ID: {user.id}
                        
Name: {user.name}
                        
Sex: {user.sex}
                        
Phone: {user.phone}
                    
                ))}
            
    );
}
export default App;

根据条件渲染对应界面

function App() {
    const loggedIn = true;
    return (
        

            

                {loggedIn ? (
                    
Welcome User!
                ) : (
                    () = alert('log in')}>Log In
                )}
            
            

                {loggedIn && 
Welcome User h2
}
            
        
    );
}

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

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

            {renderComponent()}
        
    );
}
export default App;

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

1. 基本用法：

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

2. 传递参数：

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

3. 使用箭头函数：

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

4. 使用Hooks：

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

5. 使用函数组件：

import React from 'react';
const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };
  return (
    handleClick}Click me
  );
};
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 (
      Click me
    );
  }
}
export default MyComponent;

7. 阻止默认行为：

import React from 'react';
class MyComponent extends React.Component {
  handleClick(event) {
    event.preventDefault();
    console.log('Default behavior prevented!');
  }
  render() {
    return (
      Click me
    );
  }
}
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 (
      (event) = this.handleClick(event, customParam)}>Click me
    );
  }
}
export default MyComponent;