构建应用程序时一次性使用 ReactJS、MongoDB、JS、CSS

2025-06-10

构建应用程序时一次性使用 ReactJS、MongoDB、JS、CSS

🤝 在如今人工智能时代，预测“Web 开发能否生存”已经变得如此困难。人们仍然专注于学习 HTML、CSS、JS 等知识，直到精通为止，然后转向新知识，却很少利用之前学到的知识构建任何东西。

编程模因

😩 在当今世界，有如此多的资源，如 ChatGPT、文档等，人们仍然通过观看教程来构建项目。

人们应该更多地关注构建，而不是花太多时间在语言或框架学习上。

📌 让我们一起行动吧

今天我们只会看到开始 Web 开发所需的必要内容，例如了解 HTML、CSS、JS 和 ReactJS 的必要内容以及如何使用 MongoDb。

如果您想参考 Project 的视频，请参考这个Youtube 视频（这是您开始 Web 开发所需的唯一视频）

✨ HTML

HTML 称为超文本标记语言，它是一种在开始和结束标签中排列文本的结构。
例如：

<div>
   <p>Hello</p>
</div>
Enter fullscreen mode Exit fullscreen mode

与上面一样，我们有开始标签 <> 和结束标签 </>，它们为文本赋予了一定的功能。

  • 就像这里的 div 标签表示一个盒子
  • p标签表示段落标签。

⚡️ HTML 初学者必备的标签：-

  • 标题标签
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Enter fullscreen mode Exit fullscreen mode
  • 容器标签
<div>I am a Container</div>
<span>I am an inline element</span>
<p>This is a paragraph tag</p>
<pre>This is a pre tag which will render text as written</pre>
<code>This is a tag for rendering a code block</code>
Enter fullscreen mode Exit fullscreen mode
  • 文档标签
<head>Tag for providing head information like website heading on the tab and icon on the tab</head>
<title>To be included in the head tag for title information</title>
<link> tag for setting up the relation with any external document
<meta> tag for providing some keywords, description about a website and also useful in SEO (Search Engine Optimisation)
<style>Tag to include the styling for the html page using CSS rules</style>
Enter fullscreen mode Exit fullscreen mode
  • 部分标签
<header>used to give introductory information about the document like header information in the top</header>
<nav>it is self explanatory from its name. Used for navigation bar specifically</nav>
<section>A general tag for a section in the document.</section>
<footer>Used to represent the footer in the document</footer>
Enter fullscreen mode Exit fullscreen mode
  • 文本格式化标签
<b>To make the text bold</b>
<i> To make font italic</i>
<em>To put emphasis on the specific text</em>
<strong>To represent text with strong focus, generally shown bold</strong>
<sub></sub> <sup></sup> Used for subscript and superscript
<time>used to represent a period of time</time>
Enter fullscreen mode Exit fullscreen mode
  • 列出标签
<ul>unordered list. It is generally rendered as with bullet points</ul>
<ol>Ordered list which is generally represented as with numbers</ol>
<li>for a list item of a ul or ol</li>
Enter fullscreen mode Exit fullscreen mode
  • 表格标签
<caption>specifies the title or caption of the table</caption>
<table>To define a table</table>
<thead>to provide some content for the table head</thead>
<tbody>used to give data for the table</tbody>
<th></th> and <td></td> used to give table head and table data to our table
Enter fullscreen mode Exit fullscreen mode
  • 表单标签
<form>used for defining a form with submission flow</form>
<input>Used for getting the input from the user</input>
<textarea>used for getting text input which is resizable</textarea>
<button>Used to specify a button element which can be clicked</button>
Enter fullscreen mode Exit fullscreen mode

✨CSS

CSS 称为层叠样式表，用于为纯 HTML 文本文档添加样式，例如颜色、背景图像、填充、边距等。

在 CSS 中，需要了解边距、填充、弹性、网格、颜色、绝对位置和相对位置。

  • div 容器与其父容器的边距

边距 CSS

  • CSS 中的填充意味着将 div 容器的内容仅相对于其容器而不是其父容器（如边距）推送

填充 CSS

  • 然后我们有 flex 属性，可以按行或列进行调整

柔性显示屏

它还有一些其他属性，例如 justify-content 和 gap

弹性盒子备忘单

  • 现在我们有绝对位置和相对位置

绝对位置

相对位置

📍 JS（Javascript）

🚀 现在，Java 脚本是一种用于提供诸如向数据库发送数据、注册鼠标事件以及执行诸如提交表单之类的功能的语言。

🔥 JS 用于操作 DOM（文档对象模型）以添加或删除任何 html 元素或更改 css 属性，例如单击按钮更改主题暗或亮。

  • 让我们从一个简单的 HTML 模板开始
<!DOCTYPE html>
<html>
<head>
  <title>Introduction to JavaScript</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to JavaScript!</h1>
  <p id="demo">This is a demonstration paragraph.</p>

  <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • 现在让我们在控制台中打印一些东西
// script.js

// Outputting a message to the browser console
console.log("Hello, JavaScript!");

// Modifying HTML content
document.getElementById("demo").innerHTML = "This paragraph is updated by JavaScript!";
Enter fullscreen mode Exit fullscreen mode
  • 现在，让我们将 JS 脚本包含进去
<script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • 现在让我们添加按钮和鼠标事件监听器
<button onclick="changeText()">Click me</button>
Enter fullscreen mode Exit fullscreen mode
  • 现在，让我们在单击按钮时调用一个函数
// script.js

function changeText() {
  document.getElementById("demo").innerHTML = "Button clicked!";
}
Enter fullscreen mode Exit fullscreen mode

✨ 在这里，我们使用“document”并通过赋予段落的属性“id”获取元素。该文档是指向 DOM（文档对象模型）的对象。

JS 中的 DOM

🤝 ReactJS

🚀 JS 是一门内容丰富的语言，在构建项目时应该深入研究。之后，可以转向 ReactJS，它是一个专为可重用性、可扩展性和渲染而构建的框架，只处理添加到 DOM 或移除的更改。因为 ReactJS 使用虚拟 DOM 和真实 DOM。因此，ReactJS 使用真实 DOM 的精确副本，当 DOM 发生更改时，React 会将虚拟 DOM 和真实 DOM 的更改进行比较。

并且仅渲染对 DOM 所做的更改。而 Simple JS 则会从 DOM 的顶部到底部重新渲染整个 Document。

现在，在下一篇博客（第 2 部分）中，我们将了解 React 的工作原理、如何使用像 MongoDB 这样的数据库以及如何使用像 Redux 这样的 React 架构。

同时，您可以参考这个Youtube 视频，这是您进入 Web 开发所需的单个视频。

鏂囩珷鏉ユ簮锛�https://dev.to/ssd/reactjs-mongodb-js-css-in-one-shot-while-building-an-app-3f43
Devto 翻译
PREV
使用 Cluster Module 扩展 Node JS 应用
NEXT
停车场系统：低层设计