iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🔎

First Steps in Web Development: Frontend Technologies and Future Outlook

に公開
frontend
JSX
tech

Introduction

Hello. I have been learning about MCP (Model Context Protocol) so far, but this time I returned to the basics of web development and read through "How to Build Web Apps with Python." This article focuses on the technologies that control the look and behavior of web apps—the "frontend"—and summarizes my learning record, especially about new concepts like JSX and React.

Although web development technologies are diverse, I aim to steadily acquire them one by one.

1. Basic Technologies of Web Frontend

The frontend of a web app consists of the following three basic technologies:

  • HTML (HyperText Markup Language): A language that creates the structure of web pages.
  • CSS (Cascading Style Sheets): A language that decorates the appearance and design of web pages.
  • JavaScript: A programming language that adds interactive behavior to web pages.

These technologies are standardized to work across major web browsers.

2. Technologies Enhancing the Frontend: React and JSX

In addition to the basic technologies, various technologies have emerged to streamline frontend development.

Frontend Technologies

Here is a summary of representative frontend technologies:

  • React:
    A JavaScript library for building UIs. It allows you to divide the UI into small components and manage them as reusable parts. It supports unidirectional data flow and JSX, which enables writing HTML within JavaScript. It is an open-source library developed by Facebook and widely used.
  • Vue.js / Angular / Svelte:
    Frameworks or libraries for building UIs, similar to React. Although each has its own characteristics, they all share the common feature of making UIs reusable as components.
  • Saas / LESS / Stylus:
    Preprocessors used as supersets of CSS. They provide features like variables, nesting, and mixins to streamline CSS writing.
  • CSS Frameworks:
    For complex CSS specifications, these provide predefined styles and components, enabling rapid development while maintaining design consistency.
  • Node.js:
    A JavaScript runtime engine, also used to assist many frontend technologies.

Focusing on React and JSX

In particular, I focused on React, a JavaScript library for building UIs.

A major feature of React is that it allows you to divide the UI into small parts (components) and reuse them. And essential for creating these components is the notation called JSX.

What is JSX?

JSX is a syntax extension that allows you to write HTML-like markup directly inside JavaScript code. This enables you to describe the appearance (HTML) and behavior (JavaScript) together in one file.

For example, when displaying a self-introduction card on a web page, you previously needed to edit two separate files: HTML and JavaScript. However, with JSX, you can combine the data and display logic in one place, making code management significantly easier. This brings great benefits to development speed and quality, especially as web applications become more complex.

Step 1: What is JSX? (Basic Knowledge)

To understand JSX, let's use a cooking analogy 🍳

  • HTML: The "finished dish" or "ingredient list" of the meal. It defines the structure of the appearance, like "one pancake with butter on top."
  • JavaScript: The "recipe" or "cooking procedure" of the meal. It handles the logic (behavior), such as "crack two eggs, mix with milk, and cook."

In older web development, it was common to write this "ingredient list (HTML)" and "recipe (JavaScript)" in separate files. However, as web apps became more complex, constantly switching between the two became cumbersome.

That's where JSX comes in!

Think of JSX as a magical notation that lets you write the "finished dish (HTML)" directly inside the "recipe (JavaScript)."

// This is an example of JSX
const myPancake = (
  <div>
    <h1>Today's Breakfast</h1>
    <p>Fluffy Pancakes</p>
  </div>
);

See! You can directly include HTML-like code inside a JavaScript variable. That's JSX.

Why is JSX needed?

The biggest advantage is that related code is consolidated in one place.

For example, let's create a "Like" button.

  • The button's appearance (e.g., heart shape) → HTML's role
  • When the button is clicked, increment the count by 1 → JavaScript's role
    With JSX, you can write this appearance and logic together in a single file, saving you the trouble of searching for code and making it much easier to manage. It's just like having the recipe and the finished product combined into one!

3. Next Steps: What I Want to Learn Next

This blog was an output of today's reading notes. I am continuing to read Chapter 1 of "How to Build Web Apps with Python."
The section covered today was a concise summary of the technologies needed to build web apps. While reading "How to Build Web Apps with Python," my interest in frontend technologies such as React, Vue.js, and Node.js has grown even further.

In particular, I feel I have discovered powerful tools to achieve my goal of rechallenging the theme of "a web app that visualizes scraped data" using a combination of Flask and JavaScript, a project I had given up on before.

The world of web development is profound, and I feel there is so much to learn. However, I aim to leverage the knowledge gained from this study and the ability to grasp the big picture that I have developed through learning MCP, and steadily acquire skills one by one.

References

"How to Build Web Apps with Python" by Kujira Hikōzutsumi, Yoichi Sugiyama, Shunsuke Endō
https://www.socym.co.jp/book/1496

Discussion