Trello Clone - phần 1 - Styled Components

Styled-Components là một thư viện giúp bạn tổ chức và quản lý styles trong các dự án sử dụng React tuân theo đề xuất từ Facebook.
Trello Clone - phần 1 - Styled Components
Trello Clone - phần 1 - Styled Components

Có nhiều cách thực hiện việc xây dựng layout cho các dự án sử dụng React.

  • Cách truyền thống: chúng ta import các files CSS qua các thẻ link. Hầu hết mọi người đều sử dụng cách này. Tuy nhiên, nếu bạn muốn đóng gói một số styles nào đó chỉ có thể được sử dụng riêng cho một số components thì hơi khó thực hiện nhé.
  • Style trực tiếp cho các components thông qua props style. Cách này cực kỳ gây rối và dễ nhầm lẫn cho codebase cũng như khó tái sử dụng.
import { Column } from './Column'
import { Card } from './Card'
import { AppContainerView } from '../styled/AppContainerView'
import React from 'react'

export const Example = () => {
  return (
    <AppContainerView className="app-container">
      <div style={{
        display: 'flex',
        flexFlow: 'column nowrap',
      }}>
        <Column text="To Do">
          <Card text="Write Post Everyday" />
          <Card text="Wake up at 6 AM" />
          <Card text="Go to work" />
        </Column>
      </div>
    </AppContainerView>
  )
}
  • Sử dụng các thư viện styling bên ngoài.

Để hạn chế các tác động không mong muốn lẫn nhau giữa các components và libraries, Facebook đề xuất styles của các components nên được đóng gói tách biệt và chỉ có tác dụng trong phạm vi component đó.

 

Styled Components

Styled-Components là một thư viện giúp bạn tổ chức và quản lý styles trong các dự án sử dụng React tuân theo đề xuất từ Facebook. Mục tiêu chủ yếu của nó là giữ styles của các components trong React gắn liền với chính các components đó. Styled-Components cung cấp một interface rõ ràng và dễ sử dụng cho cả React và React Native. Nó không chỉ thay đổi quá trình phát triển các components trong React mà còn thay đổi cả lối tư duy trong việc xây dựng styles cho các components đó.

Trello là một ứng dụng giúp chúng ta dễ dàng ghi chú cũng như lên kế hoạch thực hiện các công việc hằng ngày. Chắc hẳn các bạn ai cũng đều biết nó rồi đúng không? ^_^

Chúng ta hãy cùng nhau thử clone ứng dụng Trello này với React - TypeScriptStyled-Components nhé. 

trello-clone-demo.jpg

Hình demo thôi, không được như vậy đâu =)))

 

Khởi tạo ứng dụng

Để đơn giản, chúng ta hãy bắt đầu bằng create-react-app nhé.

# Sử dụng npx
npx create-react-app trello-clone --template typescript

# Hoặc máy bạn đã cài đặt yarn
yarn create react-app trello-clone --template typescript

cd trello-clone

Các đoạn hướng dẫn từ lúc này trở đi mình sẽ chỉ dùng yarn thôi nhé.

 

Cài đặt styled-components

yarn add styled-components

Chúng ta cũng cần cài đặt thêm bộ khai báo kiểu cho styled-components, nếu không, TypeScript sẽ báo lỗi.

yarn add @types/styled-components

 

Style cho AppContainer

Chúng ta cần một layout chứa danh sách các cột được sắp xếp theo chiều ngang. Ở đây mình sử dụng flexbox.

# src/styled/AppContainerView.tsx

import styled from 'styled-components'

export const AppContainerView = styled.div`
  align-items: flex-start;
  background-color: #3179ba;
  display: flex;
  flex-direction: row;
  height: 100vh;
  padding: 20px;
  width: 100%;
  overflow: auto;
`

Thử gọi nó trong App xem sao.

# src/App.tsx

import React from 'react'
import './App.css'
import { AppContainerView } from './styled/AppContainerView'

const App = () => {
  return (
    <AppContainerView>
      Columns will go here
    </AppContainerView>
  )
}

export default App

Chạy thử cái

yarn start

 

Xấu vl :)))

step-1.jpg

 

Chúng ta tiếp tục tạo thêm một số styled views như sau:

# src/styled/CardContainerView.tsx

import styled from 'styled-components'

export const CardContainerView = styled.div`
  background-color: #fff;
  cursor: pointer;
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
  max-width: 300px;
  border-radius: 3px;
  box-shadow: #091e4240 0 1px 0 0;
`
# src/styled/ColumnContainerView.tsx

import styled from 'styled-components'

export const ColumnContainerView = styled.div`
  background-color: #ebecf0;
  width: 300px;
  min-height: 40px;
  margin-right: 20px;
  border-radius: 3px;
  padding: 8px 8px;
  flex-grow: 0;
`
# src/styled/ColumnTitleView.tsx

import styled from 'styled-components'

export const ColumnTitleView = styled.div`
  padding: 6px 16px 12px;
  font-weight: bold;
`

 

Tạo ColumnCard

# src/components/Column.tsx

import { ColumnContainerView } from '../styled/ColumnContainerView'
import { ColumnTitleView } from '../styled/ColumnTitleView'
import React from 'react'

interface ColumnProps {
  text?: string
}

export const Column = ({
  text,
  children,
}: React.PropsWithChildren<ColumnProps>) => {
  return (
    <ColumnContainerView>
      <ColumnTitleView>{text}</ColumnTitleView>
      {children}
    </ColumnContainerView>
  )
}

Để render các children components bên trong Column, chúng ta cần xác định kiểu cho props truyền vào ColumnReact.PropsWithChildren.

# src/components/Card.tsx

import { CardContainerView } from '../styled/CardContainerView'

interface CardProps {
  text: string
}

export const Card = ({ text }: CardProps) => {
  return <CardContainerView>{text}</CardContainerView>
}

 

Giờ cập nhật lại file App.tsx rồi chạy thử nhé:

# src/App.tsx

import React from 'react'
import './App.css'
import { AppContainerView } from './styled/AppContainerView'
import { Column } from './components/Column'
import { Card } from './components/Card'

const App = () => {
  return (
    <AppContainerView>
      <Column text="To Do">
        <Card text="Write Post Everyday" />
        <Card text="Wake up at 6 AM" />
        <Card text="Go to work" />
      </Column>
      <Column text="In Progress">
        <Card text="Learn React" />
        <Card text="Learn Typescript" />
      </Column>
      <Column text="Done">
        <Card text="Have breakfast" />
      </Column>
    </AppContainerView>
  )
}

export default App

 

Và đây là kết quả:

step-2.jpg

Đỡ hơn rồi ha. Ờ mây zing gút chóp em :)))

amazing-good-job.jpg

 

Tạm kết thúc ở đây nhé các bạn.

Bài viết tới mình sẽ hướng dẫn các bạn các interactions với ứng dụng như: thêm - sửa - xóa Column cũng như Card.

Cám ơn các bạn đã theo dõi và ủng hộ.

Comments

Mục lục

Bài viết nổi bật

PHP là ngôn ngữ được sử dụng rộng rãi nhất trên thế giới trong lập trình web. Nó cũng bị ghét nhất. Nhưng tại sao nhiều developer lại ghét nó đến vậy? Hôm nay chúng ta hãy cùng tìm hiểu lý do xem chúng có thuyết phục không nhé ^_^
Ở bài viết này mình sẽ hướng dẫn bạn bắt đầu xây dựng một ứng dụng HMVC với Laravel, và tận dụng sức mạnh của Composer khi quản lí modules.
Có khá nhiều bạn đã yêu cầu mình một bài viết về Repository Design Pattern. Vậy mục đích của nó là gì? Nó có thực sự cần thiết cho ứng dụng của bạn hay không? Những điểm mạnh, điểm yếu của nó là gì? Chúng ta cùng đi sâu tìm hiểu qua bài viết này nhé.
Trong quá trình làm việc với Laravel Eloquent ORM, chắc hẳn các bạn từng thực hiện khá nhiều tác vụ lặp đi lặp lại - mà bạn không hề biết Laravel đã hỗ trợ sẵn. Thông qua vài mẹo và thủ thuật nhỏ trong bài viết này, mình hi vọng sẽ giúp các bạn giảm bớt sự phức tạp khi viết code cũng như bớt nhàm chán khi thực hiện các tác vụ lặp đi lặp lại theo cách thông thường.
Như đã được thông báo vào năm 2018, React Native đã và đang được đội ngũ phát triển của Facebook nỗ lực tái kiến trúc nhằm giúp nền tảng này trở nên mạnh mẽ hơn và giải quyết một số vấn đề phổ biến mà các nhà phát triển đã gặp phải trong vài năm qua.

Related posts

Redux là một framework quản lý state dựa trên ý tưởng: tất cả các state của ứng dụng sẽ được lưu xuống một global state và sử dụng các reducer function để tương tác với chúng.
Decorators trong Typescript
1102
Các bạn dev nào từng làm Angular chắc sẽ khá quen thuộc với Decorators đúng không? Nhưng bạn thật sự đã hiểu rõ về nó hay chưa? Chúng ta hãy cùng nhau ôn bài một tí nhé ^_^
PHP là ngôn ngữ được sử dụng rộng rãi nhất trên thế giới trong lập trình web. Nó cũng bị ghét nhất. Nhưng tại sao nhiều developer lại ghét nó đến vậy? Hôm nay chúng ta hãy cùng tìm hiểu lý do xem chúng có thuyết phục không nhé ^_^
Là developer, chúng ta luôn tìm cách để tiết kiệm thời gian cho các dự án của mình. Đó là lý do tại sao các thư viện được tạo ra để giảm bớt các khó khăn khi triển khai những thứ lặp đi lặp lại. Với các frontend framework như React, việc chia sẻ chức năng chung cho các dự án khác nhau trở nên dễ dàng hơn bao giờ hết.
Snappy là một thư viện PHP cho phép tạo các thumnails, snapshots và PDF từ URL hoặc trang HTML. Tác giả Barryvdh đã viết thư viện Laravel Snappy giúp việc tích hợp với Laravel dễ dàng hơn.
Bạn có thể sử dụng tính năng kiểm tra kiểu dữ liệu của Typescript để xác định các interface cho các components, nhằm chắc chắn rằng component của bạn chỉ nhận được các thông tin đầu vào chính xác.
Bài viết này cung cấp một cái nhìn tổng quan ngắn gọn về TypeScript, tập trung vào hệ thống kiểu dữ liệu của nó.
Hooks là một tính năng bổ sung mới từ React 16.8 trở đi. Chúng cho phép bạn sử dụng State và các tính năng khác của React mà không cần viết một class.
Giới thiệu series react
601
Một vài kiến thức cơ bản cũng như nâng cao mà mình sẽ tổng hợp lại trong quá trình làm việc cũng như self learning
JWT Tokens là một cách thức lưu trữ thông tin xác thực hiệu quả, nhưng làm cách nào để chúng ta có thể giúp chúng an toàn hơn? Có 2 cách thường dùng để lưu trữ JWT Tokens là LocalStorage và Cookies. Bây giờ chúng ta sẽ bắt đầu "mổ xẻ" các ưu - nhược điểm của mỗi loại nhé.
Flexbox toàn tập
1428
Bài viết này sẽ hướng dẫn cho bạn mọi thứ về flexbox, bao gồm tất cả các thuộc tính cho phần tử cha (flex container) và phần tử con (flex items).
Như đã được thông báo vào năm 2018, React Native đã và đang được đội ngũ phát triển của Facebook nỗ lực tái kiến trúc nhằm giúp nền tảng này trở nên mạnh mẽ hơn và giải quyết một số vấn đề phổ biến mà các nhà phát triển đã gặp phải trong vài năm qua.

Tin mới nhất

Redux là một framework quản lý state dựa trên ý tưởng: tất cả các state của ứng dụng sẽ được lưu xuống một global state và sử dụng các reducer function để tương tác với chúng.
Styled-Components là một thư viện giúp bạn tổ chức và quản lý styles trong các dự án sử dụng React tuân theo đề xuất từ Facebook.
Decorators trong Typescript
1102
Các bạn dev nào từng làm Angular chắc sẽ khá quen thuộc với Decorators đúng không? Nhưng bạn thật sự đã hiểu rõ về nó hay chưa? Chúng ta hãy cùng nhau ôn bài một tí nhé ^_^
PHP là ngôn ngữ được sử dụng rộng rãi nhất trên thế giới trong lập trình web. Nó cũng bị ghét nhất. Nhưng tại sao nhiều developer lại ghét nó đến vậy? Hôm nay chúng ta hãy cùng tìm hiểu lý do xem chúng có thuyết phục không nhé ^_^
Là developer, chúng ta luôn tìm cách để tiết kiệm thời gian cho các dự án của mình. Đó là lý do tại sao các thư viện được tạo ra để giảm bớt các khó khăn khi triển khai những thứ lặp đi lặp lại. Với các frontend framework như React, việc chia sẻ chức năng chung cho các dự án khác nhau trở nên dễ dàng hơn bao giờ hết.
Snappy là một thư viện PHP cho phép tạo các thumnails, snapshots và PDF từ URL hoặc trang HTML. Tác giả Barryvdh đã viết thư viện Laravel Snappy giúp việc tích hợp với Laravel dễ dàng hơn.
IRAC (Issue - Rule - Analysis - Conclusion) là một phương pháp phổ biến và quen thuộc với sinh viên luật và dân luật nói chung. Cá nhân mình thấy phương pháp này khá hay và hoàn toàn có thể áp dụng vào bất cứ công việc hoặc ngành nghề nào.
Bạn có thể sử dụng tính năng kiểm tra kiểu dữ liệu của Typescript để xác định các interface cho các components, nhằm chắc chắn rằng component của bạn chỉ nhận được các thông tin đầu vào chính xác.
Bài viết này cung cấp một cái nhìn tổng quan ngắn gọn về TypeScript, tập trung vào hệ thống kiểu dữ liệu của nó.
Hooks là một tính năng bổ sung mới từ React 16.8 trở đi. Chúng cho phép bạn sử dụng State và các tính năng khác của React mà không cần viết một class.
Giới thiệu series react
601
Một vài kiến thức cơ bản cũng như nâng cao mà mình sẽ tổng hợp lại trong quá trình làm việc cũng như self learning
JWT Tokens là một cách thức lưu trữ thông tin xác thực hiệu quả, nhưng làm cách nào để chúng ta có thể giúp chúng an toàn hơn? Có 2 cách thường dùng để lưu trữ JWT Tokens là LocalStorage và Cookies. Bây giờ chúng ta sẽ bắt đầu "mổ xẻ" các ưu - nhược điểm của mỗi loại nhé.
Redux là một framework quản lý state dựa trên ý tưởng: tất cả các state của ứng dụng sẽ được lưu xuống một global state và sử dụng các reducer function để tương tác với chúng.
Styled-Components là một thư viện giúp bạn tổ chức và quản lý styles trong các dự án sử dụng React tuân theo đề xuất từ Facebook.
Decorators trong Typescript
1102
Các bạn dev nào từng làm Angular chắc sẽ khá quen thuộc với Decorators đúng không? Nhưng bạn thật sự đã hiểu rõ về nó hay chưa? Chúng ta hãy cùng nhau ôn bài một tí nhé ^_^
PHP là ngôn ngữ được sử dụng rộng rãi nhất trên thế giới trong lập trình web. Nó cũng bị ghét nhất. Nhưng tại sao nhiều developer lại ghét nó đến vậy? Hôm nay chúng ta hãy cùng tìm hiểu lý do xem chúng có thuyết phục không nhé ^_^
Là developer, chúng ta luôn tìm cách để tiết kiệm thời gian cho các dự án của mình. Đó là lý do tại sao các thư viện được tạo ra để giảm bớt các khó khăn khi triển khai những thứ lặp đi lặp lại. Với các frontend framework như React, việc chia sẻ chức năng chung cho các dự án khác nhau trở nên dễ dàng hơn bao giờ hết.