React 基础阶段学习计划
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><inputtype="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的编辑器或平台中,以便于查看和使用。
相关文章:
React 基础阶段学习计划
React 基础阶段学习计划 目标 能够创建和使用React组件。理解并使用State和Props。掌握事件处理和表单处理。 学习内容 环境搭建 安装Node.js和npm 访问 Node.js官网 下载并安装最新版本的Node.js。打开终端或命令行工具,输入 node -v 和 npm -v 检查是否安装…...
FFmpeg的简单使用【Windows】--- 指定视频的时长
目录 功能描述 效果展示 代码实现 前端代码 后端代码 routers 》users.js routers 》 index.js app.js 功能描述 此案例是在上一个案例【FFmpeg的简单使用【Windows】--- 视频混剪添加背景音乐-CSDN博客】的基础上的进一步完善,可以先去看上一个案例然后再…...
请求参数中字符串的+变成了空格
前端请求 后端接收到的结果 在URL中,某些字符(包括空格、、&、? 等)需要被编码。具体而言,在URL中,空格通常被编码为 或 %20。因此,如果你在请求参数中使用 ,它会被解释为一个空格。 如果…...
前端开发攻略---使用AJAX监控网络请求进度
1、XHR实现 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title></head&…...
[已解决]DockerTarBuilder永久解决镜像docker拉取异常问题
前阵子发现阿里云的docker加速镜像失效了(甚至连nginx都拉取不了),重新换了并且加多了网络上比较常用的dokcer加速源,可以解决一部分问题,但仍然有一些镜像的某个版本或一些比较冷的镜像就是拉取不了,原因未…...
机器学习实战27-基于双向长短期记忆网络 BiLSTM 的黄金价格模型研究
大家好,我是微学AI,今天给大家介绍一下机器学习实战27-基于双向长短期记忆网络 BiLSTM 的黄金价格模型研究。本文针对黄金价格预测问题,展开基于改造后的长短期记忆网络BiLSTM的黄金价格模型研究。文章首先介绍了项目背景,随后详细…...
阿拉伯应用市场的特点
阿拉伯应用程序市场是一个充满活力和快速增长的行业,由年轻、精通技术的人口、高智能手机渗透率和整个地区数字化程度的提高所塑造。作为世界上最大的消费群体之一,阿拉伯语受众为希望扩大影响力的开发商和品牌提供了巨大的潜力。 文化相关性在应用程序…...
音频响度归一化 - python 实现
在处理音频样本时,往往我们的音频样本由于录制设备,环境,人发音的音量大小的不同影响,会造成音频响度不统一,分布在一个不同的响度值域上。为了让语音模型更好的学习音频特征,就有必要对音频的响度进行归一…...
嵌入式硬件设计详解
嵌入式硬件设计详解 嵌入式硬件设计是一个复杂而精细的过程,它涉及将微控制器(MCU)、微处理器(MPU)或数字信号处理器(DSP)等核心芯片与其他外围电子元件(如传感器、执行器、存储器、…...
Linux防火墙与SElinux
文章目录 一、防火墙介绍二、iptables和firewalld的区别操作方式:配置层面:性能和管理: 三、iptables与firewalld的优缺点iptablesfirewalld 四、iptables的工作流程五、firewalld的工作流程六、iptables安装与使用6.1、关闭firewalld服务6.2…...
【MySQL】基本查询(上):创建、读取
1.Create(创建) 语法: INSERT [INTO] table_name [(column [, column] ...)] VALUES (value_list) [, (value_list)] ...value_list: value, [, value] ... 接下来我们用这个下表作为例子: -- 创建一张学生表 CREATE TABLE students ( id INT UNSIGN…...
在线刷题系统测试报告
一、项目背景 1. 本项目是一个在线刷题系统,灵感来源于力扣和牛客等刷题平台,旨在锻炼自己的代码能力和剖析系统整体结构与各模块之间关系的能力。系统支持用户注册与登录,查看题目列表与题目详情,在线提交代码并提供反馈。 2. 该…...
即时通讯增加Redis渠道
情况说明 在本地和服务器分别启动im服务,当本地发送消息时,会发现服务器上并没有收到消息 初版im只支持单机版,不支持分布式的情况。此次针对该情况对项目进行优化,文档中贴出的代码非完整代码,可自行查看参考资料[2] 代码结构调…...
C++list
list简介 list是我们的链表,而且是带头双向循环链表,如下图 我们都知道,链表是由一个一个的节点组成的,它的成员由下面几个部分组成 通过对前面string,vector的学习,其实再来看我们的链表及其成员函数,是…...
设计模式 - 结构型
结构型 适配器模式,代理模式,桥接模式,装饰器模式,外观模式,组合模式,享元模式, 单一职责避免子类爆炸Bridge 模式对象的实现Decorator 模式对对象的职责,不生成子类接口隔离Adapt…...
STM32编码器接口
一、概述 1、Encoder Interface 编码器接口概念 编码器接口可接收增量(正交)编码器的信号,根据编码器旋转产生的正交信号脉冲,自动控制CNT自增或自减,从而指示编码器的位置、旋转方向和旋转速度每个高级定时器和通用…...
2024客户世界年度大会开幕,码号卫士赋能数字运营服务新升级
10月15日,2024年客户世界年度的大会在通州北投希尔顿酒店开幕。作为行业内的一个重要活动,本次大会以“数字运营支撑服务产业新升级”为主题,吸引了众多行业专家和企业代表。 据悉,本次大会以“数字运营支撑服务产业新升级”为主题…...
AcWing 802. 区间和(离散化算法,python)
本篇博客详细讲解一下离散化知识点,通过讲解和详细列题带大家掌握离散化。 题目: 原题链接:https://www.acwing.com/problem/content/description/804/ 假定有一个无限长的数轴,数轴上每个坐标上的数都是 0。 现在,…...
【网页设计】CSS 盒子模型
目标 能够准确阐述盒子模型的 4 个组成部分能够利用边框复合写法给元素添加边框能够计算盒子的实际大小能够利用盒子模型布局模块案例能够给盒子设置圆角边框能够给盒子添加阴影能够给文字添加阴影 1. 盒子模型 页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模…...
如何通过构建对应的api服务器使Vue连接到数据库
一、安装数据库驱动 在后端安装 MySQL 数据库驱动,比如在 Node.js 环境中可以使用 mysql2 包来连接 MySQL 数据库。在项目目录下运行以下命令安装: npm install mysql2或者使用 yarn: yarn add mysql2二、创建数据库连接模块 创建一个专门…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
