欢迎来到Web开发的世界！在深入学习React之前，我们首先需要了解Web是如何工作的，以及作为开发者，我们将使用哪些基本工具。理解这些基础知识，将为我们后续构建复杂的单页应用打下坚实的基础。

1. Web工作原理

想象一下，当你打开浏览器访问一个网站时，幕后发生了什么？这涉及到客户端-服务器模型、HTTP协议、URL和DNS等一系列概念。

1.1 客户端-服务器模型

Web的工作基于一个核心概念：客户端-服务器模型。简而言之：

  • 客户端 (Client)：通常是你的网络浏览器（如Chrome, Firefox, Edge），它负责向服务器发起请求并显示接收到的信息。
  • 服务器 (Server)：一台连接到互联网的计算机，存储着网站的所有文件（HTML、CSS、JavaScript、图片、数据等），并响应客户端的请求。

当你访问一个网站时，你的浏览器作为客户端，向对应的服务器发送一个请求。服务器接收请求后，会找到相应的文件或数据，然后将其发送回客户端。客户端（浏览器）收到这些数据后，再将其解析并渲染成你所看到的网页。

这是一个简化的流程图：

Loading diagram...

1.2 HTTP/HTTPS协议

HTTP (HyperText Transfer Protocol) 是互联网上应用最广泛的一种网络协议，它定义了客户端和服务器之间如何进行通信。HTTP是无状态的，这意味着服务器不会保存关于之前请求的任何信息。

  • 请求 (Request)：客户端向服务器发送的信息，包含请求的方法（如GET获取数据，POST提交数据）、请求的URL、请求头和请求体。
  • 响应 (Response)：服务器返回给客户端的信息，包含状态码（如200表示成功，404表示未找到）、响应头和响应体（通常是HTML、CSS、JS文件或JSON数据）。

HTTPS (HyperText Transfer Protocol Secure) 是HTTP的安全版本。它在HTTP和TCP之间增加了一层SSL/TLS协议，对通信数据进行加密，确保数据在传输过程中的安全性和完整性，这对于处理敏感信息（如密码、银行卡号）至关重要。你会发现很多网站的URL以https://开头，而不是http://。

1.3 URL (统一资源定位符)

URL (Uniform Resource Locator) 是互联网上资源的唯一地址，你每天都在使用它来访问网站。一个典型的URL结构如下：

https://www.example.com:8080/path/to/resource?param1=value1#section

  • https://：协议 (Protocol)，指定了浏览器和服务器之间通信的方式（这里是安全的HTTP）。
  • www.example.com：域名 (Domain Name)，代表了服务器的名称，是网站的唯一标识符。
  • :8080：端口号 (Port)，可选，指定了服务器上应用程序监听的端口。HTTP默认端口是80，HTTPS默认端口是443，通常不需要显式写出。
  • /path/to/resource：路径 (Path)，指定了服务器上资源的具体位置。
  • ?param1=value1：查询参数 (Query Parameters)，可选，用于向服务器传递额外的信息，通常用于过滤、排序数据等。参数之间用&连接。
  • #section：片段标识符 (Fragment Identifier)，可选，用于指定页面内部的某个部分，浏览器会滚动到该部分，它不会发送给服务器。

1.4 DNS (域名系统)

你可能记住的是google.com这样的域名，而不是172.217.160.142这样的IP地址。DNS (Domain Name System) 就像互联网的电话簿，它负责将人类可读的域名转换成机器可识别的IP地址。当你输入一个域名时，你的计算机首先会向DNS服务器查询对应的IP地址，然后才能向正确的Web服务器发送请求。

1.5 HTML、CSS、JavaScript的角色

  • HTML (HyperText Markup Language)：定义了网页的结构和内容。它是一切网页的基础，用于组织文本、图片、链接等元素。
  • CSS (Cascading Style Sheets)：负责网页的样式和布局。它让网页看起来更美观，决定了颜色、字体、间距、布局等视觉表现。
  • JavaScript (JS)：赋予网页交互性。它允许你创建动态内容、响应用户操作（如点击按钮、填写表单）、发送网络请求等，是现代Web应用的核心。

2. 开发工具

作为一名Web开发者，你需要一些趁手的工具来编写、调试和管理你的代码。

2.1 浏览器与开发者工具

浏览器是前端开发者的主战场。目前主流的浏览器有Google Chrome、Mozilla Firefox、Microsoft Edge等。它们不仅是最终用户访问网站的工具，也内置了强大的开发者工具 (Developer Tools)，这些工具对于调试代码、检查元素、分析网络请求和优化性能至关重要。

Chrome 开发者工具 (DevTools) 是最常用的，我们课程中也会主要使用它。你可以通过以下方式打开它：

  • 右键点击网页任意位置，选择“检查 (Inspect)”或“检查元素 (Inspect Element)”。
  • 使用快捷键：Ctrl + Shift + I (Windows/Linux) 或 Cmd + Option + I (macOS)。

开发者工具包含多个面板，例如：

  • Elements (元素)：查看和修改网页的HTML结构和CSS样式。
  • Console (控制台)：查看JavaScript错误信息、打印调试信息，并可以直接运行JavaScript代码。
  • Sources (源代码)：查看和调试页面的源代码，设置断点等。
  • Network (网络)：监控和分析网页加载过程中的所有网络请求。

2.2 代码编辑器

代码编辑器是你编写代码的软件。一个好的代码编辑器能够提高你的开发效率和体验。我们强烈推荐使用 Visual Studio Code (VS Code)。

VS Code 是一款免费、开源且功能强大的代码编辑器，它支持多种编程语言，拥有丰富的扩展生态系统，可以极大地提升开发效率。其主要特点包括：

  • 智能代码补全 (IntelliSense)：在你输入时提供代码建议。
  • 语法高亮 (Syntax Highlighting)：使代码更易读。
  • 集成终端 (Integrated Terminal)：直接在编辑器内运行命令行指令。
  • 调试器 (Debugger)：帮助你找出代码中的错误。
  • 丰富的扩展 (Extensions)：通过安装各种插件来增强功能，例如代码格式化、ESLint、React代码片段等。

2.3 命令行工具 (CLI)

尽管现代IDE和编辑器提供了很多图形界面操作，但掌握命令行接口 (Command Line Interface, CLI) 仍然是每个开发者的必备技能。通过命令行，你可以更高效地执行任务，例如：

  • 创建、删除、移动文件和文件夹。
  • 安装和管理项目依赖（如npm或yarn）。
  • 运行开发服务器或构建项目。
  • 使用Git进行版本控制。

一些基础的命令行指令：

  • cd <目录名>：切换目录。
  • ls (macOS/Linux) 或 dir (Windows)：列出当前目录下的文件和文件夹。
  • mkdir <目录名>：创建新目录。
  • code . (如果你安装了VS Code的路径): 在当前目录下打开VS Code。

2.4 版本控制系统 (VCS) - Git

版本控制系统 (Version Control System, VCS) 是一种记录文件变化以方便协作和回溯历史的工具。Git 是目前最流行的分布式版本控制系统。

使用Git，你可以：

  • 追踪代码变更：记录每次修改，知道谁在什么时候做了什么修改。
  • 协作开发：多个开发者可以同时修改项目的不同部分，然后合并各自的代码。
  • 回溯历史：如果出现问题，可以轻松地回溯到之前任何一个正常的版本。
  • 分支管理：在不影响主线开发的情况下，创建独立的分支进行新功能的开发或bug修复。

GitHub、GitLab和Bitbucket是基于Git的在线代码托管平台，它们提供了远程存储代码、项目管理和团队协作的功能。

总结

本节课我们了解了Web的基本工作原理，包括客户端-服务器模型、HTTP/HTTPS协议、URL和DNS。我们还介绍了Web开发中不可或缺的工具：浏览器开发者工具、代码编辑器（VS Code）、命令行工具和版本控制系统（Git）。

理解这些基础是构建任何Web应用的起点。在接下来的课程中，我们将开始深入学习HTML、CSS和JavaScript，并逐步搭建我们的开发环境。

Sign in to use AI features

Sign in to clone this content to your account and unlock all AI-powered learning tools.

Sign In