我們生活在一個科技突飛猛進的時代，網路開發也不甘落後。每天都有新的工具和方法出現，它們有望讓開發人員的生活更輕鬆並改善使用者體驗。在這種背景下，Next.js、Atomic Design 和 Chakra UI 作為三種強大的方法脫穎而出，將它們結合起來可以改變我們建立 Web 應用程式的方式。
Next.js 是一個建立在 React 之上的框架，React 是用於建立使用者介面的最受歡迎的 JavaScript 函式庫。 Next.js 帶來了一系列功能，使 Web 開發更有效率和愉快。在這些功能中，我們重點介紹伺服器端渲染 (SSR)、靜態網站產生 (SSG)、簡化路由以及對 API 路由的支持，讓您可以直接在專案中建立 API。
使用 Next.js 可以更輕鬆地為 SEO（搜尋引擎優化）創建快速、可擴展和優化的應用程式。隨著本書的進展，我們將探索如何充分利用這些功能來建立健壯的現代應用程式。
Next.js 負責應用程式的結構和功能，而原子設計則負責組織和簡化設計過程。該方法由 Brad Frost 創建，基於以模組化方式建立使用者介面的概念，使用可以組合起來創建複雜介面的獨立組件。
原子設計分為五個層次：原子、分子、有機體、模板、頁。每個等級代表一定程度的複雜性和組件組合。透過採用這種方法，我們能夠創建更一致、可重複使用且更易於維護的設計系統。
為了完成我們的三重工具，我們有 Chakra UI，這是一個 React 元件庫，可以輕鬆創建易於訪問且美觀的介面。透過 Chakra UI，我們可以使用與 Atomic Design 無縫整合的可配置設計系統，以直覺且一致的方式設計元件的樣式。
Chakra UI 提供了廣泛的即用型元件，例如按鈕、表單、表格等。此外，它的靈活性使我們能夠根據需要自訂和擴展這些組件，確保我們的應用程式保持有凝聚力和專業的視覺形象。
Next.js、Atomic Design 和 Chakra UI 的結合創造了一個強大而高效的開發環境。 Next.js 提供了建立快速、可擴展的應用程式所需的基礎設施，而 Atomic Design 則以模組化、可重複使用的方式組織設計流程。 Chakra UI 反過來又促進了樣式設計並確保整個應用程式的視覺一致性。
在本書中，我們將詳細探討這些工具，從基本概念到高階實務。我們將了解如何將它們和諧地整合以建立現代、高效且具有視覺吸引力的 Web 應用程式。
在接下來的章節中，我們將深入研究這些技術。在第 2 章中，我們將首先詳細介紹 Next.js，其中我們將學習如何設定新專案並探索其主要功能。在第 3 章中，我們將介紹原子設計，討論如何應用其原理來創建一致的設計系統。在第 4 章中，我們將探索 Chakra UI，學習如何使用和自訂其元件來使我們的應用程式栩栩如生。
讀完本書，您將完全了解如何使用 Next.js、Atomic Design 和 Chakra UI 創建現代高效的 Web 應用程式。準備好踏上令人興奮且豐富的 Web 開發世界之旅吧！
現在我們已經大致了解了等待我們的是什麼，讓我們開始下一章的 Next.js 之旅。
第 1 章：Next.js、原子設計與 Chakra UI 簡介
第 2 部分：Next.js 的架構
了解了跟上現代技術的重要性以及有關 Next.js、原子設計和 Chakra UI 的概述之後，讓我們更深入地了解 Next.js 的架構。該框架是開發現代 Web 應用程式的最強大、最靈活的工具之一。
Next.js 建構在 React 之上，React 是一個廣泛用於建立使用者介面的 JavaScript 函式庫。然而，它更進一步，為開發 Web 應用程式提供了更完整的框架，包括伺服器端渲染 (SSR)、靜態網站生成 (SSG) 以及一系列有助於創建高效能和可擴展應用程式的其他功能。
伺服器端渲染是 Next.js 的一個關鍵功能。與在客戶端渲染的傳統 React 應用程式不同，Next.js 可以在將頁面傳送到客戶端之前在伺服器上預先渲染每個頁面。這會帶來更好的效能和 SEO，因為頁面內容可以立即提供給搜尋引擎和最終用戶。
Next.js 的另一個強大功能是靜態網站的產生。使用 SSG，您可以在建置時預先渲染頁面，而不是根據每個請求按需渲染它們。這對於內容不經常更改的網站特別有用，從而實現超快的效能和較低的伺服器負載。
Next.js 還有助於與 API 集成，透過 API 路由功能，您可以在開發前端應用程式的相同專案中建立端點。這意味著您不需要單獨的伺服器來向您的應用程式提供數據，從而降低了複雜性並使開發更容易。
Next.js 的開發體驗旨在直覺且高效。它內建了對 TypeScript、CSS 和 Sass 的支持，並提供了大量開發工具，使流程更順暢、更有效率。例如，熱模組替換（HMR）可讓您即時查看更改，而無需重新載入頁面，從而加快開發週期。
現在我們已經了解了 Next.js 的架構和功能，了解它如何與原子設計概念和 Chakra UI 元件庫整合非常重要。原子設計是一種透過將使用者介面分解為更小、可重複使用的元件來創建更具可擴展性和一致性的設計系統的方法。 Chakra UI 又是一個元件庫，遵循原子設計原則，有助於創建可存取且響應式的介面。
在下一章中，我們將詳細探討如何從頭開始建立 Next.js 項目，從頭開始整合 Atomic Design 和 Chakra UI。我們將向您展示這些技術如何相互補充，以及如何充分利用它們來建立現代高效的 Web 應用程式。
請繼續關注，我們還將討論最佳實踐、常見陷阱和寶貴的技巧，以優化您的應用程式並改善用戶體驗。這個旅程才剛開始，還有很多東西需要發現和學習。準備好利用 Next.js、Atomic Design 和 Chakra UI 進入迷人的 Web 開發世界！
未定義
在上一章中，我們探討了 Next.js 的基礎知識以及它如何在現代 Web 應用程式開發中脫穎而出。我們也討論了原子設計在創建可擴展且一致的使用者介面方面的重要性。現在，是時候將這兩種強大的方法與 Chakra UI 元件庫結合起來，形成一個強大且高效的開發生態系統了。
Next.js 最大的優勢之一是它能夠促進與各種元件庫（例如 Chakra UI）的整合。當我們考慮創建介面時，組件是現代開發的基石。它們是構建塊，組合起來形成應用程式的完整結構。
要開始在 Next.js 專案中使用 Chakra UI，我們首先需要安裝該程式庫。以下是在 Next.js 專案中配置 Chakra UI 的基本步驟：
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
安裝完成後，下一步就是在 Next.js _app.js 檔案中配置 ChakraProvider，這是整個應用程式的入口點：
// pages/_app.js
import { ChakraProvider } from "@chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
透過此配置，所有 Chakra UI 元件將在應用程式中的任何位置可用，讓您可以立即開始建立使用者介面。
原子設計提出了一種創建設計系統的方法，將介面劃分為越來越小、更可重複使用的部分：原子、分子、有機體、模板和頁面。
原子是最基本的元素，例如按鈕、輸入和圖示。在 Chakra UI 的上下文中，我們可以將 Button 和 Input 等元件視為原子的範例。
import { Button, Input } from "@chakra-ui/react";
const AtomExample = () => (
<div>
<Button colorScheme="teal">Clique Aqui</Button>
<Input placeholder="Digite algo aqui" />
</div>
);
分子是形成功能單元的原子的組合。例如，組合了輸入和按鈕的登入表單。
const LoginForm = () => (
<div>
<Input placeholder="Usuário" />
<Input placeholder="Senha" type="password" />
<Button colorScheme="teal" type="submit">Login</Button>
</div>
);
生物體是更複雜的成分，由原子和分子的組合組成。例如，包含徽標、導覽列和登入按鈕的標題。
import { Box, Flex, Spacer } from "@chakra-ui/react";
const Header = () => (
<Flex as="header" padding="4" bg="teal.500" color="white">
<Box p="2">
<Logo />
</Box>
<Spacer />
<Box>
<LoginForm />
</Box>
</Flex>
);
模板是透過根據頁面結構組織有機體來組合有機體的佈局。最後，頁面是具有特定資料的範本的具體實作。
Next.js、Atomic Design 和 Chakra UI 的結合使用不僅有助於創建更一致和可擴展的使用者介面，而且還促進了程式碼重用。這些工具帶來的模組化和清晰度提高了團隊生產力和最終產品的品質。
在接下來的章節中，我們將深入探討每個領域。讓我們探索如何使用 Chakra UI 建立自訂元件，如何使用 Atomic Design 建立設計系統，以及如何使用 Next.js 的進階功能最佳化效能和使用者體驗。準備好改變您開發 Web 應用程式的方式！
這只是我們旅程的開始。跟隨我們，我們繼續以實用且易於理解的方式探索這些技術，確保您可以將這些概念應用到您的下一個專案中。下一章見！
在上一章中，我們探討了 Web 技術的演變以及 Next.js 如何脫穎而出，成為開發現代應用程式的強大工具。現在，讓我們深入探討介面設計中最具革命性的概念之一：原子設計。
原子設計由 Brad Frost 創建，是一種使我們能夠創建更一致、可擴展和有組織的設計系統的方法。它基於與化學的類比，化學中的組件是由原子、分子、有機體、模板和頁面構建的。這種方法幫助我們將介面的複雜性分解為更小、更易於管理的單元，從而促進高效的重複使用和簡化的維護。
要了解原子設計的重要性，想像一下您正在建立一個具有多個頁面和元件的複雜應用程式。如果沒有清晰的結構，程式碼很快就會變得混亂、冗餘且難以維護。這就是原子設計的閃光點。它提供了所有團隊成員都可以遵循的通用「語言」和心理框架，確保以有凝聚力和一致的方式創建每個組件。
在 Next.js 的背景下，這種方法非常適合。 Next.js 憑藉其基於元件的架構和伺服器端渲染 (SSR) 功能，使我們能夠高效且有效地應用原子設計原則。這些技術的結合促進了設計和開發並進的工作流程，優化了介面創建過程。
要開始應用原子設計，我們要先了解它的五個基本層次：
Átomos: Os átomos são os blocos de construção mais básicos. Eles incluem elementos HTML como botões, inputs, labels e ícones. No contexto do Chakra UI, um popular framework de componentes React, os átomos podem ser equivalentes aos componentes básicos fornecidos pela biblioteca, como Button, Input, Text, etc.
Moléculas: As moléculas são combinações de átomos que formam componentes mais complexos, mas ainda relativamente simples. Um exemplo seria um campo de busca, que combina um com um
Organismos: Organismos são grupos de moléculas que trabalham juntas para formar seções distintas de uma interface. Um exemplo comum seria um cabeçalho de site que contém um logotipo, uma barra de navegação e um campo de busca.
Templates: Templates são esboços de páginas que estruturam os organismos, definindo a disposição e a hierarquia de componentes. Eles providenciam uma visão geral de como os organismos se combinam para formar uma página completa.
Páginas: As páginas são instâncias específicas de templates com conteúdo real. Elas representam o nível mais alto de fidelidade, onde o design encontra o conteúdo.
Chakra UI é uma biblioteca de componentes React que facilita a criação de interfaces acessíveis e estilizadas com rapidez. Com sua filosofia de "design system" e grande flexibilidade, Chakra UI se torna uma ferramenta ideal para aplicar os princípios do Atomic Design.
No decorrer deste capítulo, vamos explorar como construir cada um desses níveis usando Chakra UI, começando pelos átomos e progredindo até as páginas. Vamos ver exemplos práticos, dicas e truques para maximizar a eficiência e a qualidade de nossos projetos.
Nas próximas seções, vamos mergulhar em cada nível do Atomic Design, começando pelos átomos. Vamos criar componentes simples usando Chakra UI e entender como eles podem ser combinados para formar moléculas e, eventualmente, organismos mais complexos. À medida que avançamos, exploraremos como o Next.js nos auxilia na organização e renderização desses componentes, proporcionando uma experiência de desenvolvimento fluida e eficiente.
Prepare-se para transformar a maneira como você constrói interfaces, adotando uma metodologia que não só melhora a consistência e a manutenção do código, mas também promove um desenvolvimento colaborativo e escalável. Vamos começar nossa jornada pelo universo do Atomic Design!
O Atomic Design, uma metodologia criada por Brad Frost, é uma abordagem inovadora para a construção de interfaces de usuário. No capítulo anterior, introduzimos os conceitos básicos e a importância de adotar uma estrutura modular para o desenvolvimento front-end. Agora, vamos aprofundar-nos nos princípios fundamentais do Atomic Design e como eles se aplicam ao uso do Next.js e do Chakra UI.
No nível mais básico da metodologia Atomic Design, temos os átomos. Os átomos são os componentes mais simples e primários da interface, como botões, inputs, ícones, e etiquetas. Eles representam os elementos básicos que não podem ser divididos em partes menores sem perder sua funcionalidade.
Por exemplo, um botão em Chakra UI pode ser considerado um átomo. A flexibilidade do Chakra UI permite que customizemos esses átomos com facilidade, aplicando diferentes estilos e propriedades para atender às necessidades específicas do nosso projeto. Veja um exemplo de como criar um botão utilizando Chakra UI:
import { Button } from "@chakra-ui/react";
const AtomButton = () => {
return (
<Button colorScheme="teal" size="md">
Clique Aqui
</Button>
);
};
export default AtomButton;
Esse simples componente de botão é um perfeito exemplo de átomo. Ele é uma unidade autônoma e reutilizável, pronta para ser incorporada em componentes maiores.
Avançando um nível, temos as moléculas. As moléculas são combinações de átomos que trabalham juntas como uma unidade coesa. Elas representam uma maior funcionalidade e são fundamentais para a criação de componentes mais complexos.
Por exemplo, um campo de formulário composto por um rótulo (label) e um campo de entrada (input) pode ser considerado uma molécula. Utilizando o Chakra UI, podemos facilmente combinar esses átomos para criar uma molécula funcional:
import { FormControl, FormLabel, Input } from "@chakra-ui/react";
const MoleculeFormField = () => {
return (
<FormControl id="email">
<FormLabel>Email</FormLabel>
<Input type="email" />
</FormControl>
);
};
export default MoleculeFormField;
Aqui, combinamos o FormLabel e o Input para criar uma molécula de campo de formulário. Essa combinação de átomos proporciona uma funcionalidade mais rica e é um passo essencial na criação de interfaces de usuário mais complexas.
Organismos são grupos de moléculas que formam seções distintas da interface. Eles são componentes mais complexos e fornecem uma estrutura mais robusta para a construção de layouts completos. Imagine um cabeçalho de site que inclui um logotipo, um campo de busca, e um conjunto de links de navegação. Esse cabeçalho pode ser visto como um organismo.
Utilizando Next.js e Chakra UI, podemos criar um organismo de cabeçalho:
import { Box, Flex, Input, Link } from "@chakra-ui/react";
const OrganismHeader = () => {
return (
<Box bg="gray.100" p={4}>
<Flex justify="space-between" align="center">
<Box>Logo</Box>
<Input placeholder="Buscar..." width="200px" />
<Flex>
<Link p={2} href="#">
Home
</Link>
<Link p={2} href="#">
Sobre
</Link>
<Link p={2} href="#">
Contato
</Link>
</Flex>
</Flex>
</Box>
);
};
export default OrganismHeader;
Nesse exemplo, combinamos várias moléculas e átomos para criar um organismo de cabeçalho funcional. A flexibilidade do Chakra UI simplifica a construção e o estilo desses componentes complexos.
À medida que continuamos a explorar o Atomic Design, o próximo passo é entender como os organismos se encaixam em templates e, finalmente, em páginas completas. No próximo capítulo, discutiremos como combinar organismos para criar templates flexíveis e reutilizáveis que podem ser aplicados a várias páginas dentro de uma aplicação Next.js.
Além disso, abordaremos como o Chakra UI facilita a criação de temas e estilos consistentes em toda a aplicação, garantindo uma experiência de usuário coesa e visualmente agradável. Fique atento, pois estamos apenas começando a desvendar o poder do Atomic Design em conjunto com Next.js e Chakra UI.
Essa jornada promete transformar a maneira como você constrói interfaces de usuário, tornando o processo mais eficiente e modular. Prepare-se para mergulhar ainda mais fundo e descobrir técnicas avançadas que levarão suas habilidades de desenvolvimento ao próximo nível.
Após compreendermos os princípios do Atomic Design, é hora de mergulharmos na prática e entender como esses conceitos se traduzem em código usando o Next.js e o Chakra UI. Esta seção abordará a criação e a utilização de componentes atômicos em um projeto Next.js, aproveitando as poderosas funcionalidades do Chakra UI para estilização e design de interfaces.
No Atomic Design, os componentes são categorizados em átomos, moléculas, organismos, templates e páginas. Vamos começar pelo nível mais básico: os átomos. Átomos são os blocos de construção fundamentais da nossa aplicação — elementos HTML simples e estilizados, como botões, inputs e ícones.
Vamos criar um botão atômico usando o Chakra UI. Primeiro, certifique-se de que o Chakra UI esteja instalado no seu projeto Next.js.
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
Agora, vamos criar um componente de botão atômico.
// components/atoms/Button.js
import { Button as ChakraButton } from "@chakra-ui/react";
const Button = ({ children, ...props }) => {
return (
<ChakraButton {...props}>
{children}
</ChakraButton>
);
};
export default Button;
Neste exemplo, estamos criando um componente de botão simples que utiliza o Button do Chakra UI. Note que estamos repassando todas as props recebidas para o componente do Chakra UI, o que nos permite aproveitar toda a flexibilidade e opções de estilo que ele oferece.
Moléculas são combinações de átomos que trabalham juntas como uma unidade funcional. Vamos criar um exemplo de uma molécula simples: um campo de formulário com um rótulo e um input.
// components/molecules/FormField.js
import { FormControl, FormLabel, Input } from "@chakra-ui/react";
const FormField = ({ label, ...props }) => {
return (
<FormControl>
<FormLabel>{label}</FormLabel>
<Input {...props} />
</FormControl>
);
};
export default FormField;
Aqui, combinamos átomos como FormLabel e Input do Chakra UI para criar uma molécula reutilizável. Esse campo de formulário pode ser facilmente utilizado em vários lugares da nossa aplicação, mantendo a consistência e simplicidade.
Organismos são grupos complexos de moléculas que formam seções distintas da interface. Um exemplo de organismo poderia ser um card de perfil de usuário que inclui informações do usuário, uma imagem de perfil e botões de ação.
// components/organisms/UserProfileCard.js
import { Box, Image, Text } from "@chakra-ui/react";
import Button from "../atoms/Button";
const UserProfileCard = ({ user }) => {
return (
<Box borderWidth="1px" borderRadius="lg" overflow="hidden">
<Image src={user.profileImage} alt={user.name} />
<Box p="6">
<Text fontWeight="bold" fontSize="xl">
{user.name}
</Text>
<Text mt="2">
{user.bio}
</Text>
<Button mt="4" colorScheme="teal">
Seguir
</Button>
</Box>
</Box>
);
};
export default UserProfileCard;
Neste exemplo, usamos átomos e moléculas para construir um organismo mais complexo. O UserProfileCard combina um Box, Image, Text e o botão atômico que criamos anteriormente.
Com uma boa compreensão de átomos, moléculas e organismos, estamos prontos para avançar para os níveis mais altos do Atomic Design: templates e páginas. No próximo capítulo, exploraremos como esses conceitos se aplicam à construção de layouts completos e páginas usando Next.js e Chakra UI. Veremos como organizar e estruturar nosso projeto para maximizar a reutilização de componentes e a eficiência de desenvolvimento.
Essa jornada de construção de interfaces com Atomic Design e Chakra UI não apenas simplifica o desenvolvimento, mas também garante uma base sólida e escalável para projetos futuros. Continue conosco enquanto mergulhamos ainda mais fundo nessa metodologia poderosa.
Espero que esta seção tenha proporcionado uma compreensão clara de como começar a implementar Atomic Design com Next.js e Chakra UI. No próximo capítulo, vamos unir tudo isso para criar templates e páginas completas, levando nosso conhecimento ao próximo nível. Fique atento!
No capítulo anterior, exploramos os conceitos fundamentais do Atomic Design e como essa metodologia pode nos ajudar a criar interfaces de usuário mais coesas e reutilizáveis. Agora, é hora de colocar a mão na massa e iniciar nosso projeto com Next.js, uma poderosa ferramenta que facilitará nossa jornada na construção de aplicações web rápidas e eficientes.
Antes de começarmos a escrever código, precisamos garantir que nosso ambiente de desenvolvimento esteja configurado corretamente. Para este projeto, vamos utilizar Node.js, um runtime JavaScript que permitirá a execução de código no servidor, e o Next.js, um framework de React que nos dará suporte para renderização no lado do servidor (SSR) e geração de sites estáticos (SSG).
Instalando Node.js e npm:
Se você ainda não tem o Node.js instalado, acesse nodejs.org e baixe a versão recomendada para seu sistema operacional. O instalador incluirá o npm (Node Package Manager), que usaremos para gerenciar dependências.
Criando um Novo Projeto Next.js:
Com o Node.js instalado, podemos criar nosso projeto Next.js. Abra o terminal e execute o seguinte comando:
npx create-next-app nextjs-atomic-chakra
Este comando criará uma nova pasta chamada nextjs-atomic-chakra com a estrutura básica de um projeto Next.js.
cd nextjs-atomic-chakra npm run dev
Se tudo estiver configurado corretamente, você verá uma mensagem no terminal indicando que o servidor está rodando e poderá acessar sua aplicação no navegador, geralmente em http://localhost:3000.
Ao abrir a pasta do projeto, você notará que o Next.js já criou uma estrutura básica para nós. Vamos dar uma olhada nos diretórios e arquivos mais importantes:
pages/: Esta pasta contém os arquivos que representam as páginas da nossa aplicação. Cada arquivo JavaScript ou TypeScript dentro desta pasta automaticamente se torna uma rota. Por exemplo, pages/index.js mapeia para / e pages/about.js mapeia para /about.
public/: Este diretório é destinado a arquivos estáticos como imagens, fontes e outros recursos que não precisam ser processados pelo Webpack.
styles/: Aqui estão os arquivos CSS globais. Embora utilizemos o Chakra UI para a maioria dos nossos estilos, esta pasta ainda será útil para definir estilos globais ou customizações específicas.
components/: Embora não esteja presente por padrão, criaremos esta pasta para armazenar nossos componentes, seguindo a metodologia Atomic Design. Vamos organizar nossos átomos, moléculas, organismos e templates conforme necessário.
Com o ambiente de desenvolvimento configurado e a estrutura básica do projeto em mente, é hora de introduzir o Chakra UI. Chakra UI é uma biblioteca de componentes React que nos permite construir interfaces de usuário modernas e acessíveis com facilidade. Sua filosofia de design orientado por temas facilita a criação de componentes consistentes e reutilizáveis.
Para começar a usar o Chakra UI, precisamos adicioná-lo ao nosso projeto. No terminal, execute:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
Após a instalação, vamos configurar o Chakra UI em nosso projeto. Abra o arquivo pages/_app.js e modifique-o para incluir o ChakraProvider:
import { ChakraProvider } from "@chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
Esta configuração inicializa o Chakra UI em toda a nossa aplicação, permitindo que utilizemos seus componentes e estilos em qualquer parte do projeto.
Com o Chakra UI instalado e configurado, vamos explorar alguns de seus componentes básicos. Existem vários componentes prontos para uso que nos permitem construir interfaces rapidamente, como botões, caixas de texto, ícones e muito mais.
Por exemplo, para adicionar um botão simples à nossa página inicial, podemos modificar pages/index.js:
import { Button } from "@chakra-ui/react";
export default function Home() {
return (
<div>
<h1>Bem-vindo ao Next.js com Atomic Design e Chakra UI</h1>
<Button colorScheme="teal" size="md">Clique aqui</Button>
</div>
);
}
Nesta seção, configuramos nosso ambiente de desenvolvimento, criamos a estrutura básica do projeto e introduzimos o Chakra UI. Nos próximos capítulos, mergulharemos mais fundo na integração do Atomic Design com o Next.js e o Chakra UI, criando componentes reutilizáveis que seguem os princípios dessa metodologia.
Prepare-se para explorar como construir átomos, moléculas e organismos, e veja como podemos criar uma aplicação modular e eficiente. Cada passo nos levará mais perto de dominar o desenvolvimento de interfaces de usuário modernas e escaláveis.
No capítulo anterior, exploramos os conceitos fundamentais do Atomic Design e como ele pode ser uma abordagem poderosa para a construção de interfaces de usuário consistentes e escaláveis. Agora, vamos mergulhar em como integrar esses princípios no contexto de um projeto Next.js, utilizando o Chakra UI como nossa biblioteca de componentes.
Antes de começarmos a construir nossos componentes, é essencial preparar nosso ambiente de desenvolvimento. Se você ainda não configurou um projeto Next.js com Chakra UI, siga os passos abaixo:
npx create-next-app my-nextjs-app cd my-nextjs-app
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
import { ChakraProvider } from "@chakra-ui/react"
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
Com o ambiente configurado, estamos prontos para começar a aplicar os princípios do Atomic Design na construção de nossos componentes.
No Atomic Design, o menor bloco de construção é conhecido como "átomo". Vamos começar criando um átomo simples, um botão personalizado que será usado em várias partes do nosso aplicativo.
Criando o Diretório de Componentes:
Dentro do diretório src, crie uma pasta chamada components, e dentro dela, crie uma subpasta chamada atoms.
Criando o Componente de Botão:
Dentro da pasta atoms, crie um arquivo chamado Button.js e adicione o seguinte código:
import { Button as ChakraButton } from "@chakra-ui/react"
const Button = ({ children, ...props }) => {
return (
<ChakraButton
bg="teal.500"
color="white"
_hover={{ bg: "teal.600" }}
{...props}
>
{children}
</ChakraButton>
)
}
export default Button
import Button from "../components/atoms/Button"
export default function Home() {
return (
<div>
<h1>Bem-vindo ao Meu App Next.js</h1>
<Button onClick={() => alert("Botão clicado!")}>Clique Aqui</Button>
</div>
)
}
Com nossos átomos estabelecidos, podemos agora combiná-los para criar moléculas - componentes um pouco mais complexos que representam pequenas partes funcionais da interface. Vamos criar uma molécula para um formulário de login.
import { Box, Input, Stack } from "@chakra-ui/react"
import Button from "../atoms/Button"
const LoginForm = () => {
return (
<Box bg="gray.100" p={4} borderRadius="md">
<Stack spacing={3}>
<Input placeholder="Email" type="email" />
<Input placeholder="Senha" type="password" />
<Button onClick={() => alert("Login realizado!")}>Entrar</Button>
</Stack>
</Box>
)
}
export default LoginForm
import LoginForm from "../components/molecules/LoginForm"
export default function Home() {
return (
<div>
<h1>Bem-vindo ao Meu App Next.js</h1>
<LoginForm />
</div>
)
}
Neste ponto, já abordamos a criação de átomos e moléculas utilizando Next.js e Chakra UI. No entanto, há muito mais para explorar. No próximo capítulo, mergulharemos na criação de organismos - componentes ainda mais complexos que combinam múltiplas moléculas e átomos para formar seções significativas da interface do usuário.
Além disso, discutiremos como gerenciar o estado desses componentes de forma eficiente, garantindo que nossa aplicação permaneça responsiva e fácil de manter.
Continue conosco enquanto exploramos mais sobre Atomic Design e como dominar a arte de construir interfaces de usuário poderosas e escaláveis com Next.js e Chakra UI.
Capítulo 3: Integração do Atomic Design com Next.js e Chakra UI
No final da seção anterior, discutimos a importância de uma estrutura bem definida e como o Atomic Design nos ajuda a construir interfaces de usuário de maneira escalável e sustentável. Agora, vamos mergulhar na criação de nossos primeiros componentes atômicos usando Chakra UI no ambiente Next.js.
3.1 Introdução ao Chakra UI
Para aqueles que estão se juntando a nós agora, Chakra UI é uma biblioteca de componentes React que facilita a criação de interfaces acessíveis e responsivas. Com sua abordagem estilística baseada em temas, Chakra UI se encaixa perfeitamente com os princípios do Atomic Design, permitindo que estilizamos nossos componentes de forma consistente e reutilizável.
3.2 Configurando o Chakra UI no Next.js
Antes de começarmos a criar nossos componentes, precisamos configurar o Chakra UI em nosso projeto Next.js. Se você ainda não fez isso, siga os passos abaixo:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
import { ChakraProvider } from "@chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
colors: {
primary: {
100: "#E5FCF1",
200: "#27EF96",
300: "#10DE82",
400: "#0EBE6F",
500: "#0CA25F",
600: "#0A864F",
700: "#086F42",
800: "#075C37",
900: "#06452C",
},
},
});
export default theme;
Atualize o provedor de tema em _app.js para usar esse tema customizado:
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import theme from "../theme";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
3.3 Criando Atoms
Atoms são os blocos de construção mais básicos no Atomic Design. Eles representam os menores componentes da interface, como botões, inputs, e ícones.
Vamos criar nosso primeiro átomo: um botão estilizado.
import { Button as ChakraButton } from "@chakra-ui/react";
const Button = ({ children, ...props }) => {
return (
<ChakraButton
bg="primary.500"
color="white"
_hover={{ bg: "primary.600" }}
{...props}
>
{children}
</ChakraButton>
);
};
export default Button;
import Button from "../components/atoms/Button";
const HomePage = () => {
return (
<div>
<Button onClick={() => alert("Botão clicado!")}>Clique Aqui</Button>
</div>
);
};
export default HomePage;
3.4 Criando Molecules
Molecules são compostos por dois ou mais átomos que funcionam juntos como uma unidade. Vamos criar uma molécula simples: um campo de entrada com um botão de envio.
import { Input, Flex } from "@chakra-ui/react";
import Button from "../atoms/Button";
const InputWithButton = ({ placeholder, buttonText, onClick }) => {
return (
<Flex>
<Input placeholder={placeholder} />
<Button onClick={onClick}>{buttonText}</Button>
</Flex>
);
};
export default InputWithButton;
import InputWithButton from "../components/molecules/InputWithButton";
const FormPage = () => {
return (
<div>
<InputWithButton
placeholder="Digite algo..."
buttonText="Enviar"
onClick={() => alert("Enviado!")}
/>
</div>
);
};
export default FormPage;
3.5 Olhando para o Futuro
Até agora, abordamos os fundamentos de criar átomos e moléculas com Chakra UI em um projeto Next.js. No próximo capítulo, exploraremos a criação de organismos, templates e páginas completas, levando nossos conhecimentos de Atomic Design a um novo patamar. Além disso, discutiremos práticas recomendadas para manter nossos componentes acessíveis e otimizados.
Prepare-se para mergulhar ainda mais fundo na construção de interfaces de usuário robustas e escaláveis com Next.js, Atomic Design e Chakra UI!
undefined
Como vimos nas seções anteriores, Next.js é uma poderosa ferramenta para a construção de aplicações web modernas, enquanto o Atomic Design é uma metodologia que nos permite criar interfaces de usuário de maneira mais organizada e escalável. Adicionalmente, o Chakra UI fornece uma biblioteca de componentes estilizados que facilitam a implementação de designs consistentes e acessíveis.
Neste capítulo, começaremos a integrar esses três pilares da nossa abordagem de desenvolvimento: Next.js, Atomic Design e Chakra UI. A combinação desses elementos não só melhora a produtividade da equipe de desenvolvimento, mas também garante que o produto final seja robusto, escalável e visualmente agradável.
Antes de mergulharmos na integração prática, é crucial revisitar rapidamente os princípios do Atomic Design. Essa metodologia foi proposta por Brad Frost e divide a interface do usuário em cinco níveis principais:
O Next.js vem com uma série de funcionalidades que o tornam uma escolha ideal para aplicações baseadas em Atomic Design. Ele oferece:
Chakra UI é uma biblioteca de componentes React que adota uma filosofia de design sistemático. Ela oferece:
Para começar nossa jornada de integração, vamos configurar um novo projeto Next.js com Chakra UI. Siga os passos abaixo para criar e configurar nosso ambiente de desenvolvimento:
npx create-next-app nextjs-atomic-chakra cd nextjs-atomic-chakra
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
import { ChakraProvider } from "@chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
Com essas configurações iniciais, estamos prontos para começar a explorar como podemos implementar o Atomic Design em nosso projeto Next.js utilizando os componentes estilizados do Chakra UI. No decorrer deste capítulo, veremos exemplos práticos de como construir átomos, moléculas e organismos, integrando-os de forma eficiente em templates e páginas.
No próximo capítulo, aprofundaremos a criação de átomos e moléculas com o Chakra UI, e como podemos usar essas unidades básicas para construir interfaces complexas e reutilizáveis. Além disso, exploraremos as melhores práticas para manter nosso código organizado e fácil de manter.
Fique conosco enquanto desvendamos as infinitas possibilidades de criar interfaces web modernas e eficientes, combinando o poder do Next.js, a metodologia do Atomic Design e a flexibilidade do Chakra UI.
No capítulo anterior, discutimos os fundamentos do Atomic Design e como essa metodologia pode transformar a forma como pensamos e construímos interfaces de usuário. Agora, vamos explorar como podemos aplicar esses conceitos dentro do ecossistema do Next.js, utilizando o Chakra UI como nossa biblioteca de componentes. Este capítulo será o ponto de partida para integrar esses três pilares de forma coesa, garantindo uma abordagem modular e escalável no desenvolvimento de aplicações web.
O primeiro passo é entender como o Atomic Design nos ajuda a criar uma hierarquia clara e organizada de componentes. No Atomic Design, começamos com os átomos, que são os blocos mais básicos de nossa interface. Estes átomos podem ser elementos HTML padrão, como botões, inputs e ícones. Em seguida, combinamos esses átomos para formar moléculas, organismos, templates e, finalmente, páginas completas.
No contexto do Next.js e Chakra UI, um átomo pode ser um simples botão estilizado utilizando os componentes do Chakra UI. Vamos criar um exemplo básico:
// components/atoms/Button.js
import { Button as ChakraButton } from '@chakra-ui/react';
const Button = ({ children, ...props }) => {
return (
<ChakraButton {...props}>
{children}
</ChakraButton>
);
};
export default Button;
Aqui temos um botão básico que pode ser reutilizado em várias partes da aplicação. Esse botão é estilizado utilizando o Chakra UI, aproveitando sua flexibilidade e personalização.
Agora que temos nossos átomos, podemos começar a combiná-los para criar moléculas. Vamos criar um formulário de login simples como exemplo de molécula:
// components/molecules/LoginForm.js
import { Box, Input, Stack } from '@chakra-ui/react';
import Button from '../atoms/Button';
const LoginForm = () => {
return (
<Box as="form">
<Stack spacing={3}>
<Input placeholder="Email" type="email" />
<Input placeholder="Password" type="password" />
<Button type="submit" colorScheme="blue">Login</Button>
</Stack>
</Box>
);
};
export default LoginForm;
Neste exemplo, combinamos átomos de input e botão para criar uma molécula de formulário de login. Isso nos permite reutilizar essa molécula em diferentes partes da aplicação, mantendo a consistência e reduzindo a redundância de código.
A próxima etapa é combinar moléculas para formar organismos. Um organismo pode ser um cabeçalho de página, um card de produto ou qualquer outra estrutura mais complexa.
// components/organisms/Header.js
import { Box, Flex, Heading } from '@chakra-ui/react';
import LoginForm from '../molecules/LoginForm';
const Header = () => {
return (
<Box as="header" bg="gray.800" color="white" py={4}>
<Flex justify="space-between" align="center" maxW="1200px" mx="auto">
<Heading as="h1" size="lg">
My Website
</Heading>
<LoginForm />
</Flex>
</Box>
);
};
export default Header;
No exemplo acima, o cabeçalho da página é um organismo que combina o formulário de login (uma molécula) com outros elementos, como o título do site. Isso demonstra como podemos construir estruturas mais complexas a partir de componentes menores e reutilizáveis.
Depois de criar nossos átomos, moléculas e organismos, estamos prontos para montar templates e páginas completas. Os templates são layouts de página que utilizam organismos para estruturar a interface, enquanto as páginas são instâncias desses templates com dados específicos.
// pages/index.js
import { Box } from '@chakra-ui/react';
import Header from '../components/organisms/Header';
const HomePage = () => {
return (
<Box>
<Header />
<Box as="main" maxW="1200px" mx="auto" py={8}>
{/* Conteúdo da página */}
</Box>
</Box>
);
};
export default HomePage;
Neste exemplo, a HomePage utiliza o organismo Header e define a estrutura principal da página. Com isso, conseguimos uma aplicação modular, onde cada parte da interface é facilmente gerenciável e reutilizável.
Agora que compreendemos como estruturar componentes utilizando o Atomic Design com Next.js e Chakra UI, vamos explorar nos próximos capítulos como podemos otimizar nossa aplicação, gerenciar estado global e implementar melhores práticas de acessibilidade e performance. Fique atento, pois vamos mergulhar ainda mais fundo na criação de aplicações web robustas e escaláveis.
Após compreendermos os fundamentos do Atomic Design e como ele se integra perfeitamente com o Next.js, vamos agora nos aprofundar na estrutura de componentes e em como organizá-los eficientemente utilizando o Chakra UI. Esta seção é crucial, pois a forma como estruturamos nossos componentes pode afetar significativamente a manutenibilidade e escalabilidade do projeto.
Antes de avançarmos, é importante relembrar brevemente os conceitos de Atomic Design. Como discutimos anteriormente, Atomic Design é uma metodologia que nos ajuda a criar sistemas de design mais consistentes e reutilizáveis. Ele divide a interface de usuário em cinco níveis distintos:
O Chakra UI facilita a implementação do Atomic Design, fornecendo componentes acessíveis e estilizados. Vamos começar criando alguns átomos básicos utilizando o Chakra UI.
1. Criando Átomos
Os átomos são os blocos de construção fundamentais. No Chakra UI, podemos criar átomos com seus componentes básicos, como Button e Input.
// components/atoms/Button.js
import { Button as ChakraButton } from "@chakra-ui/react";
const Button = ({ children, ...props }) => {
return <ChakraButton {...props}>{children}</ChakraButton>;
};
export default Button;
// components/atoms/Input.js
import { Input as ChakraInput } from "@chakra-ui/react";
const Input = (props) => {
return <ChakraInput {...props} />;
};
export default Input;
2. Criando Moléculas
Agora, vamos combinar esses átomos para criar moléculas. Um exemplo clássico é um campo de formulário com um label.
// components/molecules/FormField.js
import { FormControl, FormLabel } from "@chakra-ui/react";
import Input from "../atoms/Input";
const FormField = ({ label, ...props }) => {
return (
<FormControl>
<FormLabel>{label}</FormLabel>
<Input {...props} />
</FormControl>
);
};
export default FormField;
3. Criando Organismos
Os organismos são componentes mais complexos, combinando várias moléculas e átomos. Um exemplo seria um formulário de login.
// components/organisms/LoginForm.js
import { Box, Button } from "@chakra-ui/react";
import FormField from "../molecules/FormField";
const LoginForm = () => {
return (
<Box as="form">
<FormField label="Email" type="email" placeholder="Digite seu email" />
<FormField label="Senha" type="password" placeholder="Digite sua senha" />
<Button mt={4} type="submit">
Entrar
</Button>
</Box>
);
};
export default LoginForm;
Para manter o projeto organizado, é essencial seguir uma estrutura de pastas clara. Uma estrutura recomendada para projetos utilizando Next.js com Atomic Design e Chakra UI pode ser:
/components /atoms /molecules /organisms /templates /pages /pages /index.js /about.js /styles /theme.js /utils /helpers.js
Nesta estrutura, cada tipo de componente tem sua própria pasta, facilitando a localização e manutenção do código.
Integrar nossos componentes estruturados com Next.js é simples. No arquivo de página, podemos importar e utilizar nossos componentes diretamente.
// pages/index.js
import { Box } from "@chakra-ui/react";
import LoginForm from "../components/organisms/LoginForm";
const HomePage = () => {
return (
<Box p={4}>
<LoginForm />
</Box>
);
};
export default HomePage;
A adoção do Atomic Design com Chakra UI em um projeto Next.js traz inúmeros benefícios:
在下一章中，我們將探索如何自訂 Chakra UI 主題以與您專案的視覺形象保持一致。我們也了解如何建立自訂元件來滿足特定需求，同時保持一致性和可存取性。
這段旅程才剛開始。隨著我們繼續前進，您將看到如何結合這些實踐來創建強大、優雅的應用程式。請繼續關注並繼續探索 Next.js、Atomic Design 和 Chakra UI 的可能性。
在上一章中，我們探討了 Next.js 的基礎知識，以及這個強大的工具如何讓您更輕鬆地創建現代、高效的 Web 應用程式。現在，是時候深入探討介面設計中最具變革性的概念之一：原子設計。本節將介紹這個概念，為其在 Next.js 中開發可重複使用元件時與 Chakra UI 的實際應用奠定基礎。
原子設計由 Brad Frost 提出，是一種受化學啟發的方法，透過分層和模組化方法創建使用者介面。原子設計鼓勵我們將介面分解為其最基本的元素，並從那裡建立更複雜的組件，而不是將頁面和部分視為獨立的組件。這種方法不僅促進了重複使用和一致性，而且有利於專案維護和可擴展性。
讓我們先了解原子設計的五個基本層次：
原子：原子是介面最基本的建構塊，例如按鈕、輸入、標籤和圖示。它們不會被分解成更小的部分並代表單獨的 HTML 元素。
分子：分子是形成功能單元的原子的組合。例如，由輸入、標籤和提交按鈕組成的搜尋欄位。
有機體：有機體是一群分子，它們共同作用形成界面的獨特部分。一個典型的例子是網站標題，其中可以包含徽標、導覽列和搜尋欄位。
模板：模板是顯示有機體如何組合在一起的頁面佈局，但仍然足夠抽象，不特定於內容。它們充當最後幾頁的骨架。
頁：頁面是模板的具體實例，填充了特定內容。它們代表用戶看到並與之互動的最終產品。
透過採用原子設計，我們不僅使應用程式的結構更加清晰，而且還創建了更強大和靈活的設計系統。現在我們了解了原子設計背後的理論，讓我們看看如何使用 Chakra UI 和 Next.js 將其應用到實務上。
在本章的下一部分中，我們將探討 Chakra UI（一個可存取且高度可自訂的 React 元件庫）如何與原子設計的原則完美契合。我們將了解如何使用 Chakra UI 創建高效的原子和分子，這將成為更複雜生物體的基礎。
準備好改變您的思維方式和開發使用者介面，創建不僅可以解決特定問題，而且可以和諧地整合到更大的系統中的組件。我們將透過實際範例和技巧繼續我們的旅程，以確保您可以立即將這些概念應用到日常開發中。
在下一章中，我們將探索 Chakra UI 與 Next.js 的集成，創建簡單和高級的元件，這些元件將構成我們應用程式的基礎。請繼續關注，因為我們才剛開始釋放這種強大方法的潛力。
No capítulo anterior, introduzimos o conceito de Atomic Design e discutimos como ele nos ajuda a criar interfaces de usuário modulares e reutilizáveis. Agora, vamos mergulhar mais fundo em um dos níveis mais fundamentais do Atomic Design: os Átomos. Utilizando o poder do Chakra UI, veremos como podemos construir esses blocos de construção essenciais de maneira eficiente e elegante.
No contexto do Atomic Design, os átomos representam os elementos mais básicos e indivisíveis da interface do usuário. Eles são os blocos fundamentais a partir dos quais tudo o mais é construído. Exemplos de átomos incluem botões, inputs de texto, ícones, e tipografia básica.
O Chakra UI, uma biblioteca de componentes React acessível e altamente customizável, oferece uma vasta gama de componentes básicos que podemos utilizar como átomos. Vamos explorar alguns dos componentes mais comuns e como podemos configurá-los para atender às nossas necessidades.
import { Button } from "@chakra-ui/react";
const PrimaryButton = () => (
<Button colorScheme="blue">Clique Aqui</Button>
);
const SecondaryButton = () => (
<Button colorScheme="gray">Cancelar</Button>
);
const DisabledButton = () => (
<Button colorScheme="blue" isDisabled>
Desabilitado
</Button>
);
Como podemos ver, o Chakra UI facilita a criação de botões com diferentes estilos e estados através de propriedades simples.
import { Input } from "@chakra-ui/react";
const TextInput = () => (
<Input placeholder="Digite aqui..." />
);
Podemos adicionar validações, ícones dentro do input e muito mais, dependendo das nossas necessidades.
import { Text, Heading, Link } from "@chakra-ui/react";
const TypographyExample = () => (
<>
<Heading as="h1" size="2xl">Título Principal</Heading>
<Text fontSize="lg">Este é um parágrafo de exemplo.</Text>
<Link href="https://example.com">Clique aqui para saber mais</Link>
</>
);
Uma das maiores vantagens do Chakra UI é a sua capacidade de ser customizado através de temas. Podemos definir um tema global que aplica estilos consistentes a todos os componentes atômicos. Isso garante uma aparência coesa em toda a nossa aplicação.
import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
colors: {
brand: {
100: "#f7fafc",
900: "#1a202c",
},
},
fonts: {
heading: "Arial, sans-serif",
body: "Arial, sans-serif",
},
});
export default theme;
Embora tenhamos nos concentrado em como criar e customizar átomos usando o Chakra UI, é importante lembrar que estamos construindo uma aplicação Next.js. A integração é simples e direta. Podemos configurar o Chakra UI no nosso aplicativo Next.js utilizando o ChakraProvider.
import { ChakraProvider } from "@chakra-ui/react";
import theme from "../path/to/theme";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
Agora que entendemos como criar e estilizar átomos utilizando o Chakra UI, estamos prontos para avançar para o próximo nível do Atomic Design: os Moléculas. No próximo capítulo, exploraremos como combinar esses átomos para formar componentes mais complexos e funcionais, mantendo a modularidade e reusabilidade que são fundamentais para um design eficiente.
Acompanhe-nos no próximo capítulo, onde começaremos a ver a verdadeira magia da componentização avançada com Atomic Design e Chakra UI!
Após discutirmos os fundamentos do Atomic Design e como podemos utilizá-lo para criar uma estrutura de componentes organizada e eficiente, é hora de explorarmos como o Chakra UI se encaixa nessa abordagem. O Chakra UI não só facilita a criação de interfaces acessíveis e responsivas, mas também se alinha perfeitamente com os princípios do Atomic Design, permitindo-nos criar componentes reutilizáveis de forma mais eficiente.
No contexto do Atomic Design, componentes atômicos são os blocos mais básicos da nossa interface. Eles são pequenos, focados e geralmente não têm dependências de outros componentes. Exemplos comuns de componentes atômicos incluem botões, inputs e ícones.
Com o Chakra UI, a criação desses componentes se torna intuitiva. Comecemos com um exemplo simples: um botão. O Chakra UI fornece um componente
import { Button } from "@chakra-ui/react";
const PrimaryButton = () => {
return <Button colorScheme="teal">Clique Aqui</Button>;
};
Veja como o uso do Chakra UI simplifica a criação de um botão estilizado. Podemos personalizar ainda mais esse botão com propriedades adicionais, mantendo a simplicidade e a consistência visual, elementos essenciais no Atomic Design.
Uma vez que temos nossos componentes atômicos definidos, o próximo passo é combiná-los para formar moléculas. Moléculas são grupos de componentes atômicos que trabalham juntos como uma unidade funcional.
Vamos criar um exemplo de molécula: um formulário de login. Esse formulário pode ser composto por dois inputs (para o nome de usuário e senha) e um botão de submissão.
import { Box, Button, Input, Stack } from "@chakra-ui/react";
const LoginForm = () => {
return (
<Box width="300px" margin="auto" padding="4" border="1px solid" borderColor="gray.200" borderRadius="md">
<Stack spacing={3}>
<Input placeholder="Nome de usuário" />
<Input placeholder="Senha" type="password" />
<Button colorScheme="teal">Entrar</Button>
</Stack>
</Box>
);
};
Neste exemplo, utilizamos componentes atômicos do Chakra UI (como e
Avançando para o próximo nível de abstração, temos os organismos. Organismos são componentes relativamente complexos, compostos por várias moléculas e átomos. Eles formam seções significativas da interface do usuário.
Vamos criar um organismo para a nossa aplicação: um painel de controle simples que inclui o formulário de login (nossa molécula) e algumas informações adicionais.
import { Box, Heading, Text, VStack } from "@chakra-ui/react";
import LoginForm from "./LoginForm";
const Dashboard = () => {
return (
<Box padding="8">
<VStack spacing={6}>
<Heading as="h1" size="xl">Painel de Controle</Heading>
<Text>Bem-vindo ao seu painel de controle. Por favor, faça login para continuar.</Text>
<LoginForm />
</VStack>
</Box>
);
};
No exemplo acima, combinamos o nosso formulário de login com outros componentes do Chakra UI para criar um painel de controle coeso. Utilizamos
Ao integrar o Chakra UI com a metodologia Atomic Design, conseguimos vários benefícios:
Nesta seção, vimos como integrar o Chakra UI com o Atomic Design para criar uma estrutura de componentes bem organizada e eficiente. No próximo capítulo, exploraremos como podemos levar isso adiante criando um Design System completo. Veremos como documentar e manter nossos componentes, garantindo que nossa aplicação permaneça coerente e fácil de usar à medida que cresce.
Prepare-se para mergulhar ainda mais fundo no mundo do desenvolvimento frontend, onde organização e eficiência caminham lado a lado com a criatividade e a inovação. Continuaremos a construir sobre a base que estabelecemos até agora, sempre com o objetivo de tornar o desenvolvimento web mais acessível e prazeroso.
以上是Next.js 變得簡單：原子設計與 Chakra UI的詳細內容。更多資訊請關注PHP中文網其他相關文章！
