Kenhuang Academy
  • English

      • React Reference and Learning Resources

      Overview

      This chapter provides you with comprehensive React learning resources, including official documentation, online tutorials, development tools, community resources, and practical projects to help you master React and continuously improve your skills.

      📚 Official Resources

      React Official Documentation

      Meta Official Resources

      🎓 Online Learning Platforms

      Interactive Tutorials

      // React official tutorial example
function TicTacToe() {
    const [squares, setSquares] = useState(Array(9).fill(null));
    const [xIsNext, setXIsNext] = useState(true);
    
    const handleClick = (i) => {
        const nextSquares = squares.slice();
        nextSquares[i] = xIsNext ? 'X' : 'O';
        setSquares(nextSquares);
        setXIsNext(!xIsNext);
    };
    
    return (
        <div className="game">
            <Board squares={squares} onPlay={handleClick} />
        </div>
    );
}

      Recommended platforms:

      Free Online Courses

      📖 Recommended Books

      Beginner Level Books

      const beginnerBooks = [
    {
        title: "React 入门与实战 (React Basics and Practice)",
        author: "刘一奇 (Liu Yiqi)",
        description: "Suitable for React beginners, progressive approach",
        rating: 4.5
    },
    {
        title: "Learning React",
        author: "Alex Banks, Eve Porcello", 
        description: "English original, clear concepts",
        rating: 4.7
    },
    {
        title: "React 技术揭秘 (React Technology Revealed)",
        author: "卡颂 (Kasong)",
        description: "Deep dive into React source code implementation",
        rating: 4.8
    }
];

      Advanced Level Books

      const advancedBooks = [
    {
        title: "React 设计模式与最佳实践 (React Design Patterns and Best Practices)",
        author: "Michele Bertoli",
        description: "React development patterns and optimization techniques",
        rating: 4.6
    },
    {
        title: "深入浅出 React 和 Redux (React and Redux Deep Dive)",
        author: "程墨 (Cheng Mo)",
        description: "Complete guide to React ecosystem",
        rating: 4.7
    },
    {
        title: "React Hooks in Action",
        author: "John Larsen",
        description: "In-depth guide to Hooks practice",
        rating: 4.5
    }
];

      🛠️ Development Tools Recommendations

      IDE and Editors

      const developmentTools = [
    {
        name: "Visual Studio Code",
        type: "IDE",
        features: ["IntelliSense", "Debugging", "Rich Extensions", "Git Integration"],
        extensions: [
            "ES7+ React/Redux/React-Native snippets",
            "Auto Rename Tag",
            "Bracket Pair Colorizer",
            "Prettier",
            "ESLint"
        ]
    },
    {
        name: "WebStorm",
        type: "IDE", 
        features: ["Powerful Refactoring", "Smart Code Analysis", "Built-in Tools"],
        price: "Paid"
    },
    {
        name: "Sublime Text",
        type: "Editor",
        features: ["Lightweight", "Fast", "Plugin Support"]
    }
];

      Browser Tools

      const browserTools = {
    devTools: {
        name: "React Developer Tools",
        description: "Debug React component tree and state",
        install: "Chrome/Firefox Extension Store"
    },
    debugging: {
        techniques: [
            "Component State Inspection",
            "Props Tracking",
            "Performance Analysis",
            "Hook Debugging"
        ]
    }
};

// React DevTools usage example
function DebuggingExample() {
    const [count, setCount] = useState(0);
    const [user, setUser] = useState({ name: 'Alice' });
    
    // These states can be seen in React DevTools
    return (
        <div>
            <p>Count: {count}</p>
            <p>User: {user.name}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

      Build Tools

      # Create React App - Official scaffold
npx create-react-app my-app
cd my-app
npm start

# Vite - Fast build tool
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

# Next.js - Full-stack React framework
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

      🌐 Community Resources

      Official Community

      const reactCommunity = {
    forums: [
        {
            name: "React Official Forum",
            url: "https://github.com/facebook/react/discussions",
            description: "Official discussion area"
        },
        {
            name: "Stack Overflow",
            url: "https://stackoverflow.com/questions/tagged/reactjs",
            description: "Technical Q&A community"
        }
    ],
    social: [
        {
            platform: "Twitter",
            accounts: ["@reactjs", "@dan_abramov", "@gaearon"],
            description: "React team and core developers"
        },
        {
            platform: "Reddit",
            communities: ["r/reactjs", "r/javascript"],
            description: "React developer discussions"
        }
    ]
};

      Chinese Community

      Technical Blogs

      const techBlogs = [
    {
        name: "Dan Abramov's Blog",
        url: "https://overreacted.io/",
        description: "In-depth thoughts from React core team member"
    },
    {
        name: "React Blog",
        url: "https://react.dev/blog",
        description: "React official blog"
    },
    {
        name: "Kent C. Dodds",
        url: "https://kentcdodds.com/blog",
        description: "React teaching and best practices"
    },
    {
        name: "Robin Wieruch",
        url: "https://www.robinwieruch.de/",
        description: "React tutorials and guides"
    }
];

      🚀 Practice Project Recommendations

      Beginner Projects

      // 1. Counter application
function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>+</button>
            <button onClick={() => setCount(count - 1)}>-</button>
        </div>
    );
}

// 2. Todo application
function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState('');
    
    const addTodo = () => {
        setTodos([...todos, { 
            id: Date.now(), 
            text: input, 
            completed: false 
        }]);
        setInput('');
    };
    
    return (
        <div>
            <input 
                value={input}
                onChange={(e) => setInput(e.target.value)}
            />
            <button onClick={addTodo}>Add</button>
            {todos.map(todo => (
                <div key={todo.id}>{todo.text}</div>
            ))}
        </div>
    );
}

      Advanced Projects

      // 3. Weather application
function WeatherApp() {
    const [weather, setWeather] = useState(null);
    const [city, setCity] = useState('');
    
    const fetchWeather = async () => {
        try {
            const response = await fetch(`/api/weather?city=${city}`);
            const data = await response.json();
            setWeather(data);
        } catch (error) {
            console.error('Failed to fetch weather:', error);
        }
    };
    
    return (
        <div>
            <input 
                value={city}
                onChange={(e) => setCity(e.target.value)}
                placeholder="Enter city name"
            />
            <button onClick={fetchWeather}>Query Weather</button>
            {weather && (
                <div>
                    <h2>{weather.city}</h2>
                    <p>Temperature: {weather.temperature}°C</p>
                    <p>Weather: {weather.description}</p>
                </div>
            )}
        </div>
    );
}

// 4. E-commerce shopping cart
function ShoppingCart() {
    const [items, setItems] = useState([]);
    
    const addToCart = (product) => {
        setItems(prevItems => {
            const existingItem = prevItems.find(item => item.id === product.id);
            if (existingItem) {
                return prevItems.map(item =>
                    item.id === product.id
                        ? { ...item, quantity: item.quantity + 1 }
                        : item
                );
            }
            return [...prevItems, { ...product, quantity: 1 }];
        });
    };
    
    const total = items.reduce((sum, item) => 
        sum + item.price * item.quantity, 0
    );
    
    return (
        <div>
            <h2>Shopping Cart</h2>
            {items.map(item => (
                <div key={item.id}>
                    {item.name} x {item.quantity} = ${item.price * item.quantity}
                </div>
            ))}
            <h3>Total: ${total}</h3>
        </div>
    );
}

      📊 Learning Path Suggestions

      Beginner Path (6-8 weeks)

      const beginnerPath = [
    {
        week: 1,
        topics: ["React Basic Concepts", "JSX Syntax", "Component Creation"],
        projects: ["Hello World", "Simple Counter"],
        goals: "Understand React basic concepts"
    },
    {
        week: 2,
        topics: ["Props Passing", "Event Handling", "Conditional Rendering"],
        projects: ["User Card", "Button Component"],
        goals: "Master component communication"
    },
    {
        week: 3,
        topics: ["State Management", "useState Hook"],
        projects: ["Todo List", "Form Application"],
        goals: "Understand state management"
    },
    {
        week: 4,
        topics: ["List Rendering", "Form Handling"],
        projects: ["Contact List", "Registration Form"],
        goals: "Handle dynamic data"
    },
    {
        week: 5,
        topics: ["Lifecycle", "useEffect Hook"],
        projects: ["Data Fetching", "Timer Application"],
        goals: "Understand side effects handling"
    },
    {
        week: 6,
        topics: ["React Router", "Routing Management"],
        projects: ["Multi-page Application", "Navigation Menu"],
        goals: "Build SPA applications"
    }
];

      Advanced Path (4-6 weeks)

      const advancedPath = [
    {
        week: 1,
        topics: ["Context API", "State Lifting", "Composition Patterns"],
        projects: ["Theme Switching", "User Authentication"],
        goals: "Advanced state management"
    },
    {
        week: 2,
        topics: ["Performance Optimization", "React.memo", "useMemo"],
        projects: ["Large List Optimization", "Computed Caching"],
        goals: "Application performance optimization"
    },
    {
        week: 3,
        topics: ["Custom Hooks", "Hook Patterns"],
        projects: ["Data Fetching Hook", "Form Hook"],
        goals: "Code reuse and abstraction"
    },
    {
        week: 4,
        topics: ["Testing", "React Testing Library"],
        projects: ["Component Testing", "Integration Testing"],
        goals: "Ensure code quality"
    }
];

      🎯 Interview Preparation

      Common Interview Questions

      // 1. React lifecycle
class LifecycleExample extends Component {
    componentDidMount() {
        // Called after component mounts
        console.log('Component mounted');
    }
    
    componentDidUpdate(prevProps, prevState) {
        // Called after component updates
        console.log('Component updated');
    }
    
    componentWillUnmount() {
        // Called before component unmounts
        console.log('Component about to unmount');
    }
    
    render() {
        return <div>Lifecycle Example</div>;
    }
}

// 2. Hook equivalent implementation
function HookExample() {
    useEffect(() => {
        // componentDidMount
        console.log('Component mounted');
        
        return () => {
            // componentWillUnmount
            console.log('Component about to unmount');
        };
    }, []);
    
    useEffect(() => {
        // componentDidUpdate
        console.log('Component updated');
    });
    
    return <div>Hook Example</div>;
}

// 3. State update principle
function StateUpdateExample() {
    const [count, setCount] = useState(0);
    
    const handleClick = () => {
        // What will this print?
        console.log('Before click:', count);
        setCount(count + 1);
        console.log('After click:', count); // Still old value
        
        // Correct way
        setCount(prevCount => {
            console.log('Updating:', prevCount);
            return prevCount + 1;
        });
    };
    
    return <button onClick={handleClick}>{count}</button>;
}

      Coding Challenges

      // Implement a useLocalStorage Hook
function useLocalStorage(key, initialValue) {
    const [value, setValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            return initialValue;
        }
    });
    
    const setStoredValue = (newValue) => {
        try {
            setValue(newValue);
            window.localStorage.setItem(key, JSON.stringify(newValue));
        } catch (error) {
            console.error('Failed to save to localStorage:', error);
        }
    };
    
    return [value, setStoredValue];
}

// Usage example
function App() {
    const [name, setName] = useLocalStorage('name', '');
    
    return (
        <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter name"
        />
    );
}

      📈 Continuous Learning Suggestions

      const techNewsTracker = {
    sources: [
        "React Official Blog",
        "GitHub React Repository",
        "React Weekly Newsletter",
        "Frontend Developer Community"
    ],
    
    subscribeToUpdates() {
        // Subscribe to React-related updates
        return [
            "Follow @reactjs on Twitter",
            "Subscribe to React Newsletter",
            "Join React Developer Groups",
            "Attend React Conferences and Events"
        ];
    }
};

      Contributing to Open Source

      const openSourceContribution = {
    levels: {
        beginner: [
            "Fix documentation errors",
            "Add example code",
            "Translate documentation",
            "Report bugs"
        ],
        intermediate: [
            "Fix simple bugs",
            "Add test cases",
            "Improve performance",
            "Add new features"
        ],
        advanced: [
            "Core feature development",
            "Architecture design",
            "Performance optimization",
            "Technical sharing"
        ]
    }
};

      📝 Summary

      React has abundant learning resources and active community support. By reasonably utilizing these resources and combining them with practical project practice, you will be able to:

      1. Master Core Skills: Complete skill system from basics to advanced
      2. Keep Up with Technology Development: Stay informed about latest features and best practices
      3. Participate in Community Contributions: Improve skills and influence through open source contributions
      4. Career Development: Build a solid foundation for frontend development career

      Learning Suggestions

      • 📚 Combine Theory and Practice: Learn while doing, apply in time
      • 🔄 Continuous Practice: Write code regularly to maintain skills
      • 🤝 Community Participation: Actively participate in discussions, share experience
      • 🎯 Project-Driven: Apply knowledge through actual projects
      • 🚀 Stay Updated: Follow React ecosystem development

      Learning React is a continuous process. We hope these resources will help you keep moving forward on your React development journey!

      Return to Tutorial Index: React Tutorial Index