极客教程如何使用ReactJS创建一个基本的笔记应用
在本文中，我们将学习如何使用ReactJS创建一个基本的笔记应用。笔记应用是一种数字应用，允许用户创建、管理和存储文本笔记以供个人组织和参考。
下面是使用ReactJS制作基本笔记应用的演示。它会长这样：
前提条件
- HTML
- CSS
- JavaScript
- ReactJs
项目设置
步骤1： 创建一个新的React应用程序
npx create-react-app notes-app
步骤2： 改变你的目录并进入你的主文件夹notes-app，如下所示：
cd notes-app
步骤3： 开始编辑app.js文件
步骤4： 检查依赖/ package.json：
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
项目结构：
方法:
- 首先，使用占位文本、div、按钮、输入框和标题标签创建一个基本的备忘录应用程序布局，同时定义明确的类和id。
- 使用CSS对组件进行样式设置，并创建一个如介绍所示的虚拟备忘录应用程序结构。
- 在React中，我们使用useState等钩子函数来存储数据项并处理输入。
- 创建一个包含键、标题和描述字段的虚拟数据对象数组。
- 定义一个处理函数来获取输入数据并使用useState钩子函数进行存储。此外，定义一个接受要删除的项的键的remove函数。
- 使用onClick事件监听器调用添加或删除函数，并更新备忘录数组。
示例: 在这个示例中，我们使用了上述解释的方法。
// App.js
import "./App.css";
import { useState } from "react";
function App() {
const [title, setTitle] = useState("");
const [des, setDes] = useState("");
const [notes, setNotes] = useState(data);
const [count, setCount] = useState(4);
function remove(id) {
setNotes(notes.filter((e) => e.key !== id));
}
function handle() {
if (!title || !des) {
window.alert("Incomplete input");
return;
}
setNotes([
...notes,
{ key: count, title: title, des: des },
]);
setCount(count + 1);
setTitle("");
setDes("");
console.log(notes);
}
return (
<div className="App">
<div className="card">
<div className="head">
<h1>React notes</h1>
</div>
<div className="notes">
{notes.map((e) => (
<div className="notes-item">
<div style={{ width: "90%" }}>
<h4>Title: {e.title}</h4>
<p>Note: {e.des}</p>
</div>
<button
type="input"
style={{
fontSize: "20px",
width: "8%",
height: "35px",
padding: "0 2% 0 2%",
color: "black",
}}
onClick={() =>
remove(e.key)
}>
X
</button>
</div>
))}
<div className="add">
<h3>Add Notes</h3>
<input
type="text"
id="title"
placeHolder="Add title"
value={title}
onChange={(e) =>
setTitle(e.target.value)
}>
</input>
<input
type="text"
id="description"
placeholder="Notes"
value={des}
onChange={(e) => {
setDes(e.target.value);
}}>
</input>
<button
type="submit"
onClick={handle}>
Submit
</button>
</div>
</div>
</div>
</div>
);
}
// Dummy data
const data = [
{
key: 0,
title: "Html",
des: "HyperText MarkUp Language",
},
{ key: 1, title: "CSS", des: "StyleSheet" },
{
key: 2,
title: "JavaScript",
des: "Scripting language for web",
},
{
key: 3,
title: "React",
des: "JavaScript framework",
},
];
export default App;
CSS
/* App.css*/
.App {
text-align: center;
}
/* Styling universal selector */
* {
/* margin-top: 50px; */
margin: 0;
margin-top: 10px;
padding: 0;
box-sizing: border-box;
}
/* Style body element */
body {
min-height: 50vh;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
background: hsl(0, 0%, 100%);
font-family: "Poppins", sans-serif;
}
/* Styling card container */
.card {
/* min-height: 50vh; */
height: fit-content;
min-width: 33rem;
max-width: 40rem;
background: rgba(147, 208, 119, 1);
margin: 0 1rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
width: 100%;
}
.head {
position: relative;
max-height: fit-content;
min-width: 33rem;
width: 100%;
background: rgb(109, 157, 87);
padding: 1rem;
}
/* Input box and button */
.add {
padding: 5%;
text-align: left;
padding-left: 6%;
/* margin: 10%; */
}
input {
margin-right: 1%;
}
#title {
width: 20%;
font-size: larger;
}
#description {
font-size: large;
width: 60%;
}
button {
border-radius: 5px;
padding: 5px;
font-size: large;
color: #dbeefa;
background-color: rgb(109, 157, 87);
}
/* style accordion */
.notes {
margin: 5%;
text-align: left;
}
/* style for accordion items */
.notes-item {
display: flex;
z-index: 100;
padding: 2%;
/* border-bottom: 1px solid #4e7b48; */
font-size: larger;
margin: 2%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/* style for accordion items */
.accordion-item {
border-bottom: 1px solid #ddd;
font-size: larger;
}
步骤5： 运行以下命令，输出将在http://localhost:3000/上可见。
npm start
输出:
