React 基础阶段学习计划

React 基础阶段学习计划

目标

• 能够创建和使用React组件。
• 理解并使用State和Props。
• 掌握事件处理和表单处理。

学习内容

环境搭建

安装Node.js和npm

1. 访问 Node.js官网 下载并安装最新版本的Node.js。
2. 打开终端或命令行工具，输入 node -v 和 npm -v 检查是否安装成功。

使用Create React App搭建项目

1. 打开终端，输入以下命令创建一个新的React项目：

   npx create-react-app my-app
   

2. 进入项目目录：

   cd my-app
   

3. 启动开发服务器：

   npm start
   

核心概念

JSX语法

• JSX是一种JavaScript的语法扩展，允许你在JavaScript中编写类似HTML的元素。
• 示例：

  import React from 'react';
  
  function HelloWorld() {
    return <h1>Hello, World!</h1>;
  }
  
  export default HelloWorld;
  

组件

• 函数组件：简单的组件，通常用于展示数据。

  import React from 'react';
  
  function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
  }
  
  export default Greeting;
  

• 类组件：功能更强大的组件，可以管理状态。

  import React, { Component } from 'react';
  
  class Counter extends Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }
  
    increment = () => {
      this.setState({ count: this.state.count + 1 });
    }
  
    render() {
      return (
        <div>
          <p>Count: {this.state.count}</p>
          <button onClick={this.increment}>Increment</button>
        </div>
      );
    }
  }
  
  export default Counter;
  

State和Props

• State：组件内部的状态，可以通过this.setState方法更新。
• Props：父组件传递给子组件的属性。

  import React from 'react';
  
  // 子组件
  function ChildComponent(props) {
    return <p>{props.message}</p>;
  }
  
  // 父组件
  class ParentComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { message: 'Hello from Parent' };
    }
  
    render() {
      return <ChildComponent message={this.state.message} />;
    }
  }
  
  export default ParentComponent;
  

事件处理

• 在React中，事件处理函数通常绑定到组件的方法上。

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

表单处理

• React中的表单元素默认是受控组件，即它们的值由React组件的状态控制。

  import React, { Component } from 'react';
  
  class FormExample extends Component {
    constructor(props) {
      super(props);
      this.state = { name: '' };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({ name: event.target.value });
    }
  
    handleSubmit(event) {
      alert('A name was submitted: ' + this.state.name);
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input type="text" value={this.state.name} onChange={this.handleChange} />
          </label>
          <button type="submit">Submit</button>
        </form>
      );
    }
  }
  
  export default FormExample;
  

组件生命周期

• 生命周期方法：组件在不同阶段会触发不同的生命周期方法。
  • componentDidMount：组件挂载后调用。
  • componentDidUpdate：组件更新后调用。
  • componentWillUnmount：组件卸载前调用。

  import React, { Component } from 'react';
  
  class LifecycleExample extends Component {
    componentDidMount() {
      console.log('Component did mount');
    }
  
    componentDidUpdate(prevProps, prevState) {
      console.log('Component did update');
    }
  
    componentWillUnmount() {
      console.log('Component will unmount');
    }
  
    render() {
      return <div>Lifecycle Example</div>;
    }
  }
  
  export default LifecycleExample;
  

实践项目

个人博客

1. 创建项目：

   npx create-react-app personal-blog
   cd personal-blog
   npm start
   

2. 创建组件：
   • Header.js：头部组件

     import React from 'react';
     
     function Header() {
       return <header><h1>My Personal Blog</h1></header>;
     }
     
     export default Header;
     

   • PostList.js：文章列表组件

     import React from 'react';
     
     const posts = [
       { id: 1, title: 'First Post', content: 'This is the first post.' },
       { id: 2, title: 'Second Post', content: 'This is the second post.' },
     ];
     
     function PostList() {
       return (
         <div>
           {posts.map(post => (
             <div key={post.id}>
               <h2>{post.title}</h2>
               <p>{post.content}</p>
             </div>
           ))}
         </div>
       );
     }
     
     export default PostList;
     

   • App.js：主组件

     import React from 'react';
     import Header from './Header';
     import PostList from './PostList';
     
     function App() {
       return (
         <div className="App">
           <Header />
           <PostList />
         </div>
       );
     }
     
     export default App;
     

天气应用

1. 创建项目：

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

2. 安装axios：

   npm install axios
   

3. 创建组件：
   • Weather.js：天气组件

     import React, { useState, useEffect } from 'react';
     import axios from 'axios';
     
     function Weather() {
       const [weather, setWeather] = useState(null);
       const [city, setCity] = useState('');
     
       useEffect(() => {
         if (city) {
           axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)
             .then(response => {
               setWeather(response.data);
             })
             .catch(error => {
               console.error('Error fetching weather data:', error);
             });
         }
       }, [city]);
     
       return (
         <div>
           <h1>Weather App</h1>
           <input
             type="text"
             placeholder="Enter city name"
             value={city}
             onChange={(e) => setCity(e.target.value)}
           />
           {weather && (
             <div>
               <p>Temperature: {weather.main.temp} K</p>
               <p>Weather: {weather.weather[0].description}</p>
             </div>
           )}
         </div>
       );
     }
     
     export default Weather;
     

   • App.js：主组件

     import React from 'react';
     import Weather from './Weather';
     
     function App() {
       return (
         <div className="App">
           <Weather />
         </div>
       );
     }
     
     export default App;
     

建议

• 定期回顾：每周花时间回顾本周所学内容，确保知识点牢固掌握。
• 参与社区：加入React相关的论坛、Slack群组或Discord服务器，与其他开发者交流心得。
• 阅读源码：尝试阅读一些简单的React库的源码，提高代码理解和分析能力。

希望这个学习计划能够帮助你系统地学习React基础，并通过实践项目巩固所学知识。祝你学习顺利！

你可以将上述Markdown内容复制到任何支持Markdown的编辑器或平台中，以便于查看和使用。