本文最后更新于 2024-10-14，文章内容可能已经过时。

React 基础阶段学习计划

目标

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

学习内容

环境搭建

安装Node.js和npm

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

使用Create React App搭建项目

打开终端，输入以下命令创建一个新的React项目：
```
npx create-react-app my-app
```
进入项目目录：
```
cd my-app
```
启动开发服务器：
```
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;

实践项目

个人博客

创建项目：

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

创建组件：

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;

天气应用

创建项目：

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

安装axios：
```
npm install axios
```

创建组件：

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的编辑器或平台中，以便于查看和使用。