Welcome to the exciting world of web development! Before we dive into the specifics of React, it's essential to understand the foundational concepts of how the web works and where frontend development fits into the larger picture. This lesson will lay the groundwork for our journey.

What is the World Wide Web?

The World Wide Web, often simply called "the web," is a global system of interconnected computer networks that uses standard communication protocols to serve billions of users worldwide. It's essentially a massive collection of documents and other web resources, identified by URLs (Uniform Resource Locators), which are interlinked by hyperlinks and accessible via the Internet.

Think of the Internet as the physical infrastructure (roads, cables, routers) and the Web as the content that travels over that infrastructure (the cars, goods, and people).

How Does the Web Work? Client-Server Model

At its core, the web operates on a client-server model. When you type a web address (URL) into your browser or click a link, a series of events unfolds:

Client Request: Your web browser (the client) sends a request to a remote computer (the server) asking for a specific web page or resource.
DNS Lookup: The browser first needs to find the server's IP address. It does this by querying a Domain Name System (DNS) server, which translates human-readable domain names (like google.com) into machine-readable IP addresses (like 172.217.160.142).
HTTP/HTTPS: The request is sent using the Hypertext Transfer Protocol (HTTP) or its secure version, HTTPS. These protocols define how messages are formatted and transmitted across the web.
Server Response: The server receives the request, processes it (which might involve fetching data from a database), and then sends back the requested resources (HTML, CSS, JavaScript files, images, etc.) to your browser.
Browser Rendering: Your browser receives these resources and interprets them to display the web page on your screen. This process is called rendering.

This continuous cycle of requests and responses is what makes the web interactive.

Frontend vs. Backend Development

Web development is broadly divided into two main areas: frontend and backend.

Frontend Development (Client-Side)

Frontend development focuses on everything a user sees and interacts with directly in their web browser. This includes the layout, design, text, images, videos, buttons, navigation, and all interactive elements. It's about creating the User Interface (UI) and ensuring a smooth User Experience (UX).

Key Technologies:

HTML (HyperText Markup Language): The structure and content of a web page. It defines elements like headings, paragraphs, images, and links.
CSS (Cascading Style Sheets): The styling and presentation of the web page. It controls colors, fonts, layout, spacing, and responsive design.
JavaScript: The interactivity and dynamic behavior. It allows you to create animations, handle user input, fetch data from a server, and update content without reloading the entire page.

Frontend developers are often called "client-side" developers because their code runs on the user's web browser (the client).

Backend Development (Server-Side)

Backend development deals with the server-side logic, databases, and APIs that power the frontend. It's the engine behind the scenes that users don't directly see but is crucial for the application's functionality. This includes storing and retrieving data, user authentication, business logic, and ensuring the application runs smoothly and securely.

Key Technologies (Examples):

Programming Languages: Node.js (JavaScript), Python, Ruby, Java, PHP, Go, C#.
Frameworks: Express.js, Django, Ruby on Rails, Spring Boot, Laravel.
Databases: PostgreSQL, MySQL, MongoDB, Redis.

Backend developers are often called "server-side" developers because their code runs on the web server.

The Full Stack

A Full Stack Developer is someone proficient in both frontend and backend development, capable of building a complete web application from end to end.

The Importance of Frontend Development

Frontend development is vital for several reasons:

User Experience (UX): A well-designed and responsive frontend makes an application easy and enjoyable to use, directly impacting user satisfaction and retention.
User Interface (UI): The visual appeal and intuitive layout are critical for engaging users and conveying information effectively.
Interactivity: Modern web applications are dynamic. Frontend development using JavaScript brings this interactivity to life, allowing users to manipulate data, navigate complex interfaces, and receive immediate feedback.
Bridging the Gap: The frontend is the crucial bridge between the user and the backend's data and logic. Without a well-functioning frontend, the powerful backend remains inaccessible.

In this course, our focus will primarily be on mastering frontend development using React, a powerful JavaScript library for building user interfaces.

Key Takeaways

The World Wide Web uses a client-server model where browsers (clients) request resources from servers.
HTTP/HTTPS are the protocols used for communication between clients and servers.
Frontend development focuses on what users see and interact with in the browser (UI/UX).
HTML provides structure, CSS provides styling, and JavaScript provides interactivity.
Backend development handles server-side logic, databases, and APIs.
Frontend development is crucial for user engagement, interactivity, and bridging the gap between users and data.

Introduction to the Web and Frontend Development 45 分钟