用 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() 方法用于创建一个张量的副本(深拷贝)。这意味着原始张量和新张量…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...

SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...