IT评测·应用市场-qidao123.com技术社区

标题: React 基础阶段学习计划 [打印本页]

---

作者: 金歌    时间: 2024-10-19 22:41
标题: React 基础阶段学习计划
React 基础阶段学习计划

目的

• 可以或许创建和利用React组件。
  
• 理解并利用State和Props。
  
• 掌握事件处理惩罚和表单处理惩罚。
  

学习内容

情况搭建

安装Node.js和npm

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

利用Create React App搭建项目

• 打开终端，输入以下命令创建一个新的React项目：
  1. npx create-react-app my-app

  复制代码
• 进入项目目录：
  1. cd my-app

  复制代码
• 启动开辟服务器：
  1. npm start

  复制代码

核心概念

JSX语法

• JSX是一种JavaScript的语法扩展，允许你在JavaScript中编写类似HTML的元素。
  
• 示例：
  1. import React from 'react';
  3. function HelloWorld() {
  4.   return <h1>Hello, World!</h1>;
  5. }
  7. export default HelloWorld;

  复制代码

组件

• 函数组件：简朴的组件，通常用于展示数据。
  1. import React from 'react';
  3. function Greeting(props) {
  4.   return <h1>Hello, {props.name}!</h1>;
  5. }
  7. export default Greeting;

  复制代码
• 类组件：功能更强大的组件，可以管理状态。
  1. import React, { Component } from 'react';
  3. class Counter extends Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = { count: 0 };
  7.   }
  9.   increment = () => {
  10.     this.setState({ count: this.state.count + 1 });
  11.   }
  13.   render() {
  14.     return (
  15.       <div>
  16.         <p>Count: {this.state.count}</p>
  17.         <button onClick={this.increment}>Increment</button>
  18.       </div>
  19.     );
  20.   }
  21. }
  23. export default Counter;

  复制代码

State和Props

• State：组件内部的状态，可以通过this.setState方法更新。
  
• Props：父组件传递给子组件的属性。
  1. import React from 'react';
  3. // 子组件
  4. function ChildComponent(props) {
  5.   return <p>{props.message}</p>;
  6. }
  8. // 父组件
  9. class ParentComponent extends React.Component {
  10.   constructor(props) {
  11.     super(props);
  12.     this.state = { message: 'Hello from Parent' };
  13.   }
  15.   render() {
  16.     return <ChildComponent message={this.state.message} />;
  17.   }
  18. }
  20. export default ParentComponent;

  复制代码

事件处理惩罚

• 在React中，事件处理惩罚函数通常绑定到组件的方法上。
  1. import React, { Component } from 'react';
  3. class EventHandling extends Component {
  4.   handleClick = () => {
  5.     alert('Button clicked!');
  6.   }
  8.   render() {
  9.     return (
  10.       <button onClick={this.handleClick}>
  11.         Click me
  12.       </button>
  13.     );
  14.   }
  15. }
  17. export default EventHandling;

  复制代码

表单处理惩罚

• React中的表单元素默认是受控组件，即它们的值由React组件的状态控制。
  1. import React, { Component } from 'react';
  3. class FormExample extends Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = { name: '' };
  8.     this.handleChange = this.handleChange.bind(this);
  9.     this.handleSubmit = this.handleSubmit.bind(this);
  10.   }
  12.   handleChange(event) {
  13.     this.setState({ name: event.target.value });
  14.   }
  16.   handleSubmit(event) {
  17.     alert('A name was submitted: ' + this.state.name);
  18.     event.preventDefault();
  19.   }
  21.   render() {
  22.     return (
  23.       <form onSubmit={this.handleSubmit}>
  24.         <label>
  25.           Name:
  26.           <input type="text" value={this.state.name} onChange={this.handleChange} />
  27.         </label>
  28.         <button type="submit">Submit</button>
  29.       </form>
  30.     );
  31.   }
  32. }
  34. export default FormExample;

  复制代码

组件生命周期

• 生命周期方法：组件在不同阶段会触发不同的生命周期方法。
  
  
  
  • componentDidMount：组件挂载后调用。
    
  • componentDidUpdate：组件更新后调用。
    
  • componentWillUnmount：组件卸载前调用。
    
  1. import React, { Component } from 'react';
  3. class LifecycleExample extends Component {
  4.   componentDidMount() {
  5.     console.log('Component did mount');
  6.   }
  8.   componentDidUpdate(prevProps, prevState) {
  9.     console.log('Component did update');
  10.   }
  12.   componentWillUnmount() {
  13.     console.log('Component will unmount');
  14.   }
  16.   render() {
  17.     return <div>Lifecycle Example</div>;
  18.   }
  19. }
  21. export default LifecycleExample;

  复制代码
  
  

实践项目

个人博客

• 创建项目：
  1. npx create-react-app personal-blog
  2. cd personal-blog
  3. npm start

  复制代码
• 创建组件：
  
  
  
  • Header.js：头部组件
    1. import React from 'react';
    3. function Header() {
    4.   return <header><h1>My Personal Blog</h1></header>;
    5. }
    7. export default Header;

    复制代码
  • PostList.js：文章列表组件
    1. import React from 'react';
    3. const posts = [
    4.   { id: 1, title: 'First Post', content: 'This is the first post.' },
    5.   { id: 2, title: 'Second Post', content: 'This is the second post.' },
    6. ];
    8. function PostList() {
    9.   return (
    10.     <div>
    11.       {posts.map(post => (
    12.         <div key={post.id}>
    13.           <h2>{post.title}</h2>
    14.           <p>{post.content}</p>
    15.         </div>
    16.       ))}
    17.     </div>
    18.   );
    19. }
    21. export default PostList;

    复制代码
  • App.js：主组件
    1. import React from 'react';
    2. import Header from './Header';
    3. import PostList from './PostList';
    5. function App() {
    6.   return (
    7.     <div className="App">
    8.       <Header />
    9.       <PostList />
    10.     </div>
    11.   );
    12. }
    14. export default App;

    复制代码
  
  

气候应用

• 创建项目：
  1. npx create-react-app weather-app
  2. cd weather-app
  3. npm start

  复制代码
• 安装axios：
  1. npm install axios

  复制代码
• 创建组件：
  
  
  
  • Weather.js：气候组件
    1. import React, { useState, useEffect } from 'react';
    2. import axios from 'axios';
    4. function Weather() {
    5.   const [weather, setWeather] = useState(null);
    6.   const [city, setCity] = useState('');
    8.   useEffect(() => {
    9.     if (city) {
    10.       axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)
    11.         .then(response => {
    12.           setWeather(response.data);
    13.         })
    14.         .catch(error => {
    15.           console.error('Error fetching weather data:', error);
    16.         });
    17.     }
    18.   }, [city]);
    20.   return (
    21.     <div>
    22.       <h1>Weather App</h1>
    23.       <input
    24.         type="text"
    25.         placeholder="Enter city name"
    26.         value={city}
    27.         onChange={(e) => setCity(e.target.value)}
    28.       />
    29.       {weather && (
    30.         <div>
    31.           <p>Temperature: {weather.main.temp} K</p>
    32.           <p>Weather: {weather.weather[0].description}</p>
    33.         </div>
    34.       )}
    35.     </div>
    36.   );
    37. }
    39. export default Weather;

    复制代码
  • App.js：主组件
    1. import React from 'react';
    2. import Weather from './Weather';
    4. function App() {
    5.   return (
    6.     <div className="App">
    7.       <Weather />
    8.     </div>
    9.   );
    10. }
    12. export default App;

    复制代码
  
  

建议

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

希望这个学习计划可以或许资助你系统地学习React基础，并通过实践项目巩固所学知识。祝你学习顺遂！

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4