React 组件化开发实战：官方中文教程零基础入门攻略

npx create-react-app my-react-app
cd my-react-app
npm start

import React from 'react';

function Button({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    button>
  );
}

export default Button;

import React, { useState } from 'react';
import Button from './components/Button';

function App() {
  const [count, setCount] = useState();

  const handleClick = () => {
    setCount(count + );
  };

  return (
    <div className="App">
      <h1>计数器：{count}h1>
      <Button text="点击我" onClick={handleClick} />
    div>
  );
}

export default App;

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count +  };
    case 'decrement':
      return { count: state.count -  };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count:  });

  return (
    <div>
      <p>Count: {state.count}p>
      <button onClick={() => dispatch({ type: 'increment' })}>+button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-button>
    div>
  );
}

export default Counter;

import React, { useState, useEffect } from 'react';

function DataFetch() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div>
      {data ? <p>{data}p> : <p>加载中...p>}
    div>
  );
}

export default DataFetch;

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>哎呀，出错了！h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

import React, { useState } from 'react';

function TodoForm({ onAdd }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim()) {
      onAdd(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="输入待办事项"
      />
      <button type="submit">添加button>
    form>
  );
}

export default TodoForm;

import React from 'react';

function TodoItem({ todo, onDelete, onToggle }) {
  return (
    <li>
      <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
        {todo.text}
      span>
      <button onClick={() => onToggle(todo.id)}>切换状态button>
      <button onClick={() => onDelete(todo.id)}>删除button>
    li>
  );
}

export default TodoItem;

import React, { useState } from 'react';
import TodoForm from './TodoForm';
import TodoItem from './TodoItem';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  return (
    <div>
      <h1>TodoListh1>
      <TodoForm onAdd={addTodo} />
      <ul>
        {todos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={deleteTodo}
            onToggle={toggleTodo}
          />
        ))}
      ul>
    div>
  );
}

export default TodoList;