Trở thành Frontend Developer

Nếu bạn gặp khó khăn với bài tập ở bài trước thì mình cũng chia sẻ là các bài sau độ khó và khối lượng bài tập sẽ tăng dần :)). Series này mang tính giới thiệu là chính và có nhiều vấn đề không đề cập + đề cập qua qua, nên mình sẽ lấy số lượng bài tập để bù vào, khuyến khích các bạn tự tìm hiểu thêm.

Đáp án bài trước

Bắt đầu bài viết này bằng việc đưa ra đáp án của bài trước, thì cấu trúc nó sẽ dạng dạng như thế này:

<Container>
      <Item 
        logo={require('./cnn-logo-square.png')}
        thumbnail={require('./1.png')}
        name="CNN"
        name2=" "
        hashtag="#REPUBLICAN PARTY"
        title="Here's how Republicans running on ballot security tried to rig the 2020 election"
        publisher="⚡CNN"
        time="Now"
      />
      <Item
        logo={require('./cbsnews-logo-black-512x512.png')}
        thumbnail={require('./2.png')}
        name="CBS News"
        name2="flipped into Lastest Headlines"
        hashtag="#MATT GAETZ"
        title="Representative Matt Gaetz's ex-girlfriend granted immunity in sex trafficking probe"
        publisher="⚡CBS News - By Michael Kaplan"
        time="5 hours ago"
      />
      <Item
        logo={require('./abc-news-1.jpg')}
        thumbnail={require('./3.png')}
        name="ABC News"
        name2="flipped into News"
        hashtag="#MICHIGAN"
        title="$20K reward offered for student who vanished at Michigan State University"
        publisher="ABC News - Abigail Shalawylo"
        time="3 hours ago"
      />
    </Container>

HTML

<main-container>
  <news-item
    logo="https://i.imgur.com/I9kWuOh.png"
    name="CNN"
    name2="&nbsp"
    thumbnail="https://i.imgur.com/z7zZAgh.png"
    hashtag="#REPUBLICAN PARTY"
    title="Here's how Republicans running on ballot security tried to rig the 2020 election"       publisher="⚡CNN"
    time="Now"
  ></news-item>
  <news-item
     logo="https://i.imgur.com/JnuGitv.png"
     name="CBS News"
     name2="flipped into Lastest Headlines"
     thumbnail="https://i.imgur.com/FEjnKH2.png"
     hashtag="#MATT GAETZ"
     title="Representative Matt Gaetz's ex-girlfriend granted immunity in sex trafficking probe"        
     publisher="⚡CBS News - By Michael Kaplan"
     time="5 hours ago"
 ></news-item>
  <news-item
     logo="https://i.imgur.com/iSBQpWO.jpg"
     name="ABC News"
     name2="flipped into News"
     thumbnail="https://i.imgur.com/SYV78b9.png"
     hashtag="#MICHIGAN"
     title="$20K reward offered for student who vanished at Michigan State University"        
     publisher="ABC News - Abigail Shalawylo"
     time="3 hours ago"
 ></news-item>
</main-container>

Đề bài có yêu cầu là Code thành 2 component, 1 container và 1 item, do đó, trong code của bạn chỉ được chứa 2 loại component. Làm như vậy để định hướng bạn phải tư duy theo hướng Component. Gợi ý của bài được cài cắm bằng việc cầm tay chỉ việc tạo component <Middle />, khi bạn có thể truyền children và height vào, thì bạn có thể truyền các loại thông tin khác vào tùy theo nhu cầu sử dụng.

1 số lưu ý mình sẽ đúc kết và nói thêm lại qua bài tập vừa rồi:

có 2 cách để truyền thông tin vào 1 Component là qua attributes (hay còn gọi là props) và children. <Component attribute1="abc" attribute2="xyz" ...>Children</Component>
style bên trong Custom Component sẽ k chịu ảnh hưởng từ style (CSS) bên ngoài
việc truyền thông tin là tự do và phụ thuộc vào việc sắp xếp của bạn, hãy thử tự tập việc truyền thông tin qua lại để nắm vững cái này.
children của Component này có thể là 1 Custom Component khác đã khai báo trước đó
bên HTML thì giá trị truyền vào qua attribute luôn là kiểu "string", còn với URP, giá trị truyền vào có thể là mọi loại biến của Javascript

Bài tập tiếp theo

Hãy chỉnh sửa code của bài tập trước để đạt được như sau

Có nghĩa là ở màn hình nhỏ hơn (VD như màn hình điện thoại), thì các Item sẽ được xếp thành cột, chứ không phải thành hàng nữa. Cái này gọi là Responsive, để tránh việc vỡ giao diện, hoặc giao diện trở nên khó dùng trên các kích thước màn hình khác nhau. Để làm được bài này thì hãy làm các bài tập nhỏ sau đây

Bài 1.1: Hoàn thiện khóa học Responsive Web Design Principles trên Freecodecamp

Bài 1.2: Đưa media query vào bên trong Component và xử lý bài tập với HTML. Lưu ý là vẫn phải sử dụng style theo flex box.

Đối với URP, thì media query không được hỗ trợ hoàn toàn, do vậy phải sử dụng 1 hướng khác. Hãy làm theo hình sau

Lưu ý: đoạn code bên trên return chính là Javascript, với công nghệ Component hầu như bạn sẽ viết code với Javascript. Nếu chưa quen thuộc với nó, thì hãy ôn lại và làm quen ngay

Tham khảo thêm bài viết này: https://www.w3schools.com/js/js_es6.asp

Bài 1.3: Sử dụng đoạn code mẫu bên trên để xử lý bài tập với URP

Bài 1.4: Sau khi đã làm xong hết các bài tập trên, thì làm thêm 1 bài tập như sau:

Thiết kế 1 component có cấu trúc dạng như sau:

URP

<Component
 mobileStyle={{ backgroundColor: 'red'  }}
 desktopStyle={{ backgroundColor: 'yellow' }}
/>

HTML

<custom-component
mobile-style="background-color: red;"
desktop-style="background-color: yellow;"
>
</custom-component>

Và Component khi hiển thị sẽ đổi màu background tùy theo thiết bị hiển thị. Làm được Component này thì bạn sẽ có cơ sở để làm responsive theo hướng Component cho các phần phức tạp hơn sau này

Lộ trình cày cuốc để trở thành Frontend Developer

(đang hoàn thiện...)

Trở thành Frontend Developer

Comments

[vi-vn] Giới thiệu về lập trình

Giới thiệu về lập trình và Bài test độ phù hợp

More from this blog

CRUD dữ liệu, headless CMS

Login phần 2, API, Firebase Authentication

Login, Signup, kiểm tra tình trạng đăng nhập

Responsive Header

Component phần 6: Tổng kết và hệ thống hóa lại về UI Builder, Web Component và React

Đáp án bài trước

Bài tập tiếp theo

Bài 1.1: Hoàn thiện khóa học Responsive Web Design Principles trên Freecodecamp

Bài 1.2: Đưa media query vào bên trong Component và xử lý bài tập với HTML. Lưu ý là vẫn phải sử dụng style theo flex box.

Bài 1.3: Sử dụng đoạn code mẫu bên trên để xử lý bài tập với URP

Bài 1.4: Sau khi đã làm xong hết các bài tập trên, thì làm thêm 1 bài tập như sau:

Lộ trình cày cuốc để trở thành Frontend Developer

Command Palette

Comments

[vi-vn] Giới thiệu về lập trình

Giới thiệu về lập trình và Bài test độ phù hợp

More from this blog

Đáp án bài trước

Bài tập tiếp theo

Bài 1.1: Hoàn thiện khóa học Responsive Web Design Principles trên Freecodecamp

Bài 1.2: Đưa media query vào bên trong Component và xử lý bài tập với HTML. Lưu ý là vẫn phải sử dụng style theo flex box.

Bài 1.3: Sử dụng đoạn code mẫu bên trên để xử lý bài tập với URP

Bài 1.4: Sau khi đã làm xong hết các bài tập trên, thì làm thêm 1 bài tập như sau:

Lộ trình cày cuốc để trở thành Frontend Developer