My Journey Learning Frontend: Vue, React, Component Libraries, and Full‑Stack Integration

This piece begins with the author's motivation to learn frontend development after needing UI support for OKR tasks, acknowledging the difficulty of switching mindsets from backend to frontend.

After brief contemplation, the author decides the fastest way to start is by picking a modern frontend framework, ultimately choosing Vue due to its reputation for ease of use and comprehensive documentation, and begins a hands‑on tutorial covering template syntax, single‑page components, and Vue Router.

Facing challenges such as unfamiliar DOM manipulation and the steep learning curve of Vue 3's reactivity system, the author experiments with Vue 3, encounters issues like converting Map objects to JSON, and eventually decides to explore React for greater flexibility.

In the React section, the author highlights the benefits of functional components, one‑way data flow, and hooks (useState, useEffect, useContext), and outlines a concise learning checklist that includes installing a React‑with‑TS scaffold, understanding render, CSS modularization, state and props, hooks, and routing.

The article then evaluates several UI component libraries (Ant Design, Material UI, Semi Design, Arco Design), ultimately preferring Semi Design for its on‑demand style loading, while noting limitations such as fixed button styles.

Page layout work involved extensive CSS styling, Flexbox usage, and custom hover effects, resulting in a functional dashboard and routing table for a microservice gateway console, with charts powered by Ant Design's chart components.

On the backend side, the author creates a separate admin project and demonstrates how to embed the compiled React build into the Spring Boot application using Maven plugins. The relevant Maven configuration is shown below:

<build>
    <plugins>
        <!-- Execute npm commands -->
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>3.0.0</version>
            <executions>
                <!-- npm install -->
                <execution>
                    <id>exec-npm-install</id>
                    <phase>package</phase>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argumnet>install</argumnet>
                        </arguments>
                        <workingDirectory>../admin-ui/</workingDirectory>
                    </configuration>
                </execution>
                <!-- npm run build -->
                <execution>
                    <id>exec-npm-run-build</id>
                    <phase>package</phase>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argumnet>run</argumnet>
                            <argumnet>build</argumnet>
                        </arguments>
                        <workingDirectory>../admin-ui/</workingDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        <!-- Copy React build output to resources -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                <execution>
                    <id>copy-static</id>
                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>src/main/resources/static</outputDirectory>
                        <overwrite>true</overwrite>
                        <resources>
                            <resource>
                                <directory>../admin-ui/build</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

This integration allows developers to run frontend and backend services independently during development, while packaging them together for production without requiring a dedicated frontend team.

In conclusion, the author reflects that learning frontend basics can be achieved within a few hours, encourages full‑stack curiosity among engineers, and invites readers to share feedback or suggestions.