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