用 React 编写一个笔记应用程序
这篇文章会教大家用 React 编写一个笔记应用程序。用户可以创建、编辑、和切换 Markdown 笔记。
1. nanoid
nanoid 是一个轻量级和安全的唯一字符串ID生成器,常用于JavaScript环境中生成随机、唯一的字符串ID,如数据库主键、会话ID、文件名等场景。
2. React-split
react-split 是一个 React 组件库,它提供了一个简单易用的界面来分割面板,允许用户通过拖动来调整面板的大小。这个库非常适合需要在界面上展示可调整大小的多个区域的场景,比如编辑器、IDE、仪表板等。
import Split from "react-split";<Split><div>Panel 1</div><div>Panel 2</div>
</Split>
3. react-mde
react-mde 是一个用于 React 的 Markdown 编辑器组件,它基于 Draft.js 构建,提供了一个功能强大且可扩展的界面,允许用户以 Markdown 语法或可视化方式编辑文本。
npm install react-mde --legacy-peer-deps
4. showdown
Showdown 是一个 JavaScript 库,用于将 Markdown 文本转换为 HTML。它是一个广泛使用的库,因为它兼容性好、速度快,且易于集成和使用。
5. App.jsx
这是一个用 React 编写的笔记应用程序的主组件 App。用户可以创建、编辑、和切换 Markdown 笔记。它使用了以下功能与库:
- React:实现状态管理和组件化。
- nanoid:生成唯一的 ID,用于每个笔记。
- react-split:实现分屏布局(侧边栏和编辑器)。
- 自定义组件:
– Sidebar:显示笔记列表和用于切换当前笔记。
– Editor:用于编辑当前笔记的内容。
主要功能
- 创建新笔记
- 更新笔记内容
- 切换当前笔记
- 显示分屏布局
- 无笔记时显示提示
import React from "react";
import { nanoid } from "nanoid";
import Split from "react-split";
import Sidebar from "../public/components/Sidebar";
import Editor from "../public/components/Editor";
- React:提供 useState 和其他功能,用于创建 React 组件。
- nanoid:生成唯一的 ID,用于标识每条笔记。
- Split:用于实现分屏布局(侧边栏 + 编辑器)。
- Sidebar 和 Editor 是自定义的子组件,分别处理笔记列表和笔记编辑。
状态管理
const [notes, setNotes] = React.useState([]);
const [currentNoteId, setCurrentNoteId] = React.useState((notes[0] && notes[0].id) || ""
);
- notes:存储所有笔记的状态,初始值为空数组。
- currentNoteId:存储当前笔记的 ID,初始值为第一个笔记的 ID(若无笔记,则为空字符串)。
创建新笔记
function createNewNote() {const newNote = {id: nanoid(),body: "# Type your markdown note's title here"};setNotes(prevNotes => [newNote, ...prevNotes]);setCurrentNoteId(newNote.id);
}
- 使用
nanoid
生成一个唯一的 ID。 - 创建一个新笔记对象,默认内容为 “# Type your markdown note’s title here”。
- 将新笔记添加到
notes
的顶部。 - 更新
currentNoteId
为新笔记的ID
。
更新笔记
function updateNote(text) {setNotes(oldNotes => oldNotes.map(oldNote => {return oldNote.id === currentNoteId? { ...oldNote, body: text }: oldNote;}));
}
- 遍历
notes
,检查每条笔记的 ID。 - 如果某条笔记的 ID 与
currentNoteId
相同,则更新其body
内容。 - 使用
...oldNote
保留笔记其他的属性,更新body
。
查找当前笔记
function findCurrentNote() {return notes.find(note => {return note.id === currentNoteId;}) || notes[0];
}
- 查找与 currentNoteId 匹配的笔记。
- 如果没有匹配到,返回第一条笔记(默认情况)。
return (<main>{notes.length > 0 ? (<Splitsizes={[30, 70]}direction="horizontal"className="split"><Sidebarnotes={notes}currentNote={findCurrentNote()}setCurrentNoteId={setCurrentNoteId}newNote={createNewNote}/>{currentNoteId && notes.length > 0 && (<EditorcurrentNote={findCurrentNote()}updateNote={updateNote}/>)}</Split>) : (<div className="no-notes"><h1>You have no notes</h1><buttonclassName="first-note"onClick={createNewNote}>Create one now</button></div>)}</main>
);
有笔记时的渲染:
- 使用 Split 实现水平分屏,30% 分给侧边栏(Sidebar),70% 分给编辑器(Editor)。
- Sidebar:显示笔记列表,并支持切换当前笔记或创建新笔记。
- Editor:编辑当前笔记的内容。
无笔记时的渲染:
- 显示提示文字
You have no notes
。 - 提供一个按钮
Create one now
,单击后调用createNewNote
创建第一条笔记。
6. Sidebar.jsx
这是一个 React 组件 Sidebar,用于显示笔记的侧边栏列表,并允许用户切换当前笔记或创建新笔记。此组件通过 props 接收父组件传递的状态和函数来实现动态渲染和交互。
import React from "react";export default function Sidebar(props) {
- React:用于支持 React 的 JSX 语法。
- export default:将 Sidebar 组件作为默认导出,使其可被其他模块导入。
Sidebar 是一个无状态函数组件,接收 props 参数(即父组件传递的数据)。
生成笔记元素
const noteElements = props.notes.map((note, index) => (<div key={note.id}><divclassName={`title ${note.id === props.currentNote.id ? "selected-note" : "" }`}onClick={() => props.setCurrentNoteId(note.id)}><h4 className="text-snippet">Note {index + 1}</h4></div></div>
));
props.notes
:
- 父组件传入的笔记数组,每个笔记对象包含
id
和body
属性。
props.notes.map()
:
- 遍历笔记数组,为每条笔记生成一个 JSX 元素。
key={note.id}
:为每个顶层元素提供唯一的 key 属性,以优化 React 的渲染性能。
- 条件渲染类名:
className={title ${note.id === props.currentNote.id ? "selected-note" : ""}}
:- 如果当前笔记的 id 与 props.currentNote.id 匹配,添加 selected-note 类名。
- 用于高亮显示当前选中的笔记。
- 点击事件:
onClick={() => props.setCurrentNoteId(note.id)}
:- 点击笔记时调用父组件传入的 setCurrentNoteId 方法,更新当前笔记的 id。
- 显示笔记编号:
<h4 className="text-snippet">Note {index + 1}</h4>
:动态显示笔记的编号(从 1 开始)。
侧边栏结构
return (<section className="pane sidebar"><div className="sidebar--header"><h3>Notes</h3><button className="new-note"onClick={props.newNote}>+</button></div>{noteElements}</section>
);
- 侧边栏头部:
<div className="sidebar--header">
:包含标题和创建按钮。- 标题:
<h3>Notes</h3>
。 - 创建按钮:
<button className="new-note" onClick={props.newNote}>+</button>
:
点击按钮调用父组件传入的 newNote 方法,创建一条新笔记。
- 笔记列表:
{noteElements}
:动态渲染生成的笔记列表。
组件渲染逻辑总结
- 笔记渲染:
- 遍历
props.notes
,生成笔记列表。 - 为选中的笔记添加
selected-note
类名。 - 点击笔记切换当前选中的笔记。
- 笔记创建:
- 提供一个按钮,点击后调用
props.newNote
创建新笔记。
- 动态更新:
- 通过 props 与父组件共享状态,每次父组件状态更新时,Sidebar 会自动重新渲染。
7. Editor.jsx
此代码定义了一个名为 Editor
的 React 函数组件,用于实现 Markdown 文本编辑器。它通过 ReactMde
(React Markdown Editor)库提供一个多功能的 Markdown 编辑和预览界面。
import React from "react"
import ReactMde from "react-mde"
import 'react-mde/lib/styles/css/react-mde-all.css';
import Showdown from "showdown"
- React:
- 导入 React 库,支持 JSX 和组件开发。
- ReactMde:
- 导入
React Markdown Editor
,用于渲染 Markdown 编辑器。 ReactMde
提供了内置的编辑和预览功能。
- 样式文件:
- 导入
react-mde
的样式文件,应用默认的编辑器样式。
- Showdown:
- 导入
Showdown
库,用于将 Markdown 文本转换为 HTML。
export default function Editor({ currentNote, updateNote }) {const [selectedTab, setSelectedTab] = React.useState("write")
- 函数组件:
- 定义一个函数组件 Editor,接收两个 props:
- currentNote:当前笔记对象(包含 body 属性)。
- updateNote:更新笔记内容的回调函数。
- 状态管理:
- 使用 React 的
useState
Hook 管理当前编辑器的选项卡状态: selectedTab
的初始值为 “write
”,表示当前默认显示“编辑”模式。
const convertor = new Showdown.Converter({tables: true,simplifiedAutoLink: true,strikethrough: true,tasklists: true,
})
- 创建 Showdown.Converter 实例:
- 配置 Markdown 转换器,使其支持以下扩展功能:
tables: true
:支持表格语法。simplifiedAutoLink: true
:自动将 URL 转换为超链接。strikethrough: true
:支持 删除线 语法。tasklists: true
:支持任务列表
- 作用:将 Markdown 文本转换为 HTML,以便在预览模式中显示。
return (<section className="pane editor"><ReactMdevalue={currentNote.body}onChange={updateNote}selectedTab={selectedTab}onTabChange={setSelectedTab}generateMarkdownPreview={(markdown) => Promise.resolve(convertor.makeHtml(markdown))}minEditorHeight={80}heightUnits="vh"/></section>
)
ReactMde 编辑器:
value
:绑定到 currentNote.body,表示当前笔记的内容。onChange
:当用户在编辑器中输入内容时,调用 updateNote 更新父组件的状态。selectedTab
:当前选中的选项卡(“write” 或 “preview”)。onTabChange
:切换选项卡时调用,更新 selectedTab 的状态。generateMarkdownPreview
:预览时调用,将 Markdown 文本转换为 HTML。使用convertor.makeHtml(markdown)
完成转换,返回一个 Promise。minEditorHeight
和heightUnits
:设置编辑器的最小高度为 80,单位为 vh(视口高度)。
父组件如何与 Editor 交互
currentNote
:父组件将当前笔记对象传递给Editor
。通过currentNote.body
显示当前笔记的内容。updateNote
:父组件提供回调函数,用于更新笔记内容。
8. index.css
* {box-sizing: border-box;
}
1.* 通配符选择器:
- 设置所有元素的 box-sizing 为 border-box。
- 效果:元素的 width 和 height 属性包括内边距(padding)和边框(border),避免计算宽高时的复杂性。
body {margin: 0;padding: 0;font-family: 'Karla', sans-serif;
}
- body 标签:
- 移除默认的外边距(margin)和内边距(padding)。
- 设置全局字体为 Karla,使用无衬线字体(sans-serif)作为后备。
button:focus {outline: none;
}
- 按钮样式:移除按钮在获得焦点(focus)时的默认轮廓(outline)。
.ql-editor p,
.ql-editor.ql-blank::before {font-size: 1.3em;font-weight: 100;
}
ql-editor
:
- 专为
ReactMde
(Markdown 编辑器)定义。 - 调整段落文字大小(
1.3em
)和字体粗细(100
,非常细的字体)。
.pane {overflow-y: auto;
}
.pane
:
- 应用于侧边栏和编辑器容器。
- 启用垂直滚动(
overflow-y: auto
),以显示超出容器高度的内容。
.sidebar {width: 20%;height: 100vh;
}
.sidebar
:
- 设置侧边栏宽度为 20%,高度占满整个视口(100vh)。
.editor {width: 80%;height: 100vh;
}
.editor
:
- 设置编辑器宽度为 80%,高度占满整个视口。
.sidebar--header {display: flex;justify-content: space-around;align-items: center;
}
.sidebar--header
:
侧边栏标题区域:
- 使用 flex 布局。
- 水平排列子元素,且均匀分布(justify-content: space-around)。
- 垂直居中对齐(align-items: center)。
.new-note, .first-note {cursor: pointer;background-color: #4A4E74;border: none;color: white;border-radius: 3px;
}
两类按钮(新建笔记 new-note
和初始笔记 first-note
):
- 指针悬停变成手型(
cursor: pointer
)。 - 背景色为深紫色(
#4A4E74
),字体颜色为白色。 - 圆角(
border-radius: 3px
)。
.title {overflow: hidden;width: 100%;cursor: pointer;display: flex;justify-content: space-between;align-items: center;
}
单个笔记标题的样式:
- 超出宽度的内容隐藏(
overflow: hidden
)。 - 使用
flex
布局,子元素之间均匀分布。
.selected-note {background-color: #4A4E74;
}
.selected-note .text-snippet {color: white;font-weight: 700;
}
当前选中的笔记高亮:
- 背景色变成深紫色。
- 子元素
.text-snippet
的字体颜色变成白色,且加粗(font-weight: 700
)。
.gutter {background-color: #eee;background-repeat: no-repeat;background-position: 50%;
}
.gutter
:
- 分割侧边栏和编辑器的拖拽条。
- 设置背景色为浅灰色。
.gutter.gutter-horizontal {background-image: url('data:image/png;base64,...');
}
.gutter.gutter-horizontal:hover {cursor: col-resize;
}
.gutter-horizontal
:
水平分割条的样式:
- 使用 base64 图片作为背景。
- 鼠标悬停时,显示水平调整光标(col-resize)。
.no-notes {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: whitesmoke;
}
当没有任何笔记时的提示区域:
- 宽度和高度占满视口。
- 子元素垂直排列(
flex-direction: column
),水平和垂直居中。 - 背景色为浅白色(
whitesmoke
)。
相关文章:

用 React 编写一个笔记应用程序
这篇文章会教大家用 React 编写一个笔记应用程序。用户可以创建、编辑、和切换 Markdown 笔记。 1. nanoid nanoid 是一个轻量级和安全的唯一字符串ID生成器,常用于JavaScript环境中生成随机、唯一的字符串ID,如数据库主键、会话ID、文件名等场景。 …...

如何离线安装dockerio
如何离线安装dockerio 一、下载Docker离线安装包二、上传离线安装包三、解压安装包四、复制文件到系统目录五、配置Docker服务六、设置文件权限并重新加载配置七、启动Docker服务八、设置开机自启动九、验证安装Docker是一个开源的容器化平台,用于开发、发布和运行应用程序。离…...

LocalDateTime序列化(跟redis有关)
使用过 没成功,序列化后是[2024 11 10 17 22 20]差不多是这样, 反序列化后就是: [ 2024 11 10.... ] 可能是我漏了什么 这是序列化后的: 反序列化后: 方法(加序列化和反序列化注解)&…...
【redis】如何跑
在 Windows 上配置 Redis 需要一些额外的步骤,因为 Redis 官方并没有为 Windows 提供原生支持。不过,可以通过以下方法来安装和配置 Redis。 方法一:使用 Windows 版 Redis(非官方版本) 下载 Redis for Windows Redis…...

Scala学习记录,全文单词统计
package test32 import java.io.PrintWriter import scala.io.Source //知识点 // 字符串.split("分隔符":把字符串用指定的分隔符,拆分成多个部分,保存在数组中) object test {def main(args: Array[String]): Unit {//从文件1.t…...

【MyBatis】验证多级缓存及 Cache Aside 模式的应用
文章目录 前言1. 多级缓存的概念1.1 CPU 多级缓存1.2 MyBatis 多级缓存 2. MyBatis 本地缓存3. MyBatis 全局缓存3.1 MyBatis 全局缓存过期算法3.2 CacheAside 模式 后记MyBatis 提供了缓存切口, 采用 Redis 会引入什么问题?万一遇到需强一致场景&#x…...

学习ASP.NET Core的身份认证(基于Session的身份认证3)
开源博客项目Blog中提供了另一种访问控制方式,其基于自定义类及函数的特性类控制访问权限。本文学习并测试开源博客项目Blog的访问控制方式,测试程序中直接复用开源博客项目Blog中的相关类及接口定义,并在其上调整判断逻辑。 首先是接口A…...
速盾:高防 CDN 可以配置客户端请求超时配置?
在高防 CDN(Content Delivery Network,内容分发网络)的运行管理中,客户端请求超时配置是一项重要的功能设定,它对于优化网络资源分配、保障服务质量以及维护系统稳定性有着关键意义。 一、客户端请求超时配置的概念 …...

DRM(数字权限管理技术)防截屏录屏----ffmpeg安装
提示:ffmpeg安装 文章目录 [TOC](文章目录) 前言一、下载二、配置环境变量三、运行ffmpeg四、文档总结 前言 FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的…...

使用PyQt5开发一个GUI程序的实例演示
一、安装Python 下载安装到这个目录 G:\Python38-32 安装完成有这些工具,后面备用: G:\Python38-32\Scripts\pyrcc5.exe G:\Python38-32\Scripts\pyuic5.exe 二、PyQt环境配置 pip install PyQt5 pip install pyqt5-tools 建议使用国内源,…...
【VUE3】【Naive UI】<NCard> 标签
【Vue3】【Naive UI】 标签 title 属性bordered 属性header-style 和 body-style 属性footer 属性actions 属性hoverable 属性loading 属性size 属性type 属性cover 和 avatar 属性description 属性style 属性 【VUE3】【Naive UI】<NCard> 标签 【VUE3】…...
选择排序之大根堆
大根堆:树的根节点大于左右子树的结点值,这样就能保证每次从树根取的是最大值 灵魂在于HeadAdjust函数,以某节点为树根通过下落调整为大根堆, 建树思想 就是,从最后一个非终端结点开始调整以该结点为根的子树&#x…...

AI的魔力:如何为开源软件注入智慧,开启无限可能
“AI的魔力:如何为开源软件注入智慧,开启无限可能” 引言: 在科技发展的浪潮中,开源软件生态一直扮演着推动创新与共享的重要角色。从Linux到Python,开源项目赋予了开发者全球协作的机会,推动了技术的飞速…...
如何在 VPS 上使用 Git 设置自动部署
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 介绍 要了解 Git 的基本知识以及如何安装,请参考介绍教程。 本文将教你如何在部署应用程序时使用 Git。虽然有许多使用 Gi…...

Linux下的三种 IO 复用
目录 一、Select 1、函数 API 2、使用限制 3、使用 Demo 二、Poll 三、epoll 0、 实现原理 1、函数 API 2、简单代码模板 3、LT/ET 使用过程 (1)LT 水平触发 (2)ET边沿触发 4、使用 Demo 四、参考链接 一、Select 在…...

通过 SSH 进行WordPress网站的高级服务器管理
我在管理hostease的服务器时,时常需要通过SSH登录服务器进行修改。而在网站管理中,SSH不仅是一个基础工具,更是高级用户用来精细化管理和优化服务器的重要工具。通过SSH,你可以深入监控服务器的性能、精细管理系统资源,…...
速盾高防cdn支持移动端独立缓存
随着移动互联网的快速发展,移动端网页访问量也越来越大。然而,移动端的网络环境相对不稳定,用户体验可能会受到影响。因此,使用高防CDN来加速移动端网页访问,成为越来越多网站运营者的首选。 速盾高防CDN是一种分布式…...

PMP–一、二、三模、冲刺–分类–8.质量管理
文章目录 技巧五、质量管理 一模8.质量管理--质量管理计划--质量管理计划包括项目采用的质量标准,到底有没有满足质量需求,看质量标准即可。6、 [单选] 自项目开始以来,作为项目经理同事的职能经理一直公开反对该项目,在讨论项目里…...

如何快速使用Unity 的UPR---1资源检测保姆级
关于我们的性能检测工具已经有很多了,比如UWA的或者是我们的Unity 的UPR 都是很好的,今天说一下UPR吧 官方网址 :UPR - Unity专业性能优化工具 这个是官方给的Demo 选择你的平台就可以 这个可以作为一个参考但是不是很建议用官方的因为我们…...
pytorch中的.clone() 和 .detach()
在PyTorch中,.clone() 和 .detach() 是两个用于处理张量(Tensor)的方法,它们各自有不同的用途: .clone(): .clone() 方法用于创建一个张量的副本(深拷贝)。这意味着原始张量和新张量…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...

基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发,旨在打造一个互动性强的购物平台,让用户在购物的同时,能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机,实现旋转、抽拉等动作,增…...