A look at components, state, composition, TypeScript, and the React ecosystem.
One of the main reasons React is well-suited for modern web application development is that it allows UI to be built as small, reusable components. When we look at a website or web application from the outside, it may appear to be one large screen. However, from a developer’s perspective, that screen is actually made up of many smaller parts. Headers, navigation menus, buttons, cards, forms, modals, lists, images, sections, and footers are all separate UI elements. In the case of a blog, there are even more details, such as article cards, tags, published dates, thumbnails, body sections, related articles, and pagination. In React, each of these UI elements can be treated as a component. For example, a card that displays a blog post can be extracted into a component such as BlogPostCard. Inside that component, the title, excerpt, tags, date, image, and link can be grouped together. Then, by passing the necessary data, the same component can be reused in multiple places. Latest articles shown on the home page. Article cards displayed on the blog list page. Smaller cards shown as related articles. Even if these elements differ in appearance or size, the underlying design approach can still be shared. Being able to think of UI as a collection of reusable parts becomes more important as an application grows. If all of the HTML, CSS, and JavaScript were placed in one large file, it would become difficult to understand the impact of each change. You might only want to slightly change the appearance of a button, but it could affect other screens. You might only want to modify the structure of a card, but you may not know where similar UI patterns are being used. When a codebase reaches that state, both development speed and maintainability begin to decline. React makes it easier to separate UI into components and clarify each responsibility. This component is responsible only for presentation. This component receives data and displays it as a card. This component manages form input state. This component handles the overall page layout. By separating roles in this way, the code becomes easier to understand. React’s component-based design is not only about splitting code into smaller files. It is also a way of thinking about the structure of the UI itself. Trying to build a large page all at once can feel overwhelming. However, if the page is divided into sections, and each section is further divided into cards, buttons, and smaller components, even a complex screen can be built step by step. This way of thinking was very important in this portfolio project as well. The home page, blog list, blog detail page, project section, links section, and contact form all have different roles. However, many parts of their UI share the same design principles. Card UI, section headings, links, tags, buttons, loading states, and layout structures are common elements throughout the site. By organizing these elements as components, it became easier to keep the overall design consistent. React is not just a library for displaying screens. I see it as a technology for breaking UI into smaller pieces, reusing those pieces, combining them together, and structuring an entire application in a maintainable way.
React is powerful not only because it allows us to create components. By using concepts such as state, props, and composition, React makes it easier to organize complex UI states and data flow. When combined with TypeScript, it also becomes easier to define the shape of data passed between components, which greatly improves maintainability. First, state is used to manage values that change inside a component. In web applications, the screen changes based on user interactions. Typing into a form. Clicking a button. Switching tabs. Opening a modal. Entering a loading state. Displaying an error. Changing the language. Selecting a card. React’s state is essential for handling these kinds of changes. For example, in a contact form, we need to manage the entered name, email address, subject, message body, whether the form is being submitted, whether there are errors, and whether the submission has been completed. If these states are not organized properly, the behavior of the form can quickly become complicated. The input value and display may become inconsistent, the submit button may remain clickable while submitting, or error messages may appear at unnatural timings. React allows us to think about state and UI together. When the state changes, the UI changes accordingly. This way of thinking makes it possible to build interactive interfaces in a relatively organized way. Next, props are used to pass data from a parent component to a child component. In React, the same component can display different content depending on the data passed into it. For example, even with the same BlogPostCard component, the displayed title, excerpt, tags, date, image, and link can change depending on the article data passed through props. In other words, the structure of the UI can be reused while only the content changes. This approach works especially well with lists and card-based UI. Blog article lists. Project lists. Skill lists. External link lists. Image galleries. Related articles. In these types of interfaces, different data is often placed into the same visual structure. By using React props, the display logic can be shared while still allowing the UI to adapt flexibly to the data. Another important concept is composition. In React, large interfaces are built by combining smaller components. This idea of “combining” components is at the center of React-like design. However, it is not enough to simply split components into smaller pieces. We need to decide where to divide the UI. How much should be shared? Which parts should be specific to a page? At which level should state be managed? Which components should only handle presentation? Which components should contain logic? These decisions are important. In this portfolio project, the idea of composition was also very important. For example, the blog detail page needs to handle multiple display patterns, such as normal text blocks, image galleries, and message blocks. If all of these patterns are placed into one huge component, the code quickly becomes difficult to understand. By separating display components based on the type of data, the structure of the blog content becomes much more flexible. Adding TypeScript makes React architecture even more stable. With TypeScript, we can clearly define the types of props, blog article data, image data, form input values, API responses, and more. The larger the application becomes, the more valuable this becomes. For example, a blog article may have fields such as title, slug, excerpt, tags, published_at, and cover_image_url. If the types of these values are unclear, we may accidentally reference a property that does not exist, overlook the possibility of null, or cause an error during rendering. TypeScript helps us notice these problems earlier in the development process. This is especially important when using React together with Next.js and Supabase, because the data structure needs to be handled correctly between the frontend and backend. Data is fetched from the database, passed into React components, and displayed on the screen. When this entire flow is supported by types, the reliability of the code improves significantly. React, state, props, composition, and TypeScript. By combining these concepts, complex UI can be implemented not by force, but by organizing it as a clear structure. Modern web applications are becoming increasingly complex. They are no longer limited to static pages. They often need to handle forms, animations, data fetching, error handling, loading states, language switching, authentication, permission management, and many other kinds of state. As a foundation for dealing with that complexity, I feel that React’s design philosophy is extremely powerful.
React is a library for building user interfaces, but in real-world web application development, the UI alone is rarely enough. Page routing. SEO. Metadata management. Image optimization. Server rendering. Static generation. API integration. Database connections. Form handling. Email delivery. Animation. Integration with external services. A practical web application requires many of these elements. This is where a React framework like Next.js becomes important. By using Next.js, we can build more practical web applications while still using React as the foundation. For example, when building a blog site, it is not enough to simply display article content. An article list page is needed. An article detail page is needed. Each article needs its own URL. Routing based on a slug is required. Metadata for search engines is also needed. OGP images, titles, and descriptions should be configured. The publication status of articles also needs to be managed. It is possible to implement these features with React alone, but Next.js makes page structure, routing, and metadata management much easier to handle. In this portfolio project, Next.js played an important role as the foundation of the entire application. The home page shows interactive UI and 3D expression. The blog list page fetches and displays article data. The blog detail page displays an article based on its slug. The project page organizes and presents my work. The contact page handles form submission. Each page has appropriate metadata. In this way, even a portfolio site can become a web application with multiple features. By using Next.js, I can take advantage of React’s component-based design while also organizing page structure and server-side processing. In addition, combining it with a backend service such as Supabase expands what React and Next.js can do. Blog articles can be managed in Supabase PostgreSQL, and only published articles can be fetched and displayed. Image URLs, tags, published dates, body content, and slug values can be managed in the database. On the frontend, the fetched data can be passed into React components and rendered on the screen. This creates a more scalable structure than writing article data directly in the code. For the contact form, combining Next.js with an email delivery service such as Resend makes it possible to receive messages from users by email. The full flow of form input, validation, submission, completion display, and error display can also be organized more clearly with React and Next.js. For styling, Tailwind CSS makes it easier to adjust UI at the component level. For animation, Framer Motion adds natural movement to UI display and transitions. With React Three Fiber, even 3D expression can be integrated into the React-based structure, beyond ordinary DOM-based UI. In this way, I feel that React is not a technology that is meant to stand completely on its own. Its strength becomes much clearer when it is combined with surrounding technologies. React can be placed at the center, while Next.js provides the application structure. TypeScript improves type safety. Tailwind CSS builds the UI. Supabase manages the data. Framer Motion adds animation. React Three Fiber handles 3D expression. External services such as Resend or Stripe can be integrated when needed. With this combination, it is possible to build anything from a static website to a more full-stack web application. In this portfolio project, React played a central role. However, I did not build everything with React alone. By placing React at the center and combining it with Next.js, Supabase, Tailwind CSS, Framer Motion, and React Three Fiber, I was able to build more than just a profile site. It became a web application with a technical blog, 3D expression, content management, and a contact feature. One of React’s strengths is how naturally it connects with these kinds of technologies. The UI can be organized as components, data can be passed through props, state can be managed with state, page structure can be handled by Next.js, and external services can be integrated when necessary. I think this natural flow is one of React’s major strengths in modern web development. React is not just a technology for creating screens. It is a foundation for structuring complex UI, organizing data flow, and making an application easier to expand over time. Through this project, I once again felt that React is highly compatible with modern web application development. Especially when combined with Next.js and TypeScript, React becomes more than just a UI library. It becomes a central technology for building practical web applications. Component design, state management, type safety, page structure, data integration, animation, and 3D expression. Being able to handle all of these within a single website was a great opportunity to experience the strength of React.
